--- title: "CSS clamp() Generator for Fluid Typography" description: "Free CSS clamp() generator. Create fluid font sizes and a fluid type scale with rem + vw, preview any width, and check WCAG 200% zoom." url: https://frontendhelpers.com/clamp-generator updated: 2026-10-12 --- # CSS clamp() generator Generate fluid font sizes that scale smoothly between two screen widths, check they still pass WCAG's 200% text-resize test, and export a whole fluid type scale as CSS custom properties. ## How to use this generator Start from the design, not the maths. Decide what size a piece of text should be on a small phone and on a typical laptop, and over which range of widths it should travel between the two. The defaults — 16px at 360px wide growing to 20px at 1240px — suit body copy. Below the starting width the size stays at its minimum, and above the end width it stays at its maximum; `clamp()` only interpolates in between. Drag the preview slider to see the text at any width, and use the table to sanity-check the in-between sizes. If a value lands somewhere awkward at a breakpoint you care about, nudge the viewport range rather than the sizes. ## Why the middle value mixes rem and vw A size written purely in `vw` is tied to the window and ignores the visitor's browser font-size setting — someone who has set their default text to 20px gets no benefit. Adding a `rem` term to the preferred value keeps a share of the size anchored to that setting, and expressing the minimum and maximum in `rem` means the limits move with it too. That's why the output looks like `clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem)` rather than a bare `vw` figure. ## What the zoom check is testing WCAG 2.2 success criterion 1.4.4, Resize Text, requires that text can be scaled to 200% without losing content. Browser zoom normally makes that easy, but fluid type complicates it: zooming shrinks the viewport in CSS pixels, so the `vw` part of your size gets smaller as the zoom level goes up. If the gap between your minimum and maximum is wide, zoom can stall well short of double. The check here simulates exactly that. For every window width from 320px to 3840px it tries each zoom level up to the browser maximum of 500% and asks whether any of them gets the text to at least twice its unzoomed size. A heading going from 16px to 64px fails — at a 1280px window, zoom only ever reaches 1.25× — while 32px to 72px passes. As a rule of thumb, keep the largest size within about 2.5 times the smallest, and the check will almost always pass. ## Using the type scale Paste the tokens into your stylesheet and apply them by role rather than by element: `h1 { font-size: var(--step-5); }`, `small { font-size: var(--step-n1); }`. Because every step is its own `clamp()`, nothing needs a media query. Pair the scale with a unitless `line-height` (around 1.5 for body text, 1.1–1.2 for large headings) so line spacing follows the font size, and cap body text measure at roughly 60–75 characters with `max-width: 65ch`. For a deeper walkthrough of the maths, worked examples and the common mistakes, read our guide to [fluid typography with clamp()](https://frontendhelpers.com/fluid-typography-clamp-guide). Browser support for `clamp()` is universal in current browsers — see [MDN's clamp() reference](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp). ## Frequently asked questions ### What does CSS clamp() do? clamp(MIN, PREFERRED, MAX) returns the preferred value, but never less than MIN or more than MAX. For fluid type, the preferred value grows with the viewport width, so text scales smoothly between a minimum and maximum size without media queries. ### Should I use px, rem or vw in clamp()? Use rem for the minimum and maximum, and a mix of rem and vw for the preferred value. Pure vw ignores the visitor's font-size setting and can stop browser zoom from reaching 200%; px limits don't follow the user's default text size. ### Does fluid typography pass WCAG? It can. WCAG 1.4.4 requires text to be resizable to 200%. Because zooming shrinks the viewport in CSS pixels, fluid sizes grow less than the zoom level. Keeping the maximum within about 2.5 times the minimum generally keeps 200% reachable; this generator checks your exact values. ### Can clamp() sizes shrink as the screen gets wider? Yes. Enter a larger size for the small screen than for the large one and the generator produces a negative vw slope, with the clamp() bounds kept in the right order. It is occasionally useful for oversized hero text on narrow cards. ## Related tools - [Fluid typography with clamp()](https://frontendhelpers.com/fluid-typography-clamp-guide): The maths, worked examples, zoom accessibility and the mistakes to avoid. - [PX to REM Converter](https://frontendhelpers.com/px-to-rem-converter): Convert any pixel value to rem for your root font size. - [WCAG Contrast Checker](https://frontendhelpers.com/contrast-checker): Check that your type passes AA and AAA contrast, too. --- This page is a free interactive tool. Use it in your browser at https://frontendhelpers.com/clamp-generator