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.

The responsive design glossary explains the many terms used in responsive design and development. It's a practical reference for anyone getting started with responsive design and development.

Get an overview of all responsive design terms

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Polypane screenshot