Line Spacing Calculator
Calculate optimal line height/leading from font size for readability. Enter values for instant results with step-by-step formulas.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Line Height = Font Size x Ratio | Leading = Line Height - Font Size
Line height is the total distance from one baseline to the next, calculated by multiplying the font size by the line height ratio (typically 1.4-1.6 for body text). Leading is the extra space between lines, calculated as line height minus font size, distributed equally above and below each line as half-leading.
Worked Examples
Example 1: Web Body Text Line Spacing
Problem:Calculate optimal line spacing for 16px body text with a 1.5 ratio for a blog layout with 65-character lines.
Solution:Font size: 16px\nLine height ratio: 1.5\nLine height: 16 x 1.5 = 24px\nLeading: 24 - 16 = 8px (4px above, 4px below)\nParagraph spacing: 24 x 1.0 = 24px\nCSS: font-size: 16px; line-height: 1.5;\nBaseline grid unit: 24px\nLine length: 65 characters (optimal range 45-75)
Result:Line height: 24px | Leading: 8px | Baseline unit: 24px | Readability: Excellent
Example 2: Print Design Leading Calculation
Problem:Calculate leading for a 12pt font in a print layout with 1.3 ratio.
Solution:Font size: 12pt (16px at 96 DPI)\nLine height ratio: 1.3\nLine height: 12 x 1.3 = 15.6pt (20.8px)\nLeading: 15.6 - 12 = 3.6pt (4.8px)\nHalf leading: 1.8pt above and below each line\nParagraph spacing: 15.6pt (1 baseline unit)
Result:Line height: 15.6pt (20.8px) | Leading: 3.6pt | Good for compact print layouts
Frequently Asked Questions
What is line spacing and how does it differ from leading?
Line spacing (also called line height in CSS) is the total vertical distance from one baseline to the next, including the font size and the extra space above and below each line. Leading (pronounced 'ledding') is the extra space between lines, calculated as line height minus font size. For example, a 16px font with 24px line height has 8px of leading (4px above and 4px below each line). The term 'leading' comes from traditional typesetting where strips of lead metal were placed between lines of type. In CSS, line-height sets the total line spacing, while in print design software like InDesign, leading specifically refers to the baseline-to-baseline distance.
How does line length (measure) interact with line spacing?
Line length and line spacing have a direct relationship: longer lines require more line spacing for comfortable reading. The optimal line length for body text is 45-75 characters per line (including spaces), with 65 characters considered ideal. When lines exceed 75 characters, increase line spacing to 1.6-1.8 to help readers track back to the start of the next line. Conversely, very short lines (under 40 characters) can use tighter spacing (1.3-1.4) because the eye traverses less horizontal distance. This relationship explains why newspapers use narrow columns with tight leading, while books with wider text blocks use more generous spacing.
How should I adjust line spacing for headings versus body text?
Headings require tighter line spacing than body text because larger text has proportionally more internal whitespace. A heading at 32px with a 1.5 ratio would have 48px line height and 16px of leading, which often looks too loose. Recommended heading line heights are 1.1-1.3 for display type (36px and above), 1.2-1.4 for H1-H2 headings, and 1.3-1.5 for H3-H4 subheadings. Multi-line headings especially benefit from tighter spacing to read as a cohesive unit rather than separate lines. As a practical rule, decrease the line height ratio by about 0.1-0.2 for each doubling of font size. Always test multi-line headings visually, as the optimal spacing depends on the typeface x-height and weight.
How do different font families affect optimal line spacing?
Typeface design significantly influences the ideal line spacing because fonts have different x-heights, ascender/descender proportions, and visual density. Fonts with tall x-heights (like Verdana, Georgia, or Open Sans) pack more visual weight into each line and benefit from slightly larger line spacing (1.5-1.6) to prevent a cramped appearance. Fonts with smaller x-heights (like Garamond or Didot) have more built-in vertical breathing room and can work well with tighter spacing (1.4-1.5). Sans-serif fonts generally need slightly more line spacing than serif fonts because serifs help guide the eye along each line. Bold or heavy font weights also benefit from increased line spacing compared to their regular-weight counterparts.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy