Uwarp
Line height is the distance from one baseline to the next. Change the size and the leading to see how the block opens up, then copy the CSS.
Font size (px)

Line height unit

Line height

Alignment

Computed line box: 24 px

font-size: 16px;
line-height: 1.5;
text-align: left;

Help Us Improve

—

(—)

CSS line height calculator

Set font size and line height, preview the text block, and copy CSS. Unitless, px, or percent — free, no sign-in.

What is a line height calculator?

A line height calculator turns a font size and a line-height value into the pixel height of each line, and previews the text. Line height (also called leading) is the distance from one baseline to the next. This page accepts a unitless multiplier, pixels, or a percentage, and can preview left, center, or justified alignment. It does not load custom font files.

Line height controls

Preview leading and copy the CSS.

  1. Font size: Set the type size in pixels from 10 to 72.

  2. Unitless, px, or percent: Switch the line-height unit and see the computed line box.

  3. Alignment: Preview left, center, or justified text with the same leading.

  4. Copy CSS: Copy font-size, line-height, and text-align together.

How to set line height

Turn a type size into a line box.

  1. Set the font size

    Match the size you plan to use in CSS.

  2. Pick a unit

    Unitless scales with the font. Pixels and percent are fixed to the number you set.

  3. Read the line box

    The pixel value is the used height of one line.

  4. Copy the CSS

    Paste font-size, line-height, and text-align into your stylesheet.

Tips for line height

Keep body text readable.
  • 01

    Prefer unitless for body text

    A multiplier stays proportional when the font size changes.

  • 02

    Tighten display type

    Large headings often look better below 1.2 than at a body setting of 1.5.

  • 03

    Check justification with real words

    Replace the sample with your paragraph before you trust the rag and the gaps.

When to check line height

Type decisions that depend on leading.

  • Body copy

    Open a paragraph until the lines separate without looking sparse.

  • Spec matching

    Convert a unitless leading into pixels for a fixed layout.

  • Justified paragraphs

    See how justification sits at the same line height as left-aligned text.

Why calculate line height here

A browser preview of CSS leading.

  • No sign-in

    Adjust the sliders and copy CSS. No account.

  • Free

    The preview and the copied CSS have no watermark.

  • Shows the used pixel size

    Unitless and percent values are converted to the line box in pixels.

Technical details

How the computed line box is derived.
Unitless
Line box = font size × line height. 16px × 1.5 = 24px.
Pixels
The line box is the pixel value you set, independent of font size.
Percent
Line box = font size × (percent / 100). 150% of 16px is 24px.
Preview
The sample uses the CSS font-size, line-height, and text-align you set. The browser’s default font is used.

Sources & References

References for the CSS line-height property and text spacing.
  • “The line-height CSS property sets the height of a line box in horizontal writing modes. It is commonly used to set the distance between lines of text.”
    — MDN Web Docs — line-height

    line-height: This calculator previews that property as a unitless number, a length in pixels, or a percentage of the font size. developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-height

  • “Line height (line spacing) to at least 1.5 times the font size.”
    — W3C — Understanding SC 1.4.12 Text Spacing

    Text spacing: The 1.5 starting point in the preview matches this text-spacing floor for body copy. Headings can be tighter. w3.org/WAI/WCAG22/Understanding/text-spacing.html

Frequently Asked Questions

Quick answers about this tool—open a question to read more.