Skip to content
Content starts here

Type Scale Calc

Generate a fluid typography scale based on a few inputs.

Find out how it works

Everything is based on math. If you want a full breakdown, check out this guy: Aleksandr Hovhannisyan - Fluid type scale

He also has his own fluid type scale calculator, that is probably better than this one, but I needed a bit more flexibility in the scales.

Quick maths

Calculate slope

m = (maxFontSize - minFontSize) / (maxBreakpoint - minBreakpoint)
e.g.: m = (19px - 16px) / (1000px - 400px) = 1/20 = 0.005

Calculate y-intercept (b)

y = mx + b
16px = 0.005(400px) + b
b = y - mx
b = 16px - 0.005(400px) = 16px - 2px = 14px

Calculate preferred value

preferredValue = y = mx + b = 0.005(x) + 14px

Multiply slope by 100 and use vw

font-size: clamp(16px, 0.5vw + 14px, 19px);
Generate your scale

Choose a minimum ratio and maximum ratio. Minimum ratio will be the scale for small viewports and scale up to the max.

Next choose a minimum and maximum font size (in px).

Finally choose the minimum and maximum width (in px). Your sizes will scale between these viewport sizes.

Add your required scale steps. Below are mine.