Web devCSS

Fluid typography with CSS clamp(): the formula, the accessibility catch, and a worked example

2026-09-19 · 4 min read

The problem with responsive breakpoints

For years, front-end developers built responsive typography using static media queries. You establish a base font size for mobile devices, then add CSS breakpoints to increase the size for tablets and desktops. This approach creates distinct, abrupt jumps in typography.

When a user resizes their browser window or rotates their tablet, the text snaps awkwardly from one size to another. At viewport widths immediately preceding a breakpoint, the text often feels disproportionately small compared to the available screen space. Fluid typography solves this specific issue by scaling the text smoothly across all screen sizes, ensuring the typography always matches the exact proportions of the user device without sudden jumps.

The anatomy of the clamp function

Modern CSS provides the clamp function to handle fluid scaling natively in the browser, eliminating the need for complex JavaScript resize listeners. The function takes three parameters in a specific order: a minimum value, a preferred dynamic value, and a maximum value. The syntax is written exactly as clamp(min, preferred, max).

The browser continuously evaluates the preferred value, which relies on dynamic viewport units. If the preferred value drops below the minimum parameter, the browser locks the font size to the minimum. If the preferred value exceeds the maximum parameter, the browser caps the font size at the maximum. Between those two extreme bounds, the font size scales fluidly. This ensures your headings never become unreadably small on mobile phones or comically large on ultrawide desktop monitors.

The accessibility catch with viewport units

A common mistake among developers is using pure viewport width units, such as vw, for the preferred value inside the clamp function. For example, setting the preferred value to 4vw means the text size always equals exactly four percent of the total screen width.

This creates an accessibility problem. The Web Content Accessibility Guidelines (WCAG) section 1.4.4 requires that users must be able to zoom text up to 200 percent without assistive technology. When a user activates browser text zoom, the browser scales its internal base font size.

Viewport units completely ignore the browser base font size because they are strictly tied to the physical pixel width of the window. If you use pure viewport units, visually impaired users cannot zoom the text. Pressing the zoom command does nothing to the typography. To maintain accessibility compliance, you must mix root em units, known as rem, with viewport units in your preferred value calculation. Because rem units tie directly to the browser base font size, they respond correctly to user zoom preferences.

Deriving the slope and intercept formula

To create an accessible clamp function, we calculate a linear equation based on your specific design requirements. We need to find the slope and the y-intercept. We assume the standard browser default base font size is 16 pixels. Assume your design requires a minimum heading size of 20 pixels (1.25rem) on a 360-pixel mobile screen, scaling up to a maximum heading size of 40 pixels (2.5rem) on a 1200-pixel desktop screen.

First, convert the viewports to rem units. The mobile viewport is 360 divided by 16, resulting in 22.5rem. The desktop viewport is 1200 divided by 16, resulting in 75rem. Next, calculate the slope. Subtract the minimum font size from the maximum font size (2.5rem - 1.25rem = 1.25rem). Subtract the minimum viewport from the maximum viewport (75rem - 22.5rem = 52.5rem). Divide the font difference by the viewport difference (1.25 divided by 52.5). The resulting slope is approximately 0.02381. To convert this decimal slope to viewport width units, multiply by 100, giving 2.381vw. Finally, calculate the y-intercept. Multiply the slope by the minimum viewport (0.02381 × 22.5 = 0.5357). Subtract this result from the minimum font size (1.25 - 0.5357). The intercept is 0.714rem.

Implementing the code

Your preferred dynamic value is the intercept plus the slope. In CSS, you write this using the calc function, or simply rely on modern CSS evaluation inside the clamp function. The final formula combines the 1.25rem minimum, the mixed preferred value, and the 2.5rem maximum. If you prefer to skip the manual arithmetic, the CSS clamp() Calculator calculates the exact slope and intercept from your minimum and maximum font sizes and viewports. It generates the correct code using rem and vw units to ensure accessibility, which you can extract instantly using the copy button.

Here is the implementation for our heading example:

h1 {
  font-size: clamp(1.25rem, 0.714rem + 2.381vw, 2.5rem);
}

You apply the exact same mathematical logic to paragraph text. If you want body text to scale from 16 pixels (1rem) on mobile to 20 pixels (1.25rem) on desktop, the math yields a different slope and intercept. You can run these new dimensions through the CSS clamp() Calculator again to grab the snippet for your paragraphs.

p {
  font-size: clamp(1rem, 0.893rem + 0.476vw, 1.25rem);
}

Text now scales smoothly between phone and desktop widths and still grows when a reader enlarges browser text.