The great advantage of using vw and vh units in CSS typography is that they create a direct relationship between browser window dimensions and text size, an invaluable feature for headlines, logos, banners, and other “hero” text in responsive web pages.
For example, take the logo above. We could create it as a fluid bitmap image, with all of the format’s attendant limitations. A responsive SVG logo would be a second option, but vw units give us a third way: creating the logo as real text that scales with the browser window. (Try changing your browser window size to see what happens.)
The base CSS for this couldn’t be simpler:
h1.abovewater { font-size: 12vw; margin-top: 7vw; }The result is that the text maintains a constant size relationship to the browser window, scaling smoothly without any need for @media breakpoints or CSS transitions.
Webkit Limitations
Chrome and Safari do not currently follow the spec, failing to change font-size< in response to viewport changes. (vw and vh work just fine when applied to other properties). To force a smooth size change in Webkit, simply add a little JavaScript:
window.addEventListener('resize', function() {abovewater = document.querySelector('.abovewater');abovewater.style.fontSize = "5vw";});Technically, any CSS that forces a repaint for an element will “wake up” Webkit and create a smooth size change for fonts measured in viewport units. As written, the JavaScript code is slightly wasteful, and would be improved by detecting a -webkit vendor prefix, making that a condition for adding a listener.
Older Browser Fallbacks
IE8 and earlier do not support vw and vh units; nor do older versions of other browsers (Safari 5, for example). It’s important to create a size fallback for text if you’re using viewport units: at the very least, you should write a font-size setting that earlier browsers can comprehend, which later browsers will then overwrite with a vw value:
h1.abovewater {font-size: 60px; font-size: 12vw;margin-top: 21px; margin-top: 7vw;}Of course this means that older browsers will display hero text at a fixed size, although polyfills can simulate the behavior if you need a seamless fallback solution.
Scaling Limits
As with fluid images, the power of responsive text is double-edged: it’s entirely possible for hero text scaled with vw and vh units become too large or small at extreme screen sizes. Sadly, there’s no max-font-size property to govern this behavior, although the CSS3 min() and max() functions will fill the role nicely once they are supported by browsers.
In an ideal adaptive design, there would be one “perfect” vw/vh measurement for text that would work within your layout at all screen sizes; failing that, the standard @media breakpoint intervention works well:
@media screen and (max-width: 400px) and (orientation: portrait)) {h1.abovewater { font-size: 20vh; }}It may be wise to add a CSS transition on the text at this point, so that the movement from one measurement to another will be as smooth as that experienced by the user during normal browser resize. Play with the Buoyant Logo code on Codepen.
Original Float Studio logo design by Ryan McLaughlin