I used to keep seven sets of font sizes on every site I built. One for each Divi breakpoint. Desktop, tablet, phone, and the in-between sizes too. Every heading got hand-tuned at every screen width, and a single design tweak meant editing the same number in seven places. Fluid typography ended that for me. Now I set one font size that grows and shrinks smoothly with the screen, and the seven-place edit is gone.

This is the way to build type in 2026, and the tooling finally caught up. The CSS clamp() function does the heavy lifting, and it has been supported across every major browser since July 2020 (MDN Web Docs). I use fluid typography on all my new sites, and I am slowly converting the older ones. Here is what the concept actually is, why it beats the old breakpoint approach, and how I set it up on my Divi builds.

The Old Way Made You Guess at Sizes You Could Not See

For years, responsive type meant media queries. You pick a few breakpoints, then you assign a different font size at each one. A headline might be 100px on desktop, 56px on tablet, and 32px on a phone. The browser holds each size until the window crosses a breakpoint, then it snaps to the next one.

That snap is the problem. Elegant Themes shows it cleanly: a Heading 1 set to 100px at a 776px viewport could drop to 56px the instant the window narrows to 767px (Elegant Themes). One pixel of window change, a 44px jump in type. Between those breakpoints, the size is frozen. It is not tuned for the screen in front of the reader. It is tuned for the nearest breakpoint you happened to define.

The deeper issue is that there is no single screen size to design for anymore. Mobile is now about 59.6% of all web traffic, and the phones that traffic comes from cluster around several different widths, not one (my breakdown on what screen size to design for). Breakpoints force you to bet on a handful of widths and leave everything between them to chance. Most of your readers land between your breakpoints, not on them.

What Fluid Typography Actually Is

Fluid typography means the font size changes smoothly as the viewport changes, growing or shrinking by a constant rate instead of jumping at fixed breakpoints (web.dev). You set a minimum size, a maximum size, and a rate of change. The browser interpolates every size in between. There is no snap, because there are no steps.

The engine behind it is the CSS clamp() function. It takes three values: a minimum, a preferred value, and a maximum. The browser uses the preferred value, but never lets it drop below the minimum or rise above the maximum. The preferred value usually mixes a fixed unit with a viewport unit, like 16px + 0.25vw, so it scales with the window.

Here is a real example from a fluid type scale, the kind I drop straight into a build:

:root {
  --body: clamp(1.25rem, 0.33vi + 1.17rem, 1.67rem);
  --h2:   clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem);
  --h1:   clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem);
}

That H1 will never render smaller than 4.77rem or larger than 9.35rem. Between those bounds it scales by the viewport, so it looks deliberate at 360px and at 2560px and at every width in between. The whole point of fluid font sizing is that it removes any need to calculate or specify breakpoints manually, because the browser fills in every size for you (web.dev).

The good news is that clamp() is not bleeding-edge. It has shipped in Chrome, Firefox, and Safari since 2020 and now qualifies as part of the Baseline widely available set, with support sitting above 90% of browsers (MDN Web Docs). You can use it on a client site today without a fallback for anything most people are running.

Why Fluid Type Can Replace Most of Your Breakpoints

When you size type well with clamp(), you can eliminate most of the breakpoints you used to need just for fonts. That is the part that changed my workflow. I am not editing seven font sizes per element anymore. I set one clamp value and the type handles every screen.

I will be honest that fluid type does not replace breakpoints entirely, and you should not try to make it. Layout still needs them. A three-column grid that should stack on a phone is a layout decision, and a media query or container query is the right tool for that. Fluid typography handles the type. Breakpoints handle the structure. Having both is the strongest setup, with each doing the job it is good at.

The table below is how I think about the split on a typical build.

Where the Accessibility Line Is, and How To Stay Behind It

This is the part most fluid type tutorials skip, and it matters. If you size text with pure viewport units, you take font control away from the user. Viewport units do not respond to browser zoom, so a reader who needs bigger text cannot get it. That can break WCAG Success Criterion 1.4.4, which requires that text can be resized up to 200% without loss of content or function.

