Line Height Calculator — CSS Leading Ratio Tool

Tool interface

line-height (multiplier) —
CSS —

CSS line-height — from design leading to ratio

Why line-height matters

Line-height (leading) is the vertical rhythm between lines of text. Too tight and lines collide; too loose and readers lose the next line. Body copy often lands around 1.5–1.7 unitless; headings around 1.2–1.3.

Unitless vs px

Prefer a unitless multiplier (line-height: 1.5) so spacing scales when font-size changes. Fixed px is fine for single-size UI chips, but fights fluid type and inheritance.

ratio = desired line spacing (px) ÷ font size (px)

Example: 24px leading ÷ 16px font → line-height: 1.5

Tailwind leading-* handoffs

Design tools often specify leading in px while Tailwind uses leading-6, leading-relaxed, etc. Convert the px pair to a ratio first, then pick the closest utility — or set an arbitrary value like leading-[1.55]. This calculator removes the guesswork between Figma and CSS.

Quick workflow

  1. Enter font size (px) from the design spec
  2. Enter desired line spacing / leading (px)
  3. Copy the unitless ratio into CSS or Tailwind