Analytics cookies
We use optional Google Analytics to understand which tools are useful and improve the site. Analytics stays off unless you accept. Privacy Policy
About this tool
This generator writes CSS clamp() values that scale smoothly between two viewport widths. Single value makes one value, such as a heading’s font size. Type scale makes a whole set of related sizes as CSS custom properties, from a base size and a ratio at each end of the range.
The preview shows the result at any width in between, with the computed size in px. Everything runs in your browser, and nothing is saved: reloading the page starts again from the defaults.
How CSS clamp() fluid sizing works
clamp(minimum, preferred, maximum) returns the preferred value, kept between the minimum and the maximum. In a fluid value, the preferred part adds a fixed length to an amount in vw, a percentage of the viewport width, so it changes at a steady rate as the viewport gets wider. This is the tool’s default:
font-size: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);1rem- The lower bound: 16 px, the smaller of the two sizes.
0.8571rem + 0.7143vw- The preferred value: a line that gives 16 px at a 320 px viewport and 24 px at 1440 px.
1.5rem- The upper bound: 24 px, the larger size.
clamp() doesn’t know your viewport widths. The tool builds them into the preferred value: it finds the straight line through your two points, with a slope of (end size − start size) ÷ (end viewport − start viewport), and writes it as a length plus the slope × 100 in vw. Outside the range, the bounds hold the size at your start and end values.
How to use the generator
- Choose Single value for one size, or Type scale for a complete set of sizes.
- Set the start and end viewport widths: the range where the size changes. 320 to 1440 px suits most sites.
- Enter the size at each end, or start from a preset. For a type scale, set a base size and ratio for each end and the steps to generate.
- Drag the viewport slider to check the size at any width in between.
- Pick rem or px output, then copy the CSS into your stylesheet.
Building a fluid type scale
A type scale multiplies a base size by a ratio for each step up and divides by it for each step down. A fluid scale has two versions of it: one at the start viewport and one at the end. A smaller ratio at the start keeps headings closer to body text on phones; a larger ratio at the end gives wide screens more contrast.
Each step is an ordinary fluid value between its two endpoint sizes, made by the same calculation as Single value. The tool writes the steps as custom properties on :root: --step-0 is the base size, --step-1 and up are larger, and --step--1 and down are smaller. Apply them to your own elements:
body { font-size: var(--step-0); }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
small { font-size: var(--step--1); }Type scale can also write the steps as theme.json for WordPress: a settings.typography.fontSizes fragment to merge into your theme’s file, with one preset per step. Each preset uses the same clamp() value as the CSS and sets "fluid": false. Negative steps get spelled-out slugs, such as step-minus-1.
To build or validate the rest of that file, use WordPress theme.json Generator. For spacing presets on the same fluid principle, use WordPress Spacing System Generator.
px vs rem
Viewport widths are always in px, because vw is measured against the viewport itself. Sizes can be entered in px or rem, and the CSS can use either.
rem is the usual choice for type. It is a multiple of the root font size, which browsers base on the user’s default font size unless a site sets it in px, so rem text can follow that preference on a real site. The root font size field only converts between px and rem; it doesn’t change your browser. If your site uses html { font-size: 62.5%; }, enter 10.
Browser zoom matters too. Zooming in enlarges rem and px lengths, but it also narrows the viewport in CSS pixels, so a vw length stays about the same size on screen. A rem part in the preferred value and rem bounds let fluid text keep growing when people zoom. Check your text at 200% zoom.
Frequently asked questions
What does CSS clamp() do?
clamp(minimum, preferred, maximum) returns the preferred value, but never less than the minimum or more than the maximum. When the preferred value includes vw, it changes with the viewport width, and the two bounds stop it at the sizes you chose.
How does fluid typography work?
Instead of jumping between fixed sizes at breakpoints, text changes size gradually as the viewport gets wider. A preferred value such as 0.8571rem + 0.7143vw grows at a steady rate, and clamp() holds it at the start and end sizes outside the viewport range you set.
Should I use px or rem?
For font sizes, rem is the usual choice. rem values follow the root font size, which browsers base on the user’s default font size unless a site overrides it, so text can respect that preference. px values stay the same whatever that setting is. Viewport widths are always px.
Does clamp() need media queries?
No. One clamp() value covers every width: it is fluid between your two viewport widths and fixed outside them. You can still combine it with media or container queries when a layout needs different sizes in different places.
Can font size get smaller on wider screens?
Yes. Enter a larger start size than end size and the tool writes a negative slope, such as 2.2143rem - 1.0714vw. The bounds are still written smaller value first, as clamp() requires, and the size shrinks from the start size to the end size as the viewport widens.
What is a fluid type scale?
A set of related font sizes where each step is the one below multiplied by a ratio. A fluid scale has a base size and ratio for each end of the viewport range, so the hierarchy can be gentler on phones and stronger on wide screens. Each step becomes a custom property, such as --step-2, that you apply to your own elements.
Why does the tool ask for a root font size?
rem values are multiples of the root font size, so the tool needs it to convert between px and rem. It doesn’t change anything in your browser. Use 16 unless your site sets a different root size, for example 10 if it uses html { font-size: 62.5% }.