This table lists font size values in px for your type scales at the min and max viewport widths entered above.
Add a viewport width to show its corresponding font size values.
Add a scale step to extend your scale up or down.
Scale
step |
Viewport
width | ||
---|---|---|---|
320 | 1140 | ||
5 | 52.25 | 73.24 | |
4 | 43.55 | 58.59 | |
3 | 36.29 | 46.88 | |
2 | 30.24 | 37.50 | |
1 | 25.20 | 30.00 | |
0 | 21.00 | 24.00 | |
-1 | 17.50 | 19.20 | |
-2 | 14.58 | 15.36 | |
/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
--fluid-min-width: 320;
--fluid-max-width: 1140;
--fluid-screen: 100vw;
--fluid-bp: calc(
(var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
(var(--fluid-max-width) - var(--fluid-min-width))
);
}
@media screen and (min-width: 1140px) {
:root {
--fluid-screen: calc(var(--fluid-max-width) * 1px);
}
}
:root {
--f--2-min: 14.58;
--f--2-max: 15.36;
--step--2: calc(
((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) *
var(--fluid-bp)
);
--f--1-min: 17.50;
--f--1-max: 19.20;
--step--1: calc(
((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
var(--fluid-bp)
);
--f-0-min: 21.00;
--f-0-max: 24.00;
--step-0: calc(
((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
var(--fluid-bp)
);
--f-1-min: 25.20;
--f-1-max: 30.00;
--step-1: calc(
((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
var(--fluid-bp)
);
--f-2-min: 30.24;
--f-2-max: 37.50;
--step-2: calc(
((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
var(--fluid-bp)
);
--f-3-min: 36.29;
--f-3-max: 46.88;
--step-3: calc(
((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
var(--fluid-bp)
);
--f-4-min: 43.55;
--f-4-max: 58.59;
--step-4: calc(
((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
var(--fluid-bp)
);
--f-5-min: 52.25;
--f-5-max: 73.24;
--step-5: calc(
((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) *
var(--fluid-bp)
);
}