Free tool
Font Clamp
This free font clamp calculator gives you two formulas per token, not one: the font size and the line height that goes with it, linked by a ratio you set yourself. Line height is not a single number for a whole scale. A heading wants tighter leading than body copy, and the two have to scale at different rates or your headings crowd while your paragraphs drift apart.
Every size grows smoothly between a small screen and a large one instead of jumping at a breakpoint. Start with the Clamp calculator at the top if you only want one value: two sizes in, two formulas out, copy and go. Use the table below to build a whole named scale and export it as CSS custom properties.
Everything runs in your browser. Your scale is remembered in your own browser storage only, nothing is uploaded, and there is no sign-up.
Clamp calculator
Type two font sizes. Copy the CSS.
Viewport range
The two widths the type scales between. Below the minimum and above the maximum the size is clamped flat.
Type scale
These are the presets we use on client sites. Start from one, then change anything: enter a ratio to derive both line heights from the font sizes, or type the line heights directly.
| Label | Min font | Max font | × Ratio | Min LH | Max LH | Font clamp | Line-height clamp |
|---|
Preview
Each line is rendered at its own clamp() value, so resizing this page moves them exactly as they will move on yours.
CSS variables
Paste this into your stylesheet, then reference the variables instead of hard-coding sizes.
How to build your fluid type scale
One field if you want one value, five steps if you want a whole scale. Nothing to install either way.
- Only want one value? Use the Clamp calculator at the top. Type a smallest and a largest size, add a line-height multiplier if you want the matching leading, and copy. The rest of this is for building a whole scale.
- Set your viewport range. The minimum and maximum widths your type scales between. It starts at 330px to 1440px. Below the minimum and above the maximum the size holds flat.
- Pick a starting set. All three are presets we use on client sites. It opens on the 3-token starter, H1, H2 and body, which is enough to see how a scale behaves. The scale we use is the recommended one: 11 tokens from
--fs-6xldown to--fs-xs, with a 1.4 line-height ratio on every body size. Headings only gives you 7. All three are starting points, not rules. - Set the smallest and largest size for each token, in pixels. The calculator converts to rem against your root font size, which starts at 16px.
- Set your line heights. Type a ratio to derive both from the font sizes, or type the two line heights directly. Typing them directly releases the ratio for that row.
- Copy the CSS, or download it as
fluid-type-scale.css. You get a--fs-variable and a matching--lh-variable for every token.
More free tools
Built for our own work, free for yours. No sign-up on any of them.
QR Code Generator
Email Signature Generator
Color Contrast Checker
Schema Markup Generator
Meta Tag Preview
Image Converter
Case Converter
Favicon Generator
UTM Builder
Image Resizer
PDF Compressor
Merge PDF
Split PDF
What people use fluid type scales for
Anywhere the same text has to work on a phone and on a wide monitor without someone maintaining a separate size for each.
Design systems
Ship one set of type tokens that every page inherits, instead of a font-size declared again in each component.
Elementor and WordPress themes
Drop the variables into a kit or a child theme and reference them from a widget, so a scale change is one edit.
Handing off from Figma
Turn the two artboard widths a designer worked at into the sizes in between, which is the part the file does not tell you.
Landing pages
Headlines that fill a desktop hero and still fit a phone, without a stack of breakpoint overrides.
Long-form articles
Hold body text and line height in proportion across widths, which is what keeps line length readable.
Dashboards and dense UI
Small text is where fluid sizing goes wrong fastest. Clamping the floor stops labels shrinking past legibility.
Frequently asked questions
What clamp() is doing, how to choose your numbers, and what happens to your work.
What does clamp() actually do?
It takes three values: a floor, a preferred value that scales with the viewport, and a ceiling. The browser uses the middle one until it would fall below the floor or rise above the ceiling. That is why fluid type needs no breakpoints: the size is a straight line between your two widths, and it is clamped flat outside them.
Why is the middle value written as a rem plus a vw?
Because a straight line needs an intercept and a slope. The rem part is where the line starts and the vw part is how steeply it climbs, so the size hits your minimum exactly at your minimum viewport and your maximum exactly at your maximum. The calculator solves both from the four numbers you enter.
Does my work get uploaded anywhere?
No. The calculator runs entirely in your browser and your scale is saved only in your own browser storage, on your machine. The page does count how many times the tool is used, as a plain number with nothing attached to it and no way to tie it to you.
What should I set the viewport range to?
The minimum is the narrowest screen you actually support, commonly 320px to 375px. The maximum is the width your design was drawn at, commonly 1440px or 1920px. It starts at 330px to 1440px. A wider range makes the type climb more gently, a narrower one makes it climb faster.
What is the ratio column for?
It sets both line heights from the font sizes in that row, so a ratio of 1.4 gives a line height 1.4 times each size. It is a shortcut, not a lock: type a line height in directly and that row releases the ratio and keeps your number. A row with no ratio keeps the line heights you typed when you change its font sizes.
Why did one of my rows come out without a clamp()?
Because its minimum and maximum are the same number. There is nothing to scale between, so the calculator writes a single rem value instead of a clamp() that could never move. That is deliberate and it is the correct CSS.
Should I use px or rem in the output?
The output is in rem, converted against the root font size you set. That is what makes the scale respect a visitor who has raised their default text size in the browser, which a scale written in px ignores. Enter your sizes in pixels, because that is what a design file gives you, and let the calculator convert.
Can I add or remove tokens?
Yes. Add token appends a row, and the cross at the end of a row removes it. You can edit each label, but the CSS variable names are set by the tool: a new row gets the first free name such as --fs-new-1, and its line height variable follows as --lh-new-1.
Want something like this on your own site?
Free tools are a small part of what we do. The rest is websites and digital products for businesses serious about growth, whether you are launching, scaling or transforming.