Neatbo.

Fluid type clamp generator

Calculate CSS clamp() for a font size that grows between two viewport widths, with rem bounds and an adjustable root-size assumption.

Browser-local processingInputFont sizes & viewportsOutputCSS
  1. 1Add input
  2. 2Adjust settings
  3. 3Get your result

Tool input and files are processed in this browser without being uploaded.

Your input

Inputs are kept temporarily in this tab when switching tools. Refreshing or closing clears them; large results may need to be regenerated.

⌘ / Ctrl + Enter to run

Set two font sizes and the viewport widths where the transition begins and ends. Pixel inputs are converted to rem using the assumed root size.

Ready: 16px at 375px grows to 32px at 1440px.
Preparing the tool…

Before you start

Enter the font sizes and viewport widths where scaling should start and end. Copy the CSS and check the computed sizes at both breakpoints. The rem conversion uses the root font size you provide.

How to use this tool

  1. Enter the small and large font sizes and their viewport widths. Adjust the assumed root font size if your design uses a value other than 16px.
  2. Generate CSS and compare the displayed sizes at the two endpoints and midpoint.
  3. Copy or download the CSS, then test it in your layout at narrow and wide widths and with browser zoom.

Supported inputs and limits

Uses a fixed root-font-size assumption to convert input pixels to rem; a changing site root size moves the effective breakpoints.

A rem/vw clamp does not by itself establish accessibility. Test browser zoom, text enlargement and reflow in your actual page.

Input stays in this browser. No account is needed.

Worked example

Example input

{"min":16,"max":32,"from":375,"to":1440,"root":16}
Example options
{"min":16,"max":32,"from":375,"to":1440,"root":16}

Example output

font-size: clamp(1rem, calc(0.64788732rem + 1.50234742vw), 2rem);

When something does not work

Check that the larger size and width exceed the smaller values. Use a root size between 8 and 32px, then verify the CSS in your page.

Frequently asked questions

What does the root font size change?

It converts your pixel sizes and the fluid offset to rem. At that assumed root size, the generated rule reaches your chosen sizes at the chosen widths. If your page changes its root font size, those exact breakpoint widths may shift.

Does this pass WCAG text resizing?

The result is a starting point, not a compliance result. The maximum is expressed in rem, but the vw term and your page layout can still limit text resizing. Test 200% zoom and reflow on the target page.

Can it calculate a scale with a changing root size?

No. It uses one root-size assumption. For a root size that varies with viewport width, calculate and test each range in your actual CSS.

Is the input sent to a server?

No. The calculation runs in this browser. Save the CSS you want before closing the tab.

Documentation & further reading

Color and CSS guide: contrast, gradients and responsive styles →Image and CSS checks: dimensions, color, contrast and layout →

Related tools