CalculateY CalculateY

Line Height Calculator

CSS line-height controls the vertical spacing between lines of text, calculated as Line Height (px) = Font Size x Ratio, where the recommended ratio for body text is between 1.4 and 1.6. For a 16px font with a line-height ratio of 1.5, the computed line height is 24px, leaving 8px of spacing (leading) between lines. Enter a font size and line-height value below to convert between px, em, and unitless ratio instantly.

Quick Answer

For a 16px font with a line-height of 1.5, the computed height is 24px. The leading (spacing above and below the text) is 8px total, split equally as 4px above and 4px below each line.

Typography Settings

Common Examples

Input Result
16px font, 24px line height Ratio 1.5, 1.5em, 8px spacing
16px font, ratio 1.5 24px, 1.5em
20px font, 1.6em line height 32px, ratio 1.6
14px font, 22px line height Ratio 1.5714, 1.5714em
18px font, ratio 1.4 25.2px, 1.4em, 7.2px spacing

How It Works

The CSS line-height property sets the height of a line box, which determines the vertical distance between baselines of adjacent lines. It can be specified in several ways:

Unitless number (recommended): line-height: 1.5 means 1.5 times the font size

Pixel value: line-height: 24px sets an absolute line height

Em value: line-height: 1.5em is equivalent to a unitless 1.5 for that element, but behaves differently when inherited

Conversion formulas

  • To px: Line Height (px) = Font Size (px) x Ratio
  • To ratio: Ratio = Line Height (px) / Font Size (px)
  • Leading (spacing): Leading = Line Height (px) - Font Size (px)

The leading is split equally above and below the text. For a 16px font at line-height 1.5 (24px), the 8px of leading places 4px above and 4px below each line of text.

A unitless value like line-height: 1.5 is inherited as a ratio, meaning child elements recalculate the line height based on their own font size. A value like line-height: 1.5em or line-height: 24px is inherited as a computed value, so child elements with a different font size may have incorrect spacing.

For example, with a parent at font-size: 16px; line-height: 1.5em (computed 24px), a child at font-size: 32px inherits the computed 24px, creating overlapping text. With line-height: 1.5 (unitless), the child computes 32 x 1.5 = 48px.

  • Body text: 1.4 to 1.6 (higher for longer lines, lower for shorter)
  • Headings: 1.1 to 1.3
  • Buttons and labels: 1.0 to 1.2
  • Small text: 1.5 to 1.8 (more spacing improves readability)

Worked Example

For a 20px font with a line-height of 32px: Ratio = 32 / 20 = 1.6. Em = 1.6em. Leading = 32 - 20 = 12px (6px above, 6px below each line). CSS: font-size: 20px; line-height: 1.6;

Related Calculators

PX to REM Converter

Convert between pixel (px) and rem CSS units based on any root font size.

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing between two viewport widths.

Frequently Asked Questions

What is a good line-height for body text?
A line-height between 1.4 and 1.6 works well for most body text. The optimal value depends on font size, line length, and the typeface. Longer lines of text benefit from more line-height (1.5 to 1.6) to help the reader track from one line to the next. Short lines can use tighter spacing (1.3 to 1.5).
What is the difference between unitless and em line-height?
A unitless line-height like 1.5 is inherited as a multiplier. Each child element recalculates line height based on its own font size. An em-based line-height like 1.5em is computed to a pixel value and that fixed value is inherited. Unitless values are recommended because they adapt correctly to different font sizes in child elements.
What is leading in typography?
Leading (pronounced "ledding") is the vertical space between lines of text. In CSS, leading equals the line-height minus the font size. This space is split equally, with half above and half below each line. The term originates from strips of lead placed between lines of metal type in traditional printing.
Should headings have a different line-height than body text?
Yes. Headings typically look better with tighter line-height (1.1 to 1.3) because their larger font size already creates sufficient vertical space. Using body-text line-height (1.5) on large headings can create excessive gaps between lines, especially in multi-line headings.
How does line-height affect accessibility?
The WCAG 2.1 guidelines (Level AAA, criterion 1.4.12) recommend a minimum line-height of 1.5 for body text. Adequate line-height improves readability for people with cognitive disabilities, dyslexia, and low vision. Avoid very tight line-height (below 1.2) for any text that users need to read continuously.