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.
Scaling conforms to expectations on both class and root selectors.
Still to check effect on user-defined base font setting.
- Mac: Firefox Dev, Opera Dev, Chrome, Vivaldi - all cool
- Mac: Min - Pop-up "Test window" fails
- Mac: Safari - works but only at full pixel level, no sub-pixels so less smooth, and in some circumstances requires a page refresh. The "Test window" has issues also. Investigating…
- PC: Firefox Dev, Chrome - all cool
- PC: IE - though the tool (and site) isn't supported, the method works as expected across IE 9 - Edge.
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 issues
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.