Fluid Line Height With clamp(): When to Bother and the Legal Way to Do It

My line-height habit used to be simple: set it once, unitless, and never think about it again. Body text at 1.6, headings at 1.15, done. Then fluid font-size entered the picture, and with it the question of fluid line height with CSS clamp: should line-height scale too?

The honest answer is that most of the time, it does not need to. A unitless line-height is a ratio. When your clamp() grows an h1 from 2rem to 3.5rem, a fixed 1.1 ratio stretches with it automatically. The lines stay proportionally tight at every size. That is the beauty of unitless values: they inherit the scaling for free. If that sentence is all you needed, you can stop reading and go set line-height: 1.5 on your paragraphs. I mean that.

But there are two cases where a fixed ratio visibly breaks, and both involve display headings. A hero headline at 1.15 looks crisp on desktop and cramped on a phone, where the same words wrap onto four lines and the leading feels glued shut. A pull-quote sized fluidly between 1.25rem and 2rem can feel airy on mobile and dense on desktop, because line length changes how tightness reads. In those cases the ratio itself should drift with the viewport, a little looser on small screens, a little tighter on large ones.

The formula that parses, and the one that does not

Here is where people, including me the first time, write something that silently fails. This does not work:

Unitless numbers and viewport units are different types in calc, and you cannot add them. Browsers throw the whole declaration out. The legal version uses em, which is a length and plays fine with vw:

Em on line-height computes against the element's own font-size, so it behaves like a ratio with a fluid adjustment. The worked math, for a heading that fluidly sits between 1.5rem and 3rem. At a 375px phone with the font at its 1.5rem (24px) minimum: 1.02em gives 24.5px, plus 0.55vw (2.06px) is 26.6px, a ratio of 1.11, clamped up to the 1.15em floor, so 27.6px. At a 1440px desktop with the font at 3rem (48px): 1.02em is 49px, plus 7.9px, is 56.9px, a ratio of 1.19. The ratio tightened as the type grew, which is exactly the drift you want for display type, and the 1.15 floor keeps phone lines from gluing shut.

I keep this for display headings only. Body text gets a fixed 1.5 to 1.65 and I never touch it again. Captions and labels stay put too. The moment you start fluid-tuning every line-height on the page, you have built yourself a maintenance problem that no reader will ever notice you solved.

Fluid line height with CSS clamp, or two unitless values

The alternative I actually use most: two unitless values and one media query. 1.35 below 640px, 1.15 above. It is not smooth between them, and nobody has ever noticed. Type jumps of a few percent at a breakpoint are invisible in practice, because readers do not watch line-height cross a breakpoint the way they watch layout do it.

This is the same trade I make with the clamp() preferred value for font-size. Smooth scaling is worth having only where a reader can feel the difference. The print compositors had a version of this rule centuries ago: leading tightens as point size grows, because large type needs less help staying readable. They set it by eye per size, not by formula. Our per-size media query is the same instinct with worse kerning.

So the decision rule I would hand you: fixed unitless ratio everywhere, fluid line-height only for display type that wraps badly at small sizes, and the em-based clamp when you do it. Run the two values through the calculator on this site alongside your font-size clamp, and check the ratio at both ends the way I did above. If the ratio never leaves the sane band of about 1.1 to 1.7, the declaration is doing its job.

One thread I am watching: container query length units may eventually move this whole question off the viewport. A cqi-based line-height would tighten as the container shrinks rather than the window, which is arguably the correct input. It is not a settled pattern yet, so I am not recommending it, but the first time I see it ship in a design system I will not be surprised.