Fluid typography—the idea that text scales smoothly with screen size—has evolved alongside CSS itself. Before modern functions existed, developers often relied on verbose media queries and manual breakpoints. The introduction of clamp() simplified this work by allowing text to grow with viewport width while still respecting minimum and maximum limits. Now, with the arrival of the CSS if() function in Chrome, it becomes possible to refine these rules further, introducing conditional logic directly in CSS without additional classes or JavaScript.
From clamp() to Conditional Scaling
The clamp() function works by defining three values: a minimum, a preferred (scalable) value, and a maximum. For example:
font-size: clamp(16px, 2vw + 16px, 24px);This ensures the font size never drops below 16 px, grows with 2vw as the screen widens, and stops at 24 px. The challenge is that not all text elements should scale at the same rate. Headings, for instance, often benefit from a faster scale, while body copy should remain more stable for readability.
This is where if() enters the picture. It lets you test conditions inline—such as which type of text is being styled—and choose different scaling factors. Combined with a custom function, it becomes straightforward to reuse across a stylesheet.
Building a Fluid Typography Function
A custom function can package up the logic into a clean, reusable form. Here is an example:
@function --fluid-type(--font-min, --font-max, --type: 'header') {
--scalar: if(style(--type: 'header'): 4vw;
style(--type: 'copy'): 0.5vw;
else: 1vw);
result: clamp(var(--font-min), var(--scalar) + var(--font-min), var(--font-max));
}- The
--typeargument defaults to'header'. if()checks the value and assigns4vwif it is a header,0.5vwif it is body copy, and1vwotherwise.- The selected scalar is added to the minimum font size to create the middle “preferred” value inside
clamp().
The result is a font size rule that adapts both to screen width and to the context of the text.
Applying It to Headings and Copy
With the function defined, applying it to elements becomes straightforward.
h1 {
--header-min: 24px;
--header-max: 36px;
font-size: --fluid-type(var(--header-min), var(--header-max), 'header');
}
p {
--copy-min: 16px;
--copy-max: 24px;
font-size: --fluid-type(var(--copy-min), var(--copy-max), 'copy');
}For the heading, the font scales quickly from 24 px up to 36 px. The paragraph text uses a smaller scalar, growing more subtly between 16 px and 24 px. This distinction gives headings the dramatic presence they need without overwhelming body text.
Full Working Example
The following snippet demonstrates the complete setup:
See the Pen Fluid Typography with CSS if() and clamp() by Alex Ivanovs (@stackdiary) on CodePen.
Browser Support and Fallbacks
clamp()is widely supported across all modern browsers.if()is currently available in the latest versions of Chrome (v137+) and remains experimental elsewhere.- Always provide fallbacks: a static font size before the function, or wrap the function inside
@supportsso older browsers ignore unsupported code.
This pattern ensures that even users on older browsers see legible, fixed text sizes, while those on newer browsers benefit from advanced fluid typography.
The combination of clamp() and if() provides a powerful new way to manage type scaling in CSS. Headings can expand dramatically, body text can remain steady, and everything fits neatly into one reusable function. While if() is still experimental, progressive enhancement makes it safe to start experimenting today. As support spreads, this approach has the potential to become a standard method for building responsive, readable typography.
