Scaling typeface gracefully with fluid typography

Making text look good on every screen isn’t as simple as it sounds. For a long time, web designers used media query breakpoints to resize fonts, but this approach quickly becomes messy as more devices and screen sizes emerge.

Starting with WordPress 6.1 (released in November 2022), there’s now a better way: fluid typography. It automatically adjusts font sizes defined in your theme.json file so they scale smoothly, regardless of the screen’s width or height.

This feature doesn’t just change font size, but it also fine-tunes line height, word spacing, and even white space, making your design more consistent, readable, and accessible across every device.

This article explains how fluid typography works, its differences from traditional breakpoints, and how to implement it in WordPress using theme.json and CSS.

But first, let’s look at how we used to handle typography, and why fluid typography is such a big improvement.

Breakpoint typography vs. fluid typography

A good way to understand fluid typography is by comparing it to its predecessor, breakpoint typography, which uses media queries that target specific device widths for font sizing.

Breakpoint typography

Typically, breakpoints are specific ranges of viewport widths, usually defined in pixels. A common approach is to set three main breakpoints that target mobile, laptop, and desktop screens.

Here are typical breakpoint settings for laptops in a CSS file:

@media (min-width: 48em) and (max-width: 74.9375em) {
  body {
    font-size: 1.125rem;
    line-height: 1.6;
  }
  h1 {
    font-size: 2rem;
  }
}

While this works, it has a major drawback: as new devices and screen sizes appear, managing all these breakpoints quickly becomes unsustainable.

In the example GIF above, as the viewport shrinks, the text resizes in uneven jumps. This “stepping” behavior often leads to awkward or unpredictable scaling, which is not ideal for smooth, consistent typography.

Fluid typography

With the introduction of the CSS clamp() property in 2019, along with viewport units (vw and vh), seamless and automatic scaling became possible.

These let you define font sizes that scale dynamically based on the viewport’s dimensions, eliminating the need for multiple breakpoints.

Here’s an example for a medium font size using clamp():

.has-medium-font-size {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

We’ll take a closer look at how clamp() works later, but for now, think of it as a formula that sets minimum, preferred, and maximum font sizes, ensuring text scales smoothly across screens.

In this GIF, as the viewport narrows, the text adjusts fluidly. There are no jumps or sudden size changes.

This smooth behavior is what makes fluid typography such a leap forward from breakpoint-based design. Instead of adjusting text in steps, it allows for seamless scaling that feels natural across every device.

But smooth resizing is just the start. Fluid typography offers several other advantages that make it easier to build flexible, consistent, and accessible designs.