The fix is built into clamp() if you use the right units. Set your min and max in rem or em so they track the user's font preference and zoom, and keep the viewport portion of the preferred value small. A min of 1em and a max of 1.125em with a tiny 0.24vw in the middle stays fully zoomable (web.dev).

There is a clean rule of thumb for headings too. According to the rule cited by web.dev from Maxwell Barvian, if your maximum font size is no more than 2.5 times your minimum, the text will always pass WCAG 1.4.4 on modern browsers (Smashing Magazine). Keep your clamp min and max inside that 2.5x window and you do not have to think about it again. The more your type leans on the viewport, the less zoom does for the reader, so lean lightly.

How I Build Fluid Type in Divi 5

I run Divi on more than 15 client sites, and Divi 5 made fluid type genuinely easy to build right inside the visual builder. You no longer need a separate stylesheet for it. Divi 5 accepts clamp() directly in the font size, line height, and letter spacing fields for both headings and body text (Elegant Themes).

My workflow looks like this. I generate a fluid scale once with a clamp calculator, then I save each value as an Option Group Preset for H1 through H6 and body. After that, every module that uses a heading pulls the fluid size automatically. One setup, applied site-wide, no per-breakpoint editing. Divi 5's Variable Generator can even produce the full set of clamp-based variables for type, spacing, and gaps for you, so you do not have to write the math (and the lighter Divi 5 framework helps your speed scores on top of that).

On sites where I write my own CSS instead of using Divi, the approach is the same idea with raw variables. I define the clamp values as CSS custom properties on :root, then apply them through Divi's typography fields or my own classes. CSS variables make the whole system flexible: change one variable, and every element using it updates at once. That combination of CSS variables and clamp is what keeps a hand-built site as easy to maintain as a builder-based one.

Start Here If You Are New To Fluid Typography

Do not try to convert a whole site by hand. Start with a fluid type scale calculator, set a sensible minimum and maximum for your body text and headings, and let it spit out the clamp values. Paste those into your root variables or your Divi presets. Test it by zooming your browser to 200% and resizing the window, and confirm the text still scales and nothing clips.

For a brand-new build, fluid typography is the default I reach for now. It is faster to set up than seven breakpoints, it looks better on the screens between your breakpoints, and it keeps the reader in control of their own text size when you size it with rem bounds. If you build on Divi, Divi 5 makes this approachable even if you are new to the builder. Set it once, and your type just works everywhere.

Frequently Asked Questions

Does fluid typography replace media queries completely?

No. Fluid typography with clamp() removes the need for breakpoints on font sizes, but layout structure like multi-column grids that stack on mobile still needs media queries or container queries. The strongest setup uses both: clamp() for type, breakpoints for layout.

Is the CSS clamp() function safe to use on client sites?

Yes. clamp() has been supported in Chrome, Firefox, and Safari since July 2020 and is now part of the Baseline widely available set, with browser support above 90%. You can use it on production sites today without a fallback for the browsers most people run.

Can fluid typography hurt accessibility?

It can if you size text with pure viewport units, because those do not respond to browser zoom and can break WCAG 1.4.4. The fix is to set your clamp minimum and maximum in rem or em units so text still scales with zoom, and to keep the maximum no more than 2.5 times the minimum.

Does Divi 5 support fluid typography?

Yes. Divi 5 accepts clamp() values directly in the font size, line height, and letter spacing fields for both headings and body text. You can save fluid values as Option Group Presets for site-wide use, and the Variable Generator can build clamp-based variables for you.

Sources

• web.dev, Responsive and fluid typography with Baseline CSS features (December 2025)
• MDN Web Docs, clamp() CSS function
• Elegant Themes, Using Clamp() In Divi 5 To Create Fluid Responsive Typography
• Smashing Magazine, Addressing Accessibility Concerns With Using Fluid Type
• W3C WAI, Understanding Success Criterion 1.4.4: Resize Text