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

It's time to stop resizing your browser.

Create and test truly responsive websites and apps faster than ever before.

Learn more
Polypane screenshot
By using our site you agree to our privacy policy and disclaimer