What is fluid typography?
Fluid typography lets text size change gradually with the available viewport instead of jumping only at a few breakpoints. A CSS clamp() expression can set a minimum size, a preferred viewport-responsive value and a maximum size, so a heading grows smoothly but remains bounded.
Fluid doesn't automatically mean accessible or well-designed. The endpoints, the content, line length, font metrics and user text settings still shape whether the result is readable. The goal is a type scale that adapts without losing hierarchy.
Choose a type scale, not just a number
Begin with a hierarchy: body text, small labels, section headings and the main page title. Decide how each role should feel on the narrowest supported screen and at the desktop size. Don't start with a huge maximum and hope the result will look editorial; test headings that wrap across two or three lines, and check layouts with real titles.
One possible system is a body size that moves from 1rem to 1.125rem, a section heading from 1.75rem to 3rem, and a display heading from 2.75rem to 5rem. Those ranges are examples, not universal rules. Your font family, content width and brand style may need different endpoints.
Write the clamp rule
A typical font-size rule has this shape:
.page-title {
font-size: clamp(2.25rem, calc(1.4rem + 3vw), 4.75rem);
line-height: 0.98;
letter-spacing: -0.06em;
}The middle term is a preferred size. You can calculate it manually, use a CSS clamp generator, or adapt a value from a design system. Line height and tracking are separate decisions; they should be tested alongside the font-size value.
Make fluid type work with zoom and text resizing
A size expressed only in viewport units may not respond the way a user expects when they zoom or enlarge text. Relative bounds and a relative intercept are a stronger starting point for fluid typography. Follow the accessibility guidance for text scaling and verify that the maximum font size can grow sufficiently relative to the minimum.
Test at 200% browser zoom, with an enlarged default font size, and on a narrow screen. Check that content does not overlap, become clipped, or require unnecessary horizontal scrolling. Avoid setting a minimum so small that the page is hard to read and a maximum so large that paragraphs become difficult to scan.
Choose the viewport boundaries
The viewport endpoints should correspond to where the size should stop shrinking and stop growing—not simply to whichever values the calculator starts with. A range like 360px to 1440px is a practical test baseline for many layouts, but some components have narrower ranges and others scale across larger desktop canvases.
Use browser responsive mode to test a few intermediate widths in addition to the endpoints. A fluid formula can be correct while an adjacent grid, image or paragraph wraps poorly; responsive design is the whole composition, not only the font-size declaration.
When to use clamp versus media queries
Use clamp for a value that should transition smoothly—such as font size, spacing, gap or width. Use media or container queries when the composition needs a discrete change: navigation collapses, grid columns stack, controls move, or a component needs a different arrangement.
These approaches complement each other. A page can change from three columns to one at a breakpoint while each card's internal heading scales fluidly with clamp. The right tool is determined by whether the change is continuous in value or structural in layout.
References and further reading
Primary standards and documentation used to support this guide.
Frequently asked questions
Is clamp good for responsive typography?
It can be. It makes the font size vary continuously between bounds. Choose the scale intentionally and test actual copy at small and large widths, zoom levels and user font settings.
Should fluid typography use rem or px?
Rem-based bounds and intercepts are a strong default for text because they relate to the root font size. Whatever units you use, test text enlargement and browser zoom.
Should I use clamp on every heading?
No. Use it where continuous scaling improves the design. A small label may not benefit from fluid behavior, and some headings can use a fixed size or a breakpoint-based change.
How do I avoid oversized headings on desktop?
Set a maximum that matches your content width and type hierarchy, preview the longest heading and verify line breaks at intermediate widths. The maximum clamp bound is an explicit design decision.
Put the explanation to work.
Generate the value with live preview, then test it in the context of your actual design.