Free tool

Font Clamp

Fluid clamp() for font size and its matching line height, across a whole type scale.

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.

Min size (px) on the smallest screen Max size (px) on the largest screen Line height × optional, 1.5 if left blank

font-size

line-height

Viewport range

The two widths the type scales between. Below the minimum and above the maximum the size is clamped flat.

Min viewport (px) Max viewport (px) Root font size (px)

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-6xl down 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.

Email Signature Generator

Make a professional email signature that holds its shape in Gmail, Outlook and Apple Mail. Fill in your details, pick a layout, copy it and paste it in.

QR Code Generator

Generate styled QR codes with custom colors, dot styles, and logos.

Schema Markup Generator

Build valid JSON-LD for a local business, service, FAQ, article or breadcrumb trail, with every property Google treats as required checked before you paste it.

Meta Tag Preview

See how your page will look as a Google result and as a Facebook, X or LinkedIn card, then copy the tags. Measured by pixel width, which is what actually gets cut.

Color Contrast Checker

Check any two colors against the WCAG contrast rules, get the nearest shade that passes, and convert between HEX, RGB and HSL.

Case Converter

Switch text between sentence case, title case, camelCase, snake_case, and more.

UTM Builder

Tag your campaign links so analytics can tell where the traffic came from. Build a whole campaign at once and take the set out as a CSV.

Image Resizer

Resize images to any width, height or preset size, crop to fit, and convert the format. Batch, and nothing is uploaded.

PDF Compressor

Shrink PDF file sizes right in your browser. Batch upload and ZIP download supported.

Merge PDF

Join several PDFs into one file, in the order you choose. Nothing is uploaded and no quality is lost.

Split PDF

Split a PDF into separate files, or pull out only the pages you need. Pick them from thumbnails or type ranges.

Favicon Generator

Generate a complete favicon package, download as ZIP with HTML snippet.

Image Converter

Convert images to WebP, PNG, or JPG. Batch upload and download as a ZIP.

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.