Line Height Calculator
Calculate balanced line-height values that improve readability across interfaces, articles, and printed layouts.
AK
appkiro.comThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Type a font size and the calculator returns line-height values for the common typographic ratios — tight, snug, normal, relaxed, and loose — plus a recommended value and a golden-ratio variant. A live preview shows three of the ratios applied to sample text so you can compare leading visually.
1.5 is a safe default for paragraph copy and matches WCAG 1.4.12 spacing guidance. The Recommended card uses this ratio. Drop to 1.375 for dense UI labels and rise to 1.625 for long-form articles.
It multiplies your font size by φ (1.618) for designers who like setting line-height to a golden interval relative to the font size. It is a stylistic choice, not an accessibility rule.
The preview shows three ratios — 1.2, 1.5, and 2 — applied to a pangram so you can compare leading at a glance. The font size in each preview is capped at 24px so the comparison stays visible on small screens.
The copy buttons emit pixel values like <code>24px</code>. To use a unitless ratio in CSS, take the multiplier shown next to each name (1.2, 1.5, etc.) and use that directly.