Leading Calculator
Free Leading tool for typography & graphic design. Enter values to see solutions, formulas, and educational explanations.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Line Height = Font Size x Ratio | Leading = Line Height - Font Size
Line height is the total vertical space allocated per line of text, calculated by multiplying the font size by the line-height ratio. Leading is the extra space between lines, equal to line height minus font size. This space is split equally above and below each line (half-leading model).
Worked Examples
Example 1: Blog Article Typography
Problem:A blog has 16px body text with 70-character line lengths. The designer is using line-height: 1.4. Is this optimal, and what are the recommended values?
Solution:Font size: 16px\nLine length: 70 characters (requires more leading)\nCurrent line-height: 1.4 (22.4px)\nCurrent leading: 22.4 - 16 = 6.4px\n\nRecommended ratio for 70-char lines: 1.5\nRecommended line-height: 16 x 1.5 = 24px\nRecommended leading: 24 - 16 = 8px\n\nParagraph spacing: 24px\nBaseline grid: 24px (divisible by 4 - on grid)\nTraditional notation: 12/18pt
Result:Current: 1.4 (22.4px) | Recommended: 1.5 (24px) | Increase leading by 1.6px per line
Example 2: Mobile App Interface Leading
Problem:A mobile app uses 14px body text with 38-character line lengths on a 375px-wide screen. Calculate the optimal leading and paragraph spacing.
Solution:Font size: 14px\nLine length: 38 characters (short lines)\nOptimal ratio for short lines: 1.3\nContent type adjustment (body): +0\n\nOptimal line-height: 14 x 1.3 = 18.2px\nRound to baseline grid: 20px (ratio: 1.43)\nLeading: 20 - 14 = 6px\nHalf leading: 3px (above and below)\n\nParagraph spacing: 20px\nLines per screen (~667px content): ~33 lines\nTraditional notation: 10.5/15pt
Result:Optimal line-height: 1.3 (18.2px, round to 20px) | Paragraph spacing: 20px | ~33 lines per screen
Frequently Asked Questions
What is leading in typography?
Leading (pronounced 'ledding') is the vertical distance between baselines of consecutive lines of text. The term originates from the thin strips of lead metal that typesetters placed between lines of movable type to create space. In modern digital typography, leading is expressed as the line-height value, which includes both the font size and the extra space above and below each line. For example, 16px text with 24px line-height has 8px of leading (4px above and 4px below each line). Leading is one of the most critical factors in text readability, affecting how easily readers can track from the end of one line to the beginning of the next.
What is the difference between leading and line-height?
Leading and line-height are closely related but technically different measurements. Traditional leading measures only the extra space between lines (line-height minus font size). In CSS and modern design tools, line-height encompasses the total vertical space allocated to each line, including the font size itself. When a designer says '16/24' (16pt font on 24pt leading), the line-height is 24pt and the actual leading is 8pt (24 - 16). CSS line-height can be expressed as a unitless ratio (1.5), pixels (24px), ems (1.5em), or percentage (150%). The unitless ratio is recommended for CSS because it scales properly with font-size inheritance.
How does line length affect the ideal leading?
Line length and leading have a direct proportional relationship in typographic best practice. Longer lines require more leading because the reader eye must travel a greater horizontal distance to find the beginning of the next line. Without sufficient leading, readers may accidentally re-read the same line or skip a line entirely. For very short lines (under 40 characters, such as mobile interfaces), tight leading of 1.3x works well. Medium lines (40-70 characters, typical web content) need 1.4-1.5x leading. Long lines (70-90 characters, wide layouts) require 1.5-1.7x leading. Lines exceeding 90 characters should generally be avoided regardless of leading, as they inherently reduce readability.
Should headings have the same leading as body text?
No, headings typically use tighter leading than body text because they serve a different function and have different visual requirements. Body text needs generous leading for sustained comfortable reading across many lines. Headings, usually spanning only one to three lines, benefit from tighter leading (1.1-1.3x) that makes the heading feel more like a unified visual element rather than separate lines. Multi-word headings with very large type sizes (36px+) often look best with line-height as tight as 1.0-1.15x. The key principle is that headings should feel cohesive and distinct from body text, and tighter leading helps achieve that visual distinction.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy