Line Height Calculator

Calculate optimal line height for readable typography using golden ratio and other standard ratios.

Font Size Input

Browser default is typically 16px

Line Height Ratios

Live Preview

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!

Font Size: 16px|Line Height: px (1.618)|Leading: 0px

CSS Output

/* Line Height Calculator Output */
font-size: 16px;
line-height: 1.618; /* unitless - recommended */

/* Alternative formats */
line-height: 25.89px; /* pixel value */
line-height: 1.618rem; /* rem value */
line-height: 162%; /* percentage */

Best Practices

  • -Body text: Use 1.5-1.75 for optimal readability
  • -Headings: Use 1.1-1.3 for tighter spacing
  • -Accessibility: WCAG recommends at least 1.5 for body text
  • -Mobile: Consider slightly larger line heights on small screens

Line Height Units

  • -Unitless (1.5): Recommended - scales with font size
  • -Pixels (24px): Fixed - doesn't scale with font
  • -Percentage (150%): Relative - can cause inheritance issues
  • -Em/Rem: Relative units - good for responsive design

How Line Height is Calculated

Basic Formula

line-height = font-size x ratio

Example: 16px x 1.618 = 25.89px

Golden Ratio

phi = 1.6180339887...

Creates visually harmonious proportions

Leading

leading = line-height - font-size

Extra space distributed above and below text