Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

1.5
Line Height Ratio
8px
Leading
24px
Computed Height
Typography Settings
16px
1.5
Quick Presets
Recommendations

CSS Output

Calculate and visualize optimal line heights for readable typography. See the baseline grid and fine-tune your text leading for better readability.

Terminology

  • Line Height: Total vertical space per line of text (unitless ratio or fixed value)
  • Leading: Extra space added between lines (line height - font size)
  • Baseline Grid: Horizontal lines showing where text sits

Recommendations

  • Body Text: 1.5-1.75 for optimal readability in paragraphs
  • Headings: 1.1-1.3 for large display text
  • UI Text: 1.25-1.4 for buttons, labels, navigation

Best Practices

  • Use unitless line-height values for scalability
  • Increase line height for longer line lengths
  • Decrease line height for larger font sizes
/* Body text - generous line height */
p {
  font-size: 16px;
  line-height: 1.6;
}

/* Headings - tighter line height */
h1 {
  font-size: 48px;
  line-height: 1.1;
}

/* Using calc for precise leading */
.text {
  font-size: 16px;
  line-height: calc(1em + 8px);
}