What are 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.
How's it done?
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).
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 - cool
- Mac Min - Pop-up test window fails
- Mac Safari - works but only at full pixel level, no sub-pixels so less smooth. The pop-up test window has issues also. Investigating…
- PC: Firefox Dev, Chrome - all's cool
- PC: IE - tool (and site) isn't supported, but the method works as expected across IE 9 - Edge.