CSS Clamp Generator (Fluid Typography)

About the CSS Clamp Generator (Fluid Typography)

Fluid sizes grow smoothly with the screen instead of jumping at breakpoints. Enter the size you want on a narrow screen and on a wide one, and the viewport widths where each should apply, and this generator writes the CSS clamp() that draws a straight line between them: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem) is 16 px up to a 360 px wide window, 24 px from 1,280 px, and in between in proportion. It works for font-size, line heights, padding, gaps and widths alike.

The page shows the value in rem and px, the slope and intercept it is made of, the size at common phone, tablet and desktop widths, a graph across viewports and a ready Tailwind class. It also checks the one thing fluid type can break: whether people can still zoom text to 200 %, as WCAG 2.2 success criterion 1.4.4 asks. Viewport units do not grow when a page is zoomed, so a steep slope can stop text from doubling; the check tells you the window widths where that happens. Several steps turns a whole list of sizes into CSS variables, a Tailwind v4 @theme, a Tailwind v3 config, SCSS or design tokens. Without a pass you see a free preview: the zoom check for your sizes, a watermarked graph and the first rows of the tables, with the clamp() values, the code and the exports hidden.

Common uses

• Fluid body and heading sizes that need no media queries.
• Spacing, gaps and section padding that grow with the layout.
• A design system’s size tokens for CSS variables, Tailwind or a token pipeline.
• Checking a fluid size you already use against zoom before an accessibility audit: enter its two sizes and the viewport widths where it starts and stops growing.

The formula

A clamp() for a fluid size is a straight line between two points, (narrow viewport, minimum size) and (wide viewport, maximum size), cut off at both sizes:

• slope = (maximum − minimum) ÷ (wide viewport − narrow viewport)
• intercept = minimum − narrow viewport × slope
• clamp(minimum, intercept + slope × 100vw, maximum)

clamp(MIN, VAL, MAX) is max(MIN, min(VAL, MAX)), so the smaller size always comes first, also for sizes that shrink on wider screens (the slope is then negative). This is the method the Utopia fluid calculators use. The page writes the bounds and the intercept in rem, so they follow the reader’s own default text size, and keeps four decimals, which is well under a hundredth of a pixel at any real size.

Zoom and WCAG 1.4.4

Success criterion 1.4.4 asks that text can be resized up to 200 % without assistive technology (W3C). Page zoom multiplies rem and px values, but not the vw part of a clamp(), so at zoom Z the text is drawn at clamp(Z × min, Z × intercept + slope × window width, Z × max). Following Maxwell Barvian’s analysis, the check asks whether, at each window width from 240 to 3,840 px, one of the zoom levels Chrome offers up to 500 % (110, 125, 150, 175, 200, 250, 300, 400 and 500 %, as listed in Chromium’s source) makes the text at least twice its normal size, and names the widths where none does. Barvian checks 500 % alone, which gives the same answer whenever the rem part of the clamp() is 0 or more; when it is negative, a lower level such as 200 % can draw the text larger than 500 % does, so every level is tried. A maximum of at most 2.5 times the minimum always passes.

The page also shows what happens when someone doubles the browser’s default text size instead of zooming: the rem parts double but the vw part does not, so fluid text grows less than twice, and a clamp() written in px does not grow at all. That does not fail the criterion when zoom works, but it is worth knowing for long-form text.

Choosing the viewport widths

Start where your layout starts and stops growing: about 320–375 px for small phones and the width of your content container, often 1,200–1,440 px, for desktops. Outside that range the size stays fixed, so a heading does not keep growing on an ultra-wide monitor. Keep the same two widths for every token of a system, so all sizes grow together.

Using the output

Paste the value into any CSS property that takes a length. Custom properties keep a scale in one place: --step-0: clamp(…) and font-size: var(--step-0). In Tailwind CSS v4, theme variables such as --text-step-0 become utilities (text-step-0); in Tailwind v3 the same sizes go under theme.extend.fontSize; an arbitrary value works in both, with spaces written as underscores. The design-token export follows the Design Tokens Community Group format: each fluid size is a group with its min and max dimensions and the clamp() kept under $extensions.

Limitations

• The zoom check follows the page-zoom model of the article it cites, whose author suggests trying his examples in Chrome or Firefox because Safari’s zoom can behave differently, so test your pages in Safari too.
• Success criterion 1.4.4 is about text: for spacing and widths the zoom check is only a guide.
• Sizes are worked out for a root font size of 16 px unless you change it; rem values then follow the reader’s own setting.
• In the free preview the zoom check for your sizes is shown in full, with a watermarked graph and the first rows of each table; the clamp() values, the code and the exports are hidden, and copying and downloads stay locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.