Continuously Varying Font Sizes
I’ve long resisted continuously varying font sizes because of the inherent issues with zooming. On the other hand, if I were to specify a single universal base size, it would inevitably be too small on wide screens or too large on narrow screens. I previously compromised by using one size up to a certain width and a larger size thereafter. This allowed me to read comfortably on my desktop and phone, but using only those two devices camouflaged the problem of the discontinuity between the two sizes—a significant issue when zooming—which is what viewport-relative sizes are meant to address.
I’m now trying the method outlined in Don’t use Viewport Units for Font Sizes on their
own: specifying the
font size using a combination of the clamp function, viewport units (which should allow it to be
reasonably-sized on any device), and a rem value (which responds to the zoom level). I believe
this is the best of both worlds based on testing with browser Dev Tools on my desktop and my phone,
but this is far too limited a set of environments to be sure. I can see, at least, that zooming to
200% increases the font size roughly in proportion. Zooming further behaves appropriately too.
To keep older browsers from showing ridiculously large text, as, it transpires, they do, I set a
fixed default size and use @supports to conditionally enable the new behaviour:
Sass$responsive-font-size: clamp(1.2rem, calc(3vw + 0.5rem), 1.75rem)
html
font-size: 1.3rem
// only use viewport units when `clamp` is also supported
@supports (font-size: $responsive-font-size)
font-size: $responsive-font-size