Typography Clamp Generator

You are using "font-size" clamp generator

Fluid font size for a single heading, paragraph, or text element. Need a full H1–H6 typescale with ratios and font-family support instead? Use the dedicated Font Size & Typescale Clamp Generator.

Input Unit

pxrem

Layout Property <px>

Fluid Range

Viewport Unit

Viewport Size <px>

min

max

Property Size <px>

min

max

Output

Output Unit

pxremem

CSS clamp Generated Code to copy!

CSS
font-size: clamp(16px, calc(9.143px + 1.905vw), 32px);

Live font-size CSS Clamp() Preview

Drag the slider to simulate a viewport width between 360px and 1200px. The sample text below renders at the exact resulting font-size — not scaled down like the width/height previews, since legibility at the real size is the point.

Simulated viewport width: 360px — 📱 Mobile (approx.)

📱 Mobile viewport: 360pxfont-size: 16px

The quick brown fox jumps over the lazy dog

Preview text

Just need a plain clamp() value without picking a property? Try the simpler ClampCalculator.

What is a CSS Typography Clamp()?

A typography clamp() lets a piece of text scale fluidly between a minimum and maximumfont-sizebased on the viewport size, instead of jumping between fixed sizes at media query breakpoints. This tool generates that value for one element at a time — a headline, a hero title, a standalone paragraph — without the multi-element setup a full type scale needs.

Example:

font-size: clamp(1rem, calc(0.727rem + 1.364vw), 1.5rem);

In this example the text never shrinks below 1rem (16px) or grows past 1.5rem (24px), scaling smoothly in between. This tool is part of the free ClampGenerator toolkit for building fluid, responsive typography and layouts without media queries.

Unlike width or height, CSS doesn't have separate min-font-sizeor max-font-size properties — font-size is the only one, and clamp() is how you give a piece of type a floor and a ceiling at the same time. That's exactly what this tool generates: one clean font-size declaration with your chosen minimum, viewport-relative scaling, and maximum baked in.

Just set your minimum and maximum font size, your minimum and maximum viewport width, and copy the result.

Common Use Cases for a Typography Clamp()

✅ A single heading, hero title, or standalone text element that needs fluid sizing
✅ Prototyping a typeface size before committing to a full typescale system
✅ Quick one-off typography fixes where a whole scale would be overkill
✅ CSS variables or design tokens for a component library, sized independently per component

Live Preview With Your Own Text

A live preview appears below the inputs with a slider that simulates a viewport width across your configured min/max range — no need to actually resize your browser. Unlike the width or height previews, the sample text renders at its true, unscaled font-size, since legibility at the real size is what matters for type. Edit the preview text field to test with your own headline or copy instead of the default placeholder sentence.

Export as CSS Variable, SCSS, or Tailwind

The generated code isn't limited to a plain CSS declaration. Choose an output format above the code box:

CSS — font-size: clamp(...);
CSS Variable — --hero-font-size: clamp(...);
SCSS — $hero-font-size: clamp(...);
Tailwind — 'hero-font-size': 'clamp(...)', ready to paste into tailwind.config.js

Edit the name field to control the variable or config key used — no need to hand-edit the copied snippet afterward.

Using a Typography Clamp() Carefully

Use rem for the min and max bounds, not px. A reader who has bumped their browser's default font size for readability expects your type to respect that. Fixedpx bounds ignore it; rem bounds scale with it.
Don't go below 16px (1rem) for body text. Smaller triggers unwanted auto-zoom on iOS Safari when the text sits inside a focused form input, and hurts readability generally. Headings have more room since size alone still communicates hierarchy even when smaller.
Scale line-height alongside font-size, or use a unitless value. A fixed pixel line-height that looked fine at your minimum size can feel cramped or overly loose at your maximum — a unitless line-height (e.g. 1.4) scales proportionally for free.
Test your extremes, not just the middle. It's easy to check the preview at a comfortable laptop width and miss that the minimum is too small on a real phone, or the maximum overflows a fixed-width container on an ultrawide monitor.
One element rarely lives alone. If this heading needs to stay proportioned against body text, small text, or other headings as the viewport changes, a shared typescale (same viewport range, consistent ratio) keeps that relationship intact — see theTypescale Clamp Generator.

Typography Clamp Generator FAQs

Is this the same as the Typescale Clamp Generator?

No. This tool generates one clamp() value for a single typographic element — no H1-H6 hierarchy, scale ratios, or font-family settings. If you need a full responsive type system across headings, body, and code text, use the dedicated Fluid Typescale Clamp Generator instead.

Is there a min-font-size or max-font-size property in CSS?

No — unlike width or height, CSS has no min-font-size or max-font-size property. clamp() is exactly how you get that min/preferred/max behavior for type: font-size: clamp(minSize, preferredValue, maxSize) does the job of a floor and a ceiling in one declaration.

What unit should I use for the min and max values in a typography clamp()?

rem is generally the safer choice for the min and max bounds — it scales if the reader has changed their browser default font size for accessibility, where a fixed px value would not. The viewport-relative middle term (vw) can stay as-is either way.

Can I export this as a CSS variable, SCSS, or Tailwind?

Yes. Switch the output format above the code box to CSS Variable, SCSS, or Tailwind, and edit the name field to control the variable or config key used in the generated snippet.

Does the live preview show real text or a placeholder box?

Real text. Type your own sample copy into the preview text field and drag the viewport slider — the sample renders at the exact resulting font-size at every point in your configured range, not a scaled-down stand-in.

Is this typography clamp generator free to use?

Yes — completely free, with no login, signup, or paywall on any export format.

How small should my minimum font-size be?

For body text, most accessibility guidance recommends staying at 16px (1rem) or larger at the smallest viewport — smaller text can trigger unwanted auto-zoom on mobile Safari when it's the target of a focused input, and hurts readability generally. Headings can safely go smaller than body text since size alone still signals hierarchy.