Reference paragraph set to an absolute 16px
. This demonstration uses the base font size (fairly arbitrarily chosen) of 3vw
.
1.5em
1.15em
Main body text set to 1em
.
Note that while this result in fluid font sizing that adapt to different viewport widths, it remains unaffected by desktop browser zoom. In modern desktop browsers, full-page zoom effectively manipulates the mapping of CSS pixels to viewport/device pixels - for instance, zooming to 200% keeps the window dimensions the same (obviously), but halves the viewport width and height while simultaneously doubling the browser's dots-per-pixel. This means that 1vw
remains at the same rendered size on screen, regardless of zoom setting.
Using purely vw
/vh
is therefore quite useless in practice, as the resulting page will become un-zoomable (failing WCAG 2.0 1.4.4 Resize text). Additionally, this of course also runs the risk of having a font size that scales far too small/large on differently sized viewports. An initial fix is to introduce a further element (which is unaffected by viewport size) to the font size using actual CSS calc(...)
calculations.