Fluid typography clamp() calculator
Generate a CSS clamp() value that scales font size smoothly between two viewport widths, in rem, with a live preview.
Good type adapts to the room.
/* 18px at 360px wide, growing to 32px at 1280px */ font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
How is the clamp() value calculated?
Fluid type draws a straight line between two points: your minimum size at the minimum viewport width and your maximum size at the maximum width. The slope is (max size − min size) ÷ (max width − min width). Multiplied by 100 it becomes the vw part. The intercept, min size − slope × min width, becomes the rem part.
clamp(min, preferred, max) then holds the size at the minimum below the small viewport and at the maximum above the large one. Keeping a rem term in the preferred value matters for accessibility: text still responds when a reader changes their browser’s default font size, which a pure vw value would ignore.
Use fluid sizes for headings and display text. Body text usually needs little or no scaling. To see how production sites handle it, inspect a heading with Font Inspector at two window widths and compare the computed sizes.
Does clamp() work in all browsers?+
Yes. clamp() has been supported in all major browsers since 2020.
Should I use px or rem inside clamp()?+
Use rem for the minimum, the maximum and the fixed part of the preferred value. That way the text respects the reader’s font size setting.
Can I use clamp() for spacing too?+
Yes. The same formula works for padding, margins and gaps. Enter your spacing values instead of font sizes.
See how real sites scale their headings.
Click any heading with Font Inspector to read its computed size in px, em and rem. Resize the window, click again, and you have both ends of their fluid scale.