Hi
I’ve been reading up about using viewport typography and I’m really liking it but my question is, should I use it or should I stick with em’s and use breakpoints?
The issue I’ve found is the site I’m building needs to support IE9+ and when I scale down my site, the font’s are going stupidly small and on large screens the font is going really big.
I’ve read about hacks on making sure the fonts don’t go bigger than a set size and likewise for smaller fonts but it seems I’m doing something wrong as I can’t get them to work!
What does everyone else do? Is it too early to put viewport fonts in to a busy production site? Thanks
To support older browsers that don’t support units like vw you shouls always offer a fall-back using standard units.
font-size: 1.3em; // fall back comes first
font-size: 2vw; // browser which support this override the fall back, those that don't ignore it
There are two way to deal with this.
One is to add media queries at either extreme to put the stops on the sizing. This can be useful when supporting old browsers, as the “middle” can have the fall-back size as a medium font size.
The other is to combine vw with em using calc() to dampen the expansion and shrinking. Eg.
font-size: 1.8em; // fall back comes first
font-size: calc( 1em + 1.5vw ) ; // Tweak to suit
Here the size can never be as small as 1em. You can tweak the balance between fixed size and dynamic to get the behaviour you want. You may still want a max size query for very big screens.
