Viewport sized typography with minimum and maximum sizes

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

There is no min-font-size or max-font-size, so while setting font-size in viewport units is cool, there’s a good chance your font-size might get too small on small screens or too big on large screens.

Eduardo Boucas has a clever workaround though. Use media queries to force the font-size back into a set pixel value when the viewport has gotten to the breakpoints at which those min/max values would be exceeded. He’s got a Sass mixin to help with the math, but the compiled CSS is ultimately pretty simple.

Plus, remember this little related gem.

Direct Link →