Viewport sized typography with minimum and maximum sizes

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in 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 →