CSS Clamp() Fluid Typography Generator

Fluid typography with one line of CSS

Responsive text used to mean a series of media queries: 16px on phones, 18px on tablets, 20px on desktops, with sudden jumps between them. CSS clamp() replaces all of that with a single value that grows smoothly with the screen width and stops at a minimum and maximum you choose. This generator works out the maths, so you only decide how big things should be on small and large screens.

How to use the generator

1. Enter the minimum size you want on small screens and the maximum size for large screens.
2. Enter the viewport widths where each size should apply — for example 375px (a phone) and 1280px (a laptop).
3. Choose rem or px output; rem is recommended so text still respects the user’s browser font size.
4. Pick the CSS property — font size, padding, margin, gap and more.
5. Drag the preview slider to see the size at any screen width, then copy the declaration.

How the clamp() value is calculated

clamp(MIN, PREFERRED, MAX) returns the preferred value, limited to the range between MIN and MAX. For fluid sizing, the preferred value is a straight line that passes through your two points. The slope is the change in size divided by the change in viewport width; multiplied by 100 it becomes the vw part. The starting offset — the size the line would have at a zero-width viewport — becomes the rem part.

For example, going from 16px at 375px to 24px at 1280px gives a slope of 8 ÷ 905 ≈ 0.884vw and an offset of about 12.69px, or 0.7928rem. The result is clamp(1rem, 0.7928rem + 0.884vw, 1.5rem): exactly 16px on a 375px screen, exactly 24px at 1280px, and a smooth curve in between.

Why mix rem and vw?

Pure viewport units (font-size: 2vw) ignore the user’s text size setting and can make text tiny on phones or huge on wide monitors. Adding a rem component keeps part of the size tied to the user’s preference, and the rem-based minimum and maximum guarantee readable limits. This combination is the recommended approach for accessible fluid type.

Building a fluid type scale

• Generate a clamp() value for each heading level and body text, using the same two viewport widths.
• Store them as CSS custom properties, such as --step-0 for body text and --step-3 for h2.
• Let larger headings grow more than body text: headings benefit most from extra space on big screens.
• Use the same technique for section padding and gaps so spacing scales with type.

Need a quick unit conversion? Use the PX to REM Converter. For visual polish, try the CSS Gradient & Box Shadow Generator, and size media correctly with the Aspect Ratio Calculator.