Typography scale calculator
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) + 14pxMultiply slope by 100 and use vw
font-size: clamp(16px, 0.5vw + 14px, 19px);