CSS Clamp Fluid Typography: Set Flexible Bounded Text

CSS clamp() lets you set font sizes that scale fluidly between a minimum and maximum value, so text adapts to any screen width without breaking your layout. You write one line like font-size: clamp(1rem, 2vw + 1rem, 2.5rem); and the browser picks the right size for the viewport. This article explains how the function works, how to choose the three values, and common pitfalls to avoid.

How to Choose the Three Values

Picking good min and max sizes is the easy part – they come from your design system. The tricky part is the preferred value. A common approach is to use a linear function of the viewport width:

font-size: clamp(1rem, 0.5vw + 1rem, 1.5rem);

Here the slope (0.5vw) controls how fast the font grows. To find a slope that works, decide the viewport widths at which you want the min and max to apply. For instance, if you want 16px at 320px and 24px at 1200px, the slope is (24-16)/(1200-320) = 8/880 ≈ 0.0091rem per px, or about 0.91vw. The base offset is then 16px – 0.0091*320 ≈ 13.1px, so the preferred value is 0.91vw + 13.1px. You can round to 0.9vw + 0.8rem (since 13.1px ≈ 0.82rem). Many developers use a simpler formula: 1rem + 0.5vw for body text, and 2rem + 1vw for headings. Test at 320px, 768px, and 1920px to ensure the size feels right.

Common Mistakes and Misconceptions

Using only vw without a base – clamp(1rem, 5vw, 3rem) makes text tiny on mobile (5vw at 320px = 16px, but at 1920px = 96px, clamped to 48px). The preferred value should include a fixed unit to keep the curve gentle.
Forgetting that vw includes scrollbar width – on Windows, the vertical scrollbar takes about 15px, so 100vw is slightly wider than the visible area. This can cause horizontal overflow if you use vw for layout, but for font-size it rarely matters.
Assuming clamp is supported everywhere – it is supported in all modern browsers since 2020, but if you need ancient browsers, provide a fallback font-size before the clamp line.
Clamping with rem and px mixed – that is fine, but be consistent; rem is relative to root font size, which can be set by the user, so clamp values in rem scale with user preferences, while px does not.
Thinking clamp is only for font-size – you can use it for margins, padding, widths, and any length property. The same rules apply.

Comparison with Other Fluid Typography Methods

Before clamp(), developers used JavaScript to change font size on resize, or media queries with multiple breakpoints. Media queries are still useful for major changes (e.g., switching from mobile to desktop layout), but they require writing several font-size declarations. JavaScript solutions are heavier and can cause layout shifts. clamp() is a pure CSS solution that works without scripting and adjusts continuously. Another modern approach is the vw-only formula with a fallback, but that lacks bounds. clamp() is the only method that gives you both fluidity and hard limits in one line.

Accessibility and User Preferences

One important consideration: clamp() can override a user’s browser font-size setting if you use px as the minimum. For accessibility, use rem for the minimum and maximum so that if a user increases their default font size, your text scales up accordingly. For example, clamp(1rem, 0.5vw + 1rem, 1.5rem) respects the user’s root font size. Avoid setting the root font size in px on the html element, because that breaks user zoom. Also, be mindful that extremely large fluid headings can cause horizontal overflow if the container has a fixed width – test with long words.

Frequently Asked Questions

What is the difference between clamp() and min()/max()?

min() picks the smallest of two values, max() picks the largest. clamp(MIN, VAL, MAX) is equivalent to max(MIN, min(VAL, MAX)). It ensures the value never goes below MIN or above MAX.

Can I use clamp() with em units?

Yes, you can use any length unit. However, note that em in the preferred value is relative to the element’s own font size, which can create a circular reference if you are setting font-size itself. It is safer to use rem for the fixed parts.

How do I know the right vw value for my design?

Start with a linear equation: slope = (max – min) / (maxViewport – minViewport). Then convert to vw by multiplying by 100. For example, from 16px at 320px to 24px at 1200px gives slope ≈ 0.0091px per viewport px, which is 0.91vw. Add a base offset so the formula hits your min at the smallest viewport.

Does clamp() work in all email clients?

No. Many email clients (especially Outlook) do not support clamp(). For email, use media queries or fallback font sizes. For web, support is universal in current browsers.

Can I animate a clamp() value?

Yes, you can transition or animate font-size if the clamp expression evaluates to a number. However, the interpolation may not be smooth if the preferred value changes non-linearly. It is usually better to animate with transform or opacity.

Why does my clamp() not work in older browsers?

Older browsers (before 2020) do not support clamp(). Provide a fallback declaration before the clamp line, like font-size: 1.5rem;. The browser will ignore the clamp if unsupported.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →