Font size calculator
Add a viewport width to show its corresponding font size values, and
add a scale step to extend the scale up or down.
px
px
px
px
px
px
:root { --f-0-min: 16.00; --f-0-max: 20.00; --f-1-min: 19.20; --f-1-max: 24.00; --f-2-min: 23.04; --f-2-max: 28.80; --f-3-min: 27.65; --f-3-max: 34.56; --f-4-min: 33.18; --f-4-max: 41.47; --f-5-min: 26.54; --f-5-max: 49.77; --f-6-min: 47.78; --f-6-max: 59.72; --fluid-min-width: 320; --fluid-max-width: 1240; --fluid-screen: 100vw; --size-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp)); --size-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp)); --size-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp)); --size-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp)); --size-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp)); --size-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp)); --size-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); --size--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp)); --size--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp)); }