Responsive Type With Only CSS
Ryan Allen
981

Viewport Percentage CSS Considerations

I’m about to launch my first site (for SkyTouch Technology) using VH and VW as primary size properties for nearly all typography on the site. During development and testing, a few things became apparent:

  1. Like many powerful tools, this should be used sparingly. A VW property used on an H1 is awesome on mid-size at normal aspect ratio, but you’ll need breakpoints above around 1600 and below 800, or weird things will happen.

2. Support is not great on android. Even where it is supported, it’s so spotty and loosely interpreted that I just turned it off for anything below 4.3 (yes, it’s that bad). CS User Agent is something I am using for the first time on this project, as well, and it’s been pretty handy here.

3. Always, even if it’s not causing issues, provide a more traditional value as a fallback. The easiest way to do this is to just add a value immediately before, so browsers that don’t support the VH/VW properties will ignore it:

{ font-size:2em; font-size:2vw;
}

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.