Line Height Calculator — How to Use
Enter your font size (px) and select the content type to get the optimal line-height ratio and pixel value. Recommended ranges: body text 1.5–1.7, headings 1.1–1.3, UI elements 1.0–1.2, code blocks 1.4–1.6.
A line-height that is too tight makes text feel cramped and hard to read. Too loose, and paragraphs feel disconnected. For 16px body text, line-height: 1.6 (≈ 25.6px) is the most widely used setting.
In CSS, always prefer unitless values (e.g., line-height: 1.6) over pixel values. Unitless values scale proportionally when inherited by child elements, preventing unintended sizing issues.
Frequently Asked Questions
In CSS, unitless numbers (e.g., line-height: 1.6) are recommended. They scale correctly when inherited by child elements with different font sizes.
Narrow screens cause more frequent line breaks, so 1.5–1.6 for body text is typically fine on mobile, while desktop may benefit from 1.6–1.7.
Large font sizes already produce visible spacing between lines. A lower ratio (1.1–1.3) keeps headings visually grouped as a single unit rather than appearing separated.