`font-size` With All Viewport Units

We’ve covered fluid type a number of times. This page probably covers it in the best detail. It’s a little more complicated than simply using a vw unit to set the font-size since that’s far too dramatic. Ideally, the font-size is literally fluid between minimum and maximum values.

Someday there will be min-font-size and max-font-size (probably), but until then, our fluid type implementations will probably need to resort to some @media queries to lock those mins/maxes.


Around a year ago Matt Smith documented a technique I had missed. It calculates font-size using a little bit of vw, a little bit of vh, and a little bit of the smaller of the two…

:root {   font-size: calc(1vw + 1vh + .5vmin); }

Of course, it depends on the font and what you are doing with it, but it seems to me this tempers the curve such that you might not really need a min and max.

Direct Link to ArticlePermalink

`font-size` With All Viewport Units is a post from CSS-Tricks




Add a Comment

Your email address will not be published. Required fields are marked *