Responsive typography font-size calculator
What are fluid-responsive fonts?
They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints.
Some versions address the whole page, others manipulate individual selectors but all of them use a calculation based upon the
VW unit to generate the scaling behaviour.
Supported by all modern browsers: Can I use Viewport units.
So how's it calculated?
This calculator generates the figures for the math equation:
VW is used which supplies a different font-size on devices spun between portrait to landscape.
Personally I do not consider this an issue but if you do please drop me a line and I'll see what I can work up.
The alternative is to use
vmin (or eventually
vmax once IE plays catch-up).
See Responsive fonts - auto-scaling the root font-size for more detail.
When the calculation is applied, using the
:root selector, it does not reset user-defined preferences, it compliments, thereby maintaining this accessibility feature.
As for applying to other selectors? It appears to work well, though not as throughly tested. The secret sauce here is the
1rem value which reads the user-defined setting before applying the math.
Safari resize issue
Stack Overflow offered this hacky solution:
Thanks Paul O'Brian for leading me to this fix. He has a Codepen demo covering the Safari issue.