With fluid typography, you use viewport units for your font sizes, either alone or as part of a calc()
value. This will let your font size grow along with the size of the screen, keeping the two in balance.
Because fluid typography sizes with the viewport, it's common to use a minimum and a maximum size to prevent text becoming too small or too large. There are various techniques for this, the easiest is to use media queries: up to a certain width, the size is fixed, after that, the size is either in vw
, or in a calc()
, for example, calc(1rem + 0.25vw)
, and at a certain viewport width, you define the maximum font size.
An upcoming method is clamp()
, which will be introduced in browsers soon and lets you do this without media queries. For example clamp(1rem, 2.5vw, 1.75rem)
can be used to get a font-size that's 2.5vw, with a minimum of 1rem and a maximum of 1.75rem.