CSS Clamp

Line height clamp() generator

Line spacing that opens up as lines get longer.

line-height
Screen width
1152px

Actions

Clamp sizes

The smallest and largest size, for padding, margin or font size.

rem
rem

Viewport settings

The screen widths where the value starts and stops growing.

rem
rem

The clamped value will be between 1.5rem and 2rem, applied linearly between viewports of 24rem and 120rem.

Fluid line height with clamp()

The preview sets a fixed font size of 1.25rem and applies the clamp() value to its line height. At 1.5rem to 2rem, that is a ratio of 1.2 on a phone and 1.6 on a wide screen. Drag the screen width to see the paragraph breathe as the lines get longer.

With the default range of 384px to 1920px, the value is clamp(1.5rem, 1.375rem + 0.521vw, 2rem).

When to use it

  • Long-form text whose line length changes a lot between phone and desktop.
  • Large headings that need tight spacing on small screens.
  • Keep a unitless line height for everything else. It is simpler and scales with the font size on its own.
  • Limit the line length with max-width: 70ch too. It does more for readability than any line height.

More fluid typography

Pair this with a fluid font size from the font size generator, or read the fluid typography accessibility guide before you ship.

Frequently asked questions

Can I use clamp() for line-height?

Yes. line-height accepts lengths, so a clamp() value like clamp(1.5rem, 1.375rem + 0.521vw, 2rem) works in every current browser. The line height then grows smoothly with the screen width.

Should line height be unitless or a length?

A unitless line height like 1.5 scales with the font size and is inherited as a ratio, which is the safe default. A clamp() length gives you control over the spacing per screen width, but it is inherited as a fixed value, so set it on the elements that need it rather than on the body of a page with mixed font sizes.

Why would line height change with the screen width?

Line length changes with the screen. Long lines on a wide screen need more space between them so the eye can find the start of the next line, while short lines on a phone read well with tighter spacing.

What if my font size is fluid too?

If only the font size changes, a unitless line height is usually enough because it follows the font size. Use a fluid line height when you want the ratio itself to change, for example 1.3 on phones and 1.6 on desktops.