ClampGenerator nviewsWEB LogoClampGenerator nviewsWEB Logo

You are using "line-height" clamp generator

Fluid leading (space between lines) for a single element, output in px/rem/em so it can scale independently across your viewport range. For body text, a unitless line-height that scales automatically with font-size is usually the safer default — this is aimed at headline or display text where you want more direct control.

Input Unit
Layout Property <px>
?
Fluid Range
Viewport Unit
?
Viewport Size <px>
?
Property Size <px>
?
Output
Output Unit

CSS clamp Generated Code to copy!

CSS
line-height: clamp(24px, calc(17.143px + 1.905vw), 40px);

Live line-height CSS Clamp() Preview

Drag the slider to simulate a viewport width between 360px and 1200px. The font-size below stays fixed — only line-height (the space between the wrapped lines) changes as you drag, so the leading effect isn't muddied by the text also growing or shrinking.

Simulated viewport width: 360px — 📱 Mobile (approx.)
?
📱 Mobile viewport: 360pxline-height: 24px

Fluid line-height keeps the space between lines proportional as your layout grows. Drag the slider to watch these lines drift apart or draw closer together.

Preview text
?

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

What is a CSS line-height Clamp()?

A line-height clamp() lets the space between lines of text scale fluidly between a minimum and maximumline-heightbased on the viewport size, instead of a single fixed value or a media-query switch. This tool generates that value for one element at a time — a headline, hero title, or other display text where the leading itself should change shape across your layout's range.

Example:

line-height: clamp(1.75rem, calc(1.32rem + 2.13vw), 2.5rem);

In this example the leading never shrinks below 1.75rem (28px) or grows past 2.5rem (40px), scaling smoothly in between. This tool is part of the free ClampGeneratortoolkit for building fluid, responsive typography and layouts without media queries.

Is clamp() Actually Good for line-height?

Mechanically, yes — clamp() is just a CSS value, and line-height accepts it like any other property. The catch is that a clamp() needs a length (px, rem, or em) to mix with the viewport-width term in its middle, calc()-based argument. That means a clamped line-height gives up the biggest advantage of the usual unitless value: automatically staying proportional to font-size with nothing to keep in sync.

For paragraph and body copy, a plain unitless line-height (like 1.5) is still the better default — it scales for free whenever font-size changes, whether from a fluid clamp() elsewhere or a reader's own zoom level. A length-based, clamped line-height earns its place on a narrower case: a single headline or display element where you want to shape the leading independently of font-size across your viewport range, rather than have it simply follow along.

Common Use Cases for a line-height Clamp()

  • ✅ A hero headline or display title where tighter leading at large sizes reads better than a fixed ratio
  • ✅ Fine-tuning the leading on an element whose font-size is already clamped separately, when a unitless ratio doesn't give quite the shape you want
  • ✅ CSS variables or design tokens for a component library, sized independently per component
  • 🚫 Body copy or paragraph text — use a unitless line-height there instead

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. The font-size in the preview stays fixed the whole time; only line-height changes as you drag, so the effect on the gap between lines is never muddied by the text also growing or shrinking. The default sample is two sentences long so it wraps onto multiple lines — edit the preview text field to try your own headline or copy instead.

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 — line-height: clamp(...);
  • CSS Variable — --hero-line-height: clamp(...);
  • SCSS — $hero-line-height: clamp(...);
  • Tailwind — 'hero-line-height': '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 line-height Clamp() Carefully

  1. Default to unitless line-height for body text. A ratio like 1.5scales automatically with font-size — no clamp(), no separate viewport range to maintain, nothing to fall out of sync.
  2. Reach for this tool per element, not site-wide. It's built for one headline or display element at a time, the same scope as theTypography Clamp Generator.
  3. Use rem for the min and max bounds, not px, for the same accessibility reason as font-size — it respects a reader's browser font-size preference.
  4. Check it against the font-size at both extremes. Because a clamped line-height is an absolute length, it's easy for it to end up too tight relative to font-size at one end of your range and too loose at the other — drag the preview slider all the way across, not just the middle.
  5. Test your extremes, not just the middle. It's easy to check the preview at a comfortable laptop width and miss that the leading is too cramped on a real phone, or too loose on an ultrawide monitor.

Line-Height Clamp Generator FAQs

Is clamp() actually a good fit for line-height?

It works, but with a tradeoff worth knowing: clamp() needs a length unit (px, rem, or em) to mix with the viewport-width term, so a clamped line-height gives up the usual best practice of a unitless value that scales automatically with font-size. That makes it best suited to a single headline or display element where you want direct control over the leading at each viewport size — not a blanket replacement for unitless line-height on body text.

Is there a min-line-height or max-line-height property in CSS?

No — line-height is the only property, the same way font-size has no min/max variant. clamp() is how you give it a floor and a ceiling in one declaration: line-height: clamp(minValue, preferredValue, maxValue).

What unit should I use for the min and max values?

rem is the safer default for the same reason it is for font-size — it respects a reader's browser-level font size preference. px works too if you need pixel-exact leading. Either way, remember the resulting value is an absolute length, not a ratio, so it will not automatically stay proportional if the element's own font-size changes independently.

Should I use this for body text?

Generally no. For paragraphs and body copy, a plain unitless line-height (e.g. 1.5) is still the better choice — it scales automatically with font-size, including with user zoom or a fluid font-size clamp() on the same element, with nothing to keep in sync. This tool is aimed at headlines, hero titles, or display text where you want the leading itself to change shape across the viewport range, independent of font-size.

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 wrapped text?

Real text, at a fixed font-size, wrapped onto multiple lines — the font-size never changes, so the only thing moving as you drag the slider is the actual space between lines. Edit the preview text field to test your own copy instead of the default sample.

Is this line-height clamp generator free to use?

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

Guides