Leading Calculator
Free Leading tool for typography & graphic design. Enter values to see solutions, formulas, and educational explanations.
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.
What is a baseline grid and how does leading relate to it?
A baseline grid is an invisible set of horizontal lines that text baselines align to, creating consistent vertical rhythm throughout a page. The grid interval is typically set to the body text line-height. For example, with 16px body text at 1.5 line-height (24px), the baseline grid would be 24px. All vertical spacing including margins, padding, heading line-heights, and image heights should be multiples of this grid interval. This creates a subtle but powerful visual harmony, especially noticeable when text columns sit side by side. While strict baseline grid adherence is more common in print design, applying its principles to web design improves visual consistency and professional polish.
How do I calculate paragraph spacing based on leading?
Paragraph spacing should be proportional to the line-height to maintain vertical rhythm. The most common approach is to set paragraph spacing equal to one full line-height, which creates a visually clear separation between paragraphs while maintaining the baseline grid. For 16px text at 1.5 line-height (24px), paragraph spacing would be 24px. More generous layouts might use 1.5 times the line-height (36px in this example). In CSS, this is typically implemented using margin-bottom on paragraph elements. Avoid combining large paragraph spacing with first-line indentation, as these are redundant paragraph-separation methods from different typographic traditions.