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.
Or…
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.