Typography Line Height Calculator
Free Typography line height tool for typography & graphic design. Enter values to see solutions, formulas, and educational explanations.
Formula
Line Height (px) = Font Size (px) x Line Height Multiplier
Where Line Height Multiplier is a unitless value typically between 1.2 and 2.0 for readable text. Leading = Line Height - Font Size. The multiplier should increase with line length: 1.3 for short lines, 1.5 for medium, 1.7 for long lines. CSS best practice is to use the unitless multiplier directly in the line-height property.
Worked Examples
Example 1: Blog Post Body Text
Problem: A blog has 16px sans-serif body text in a 680px wide container. What line height should be used?
Solution: Characters per line = 680 / (16 x 0.48) = 88.5 chars\nThis exceeds the 75 char maximum, so constrain to max-width: 680px\nFor 88 chars per line, recommended line height = 1.7\nLine height in pixels = 16 x 1.7 = 27.2px\nLeading = 27.2 - 16 = 11.2px\nHalf-leading = 5.6px above and below\nBaseline grid = 28px (rounded to nearest 4px)
Result: Use line-height: 1.7 (27.2px). Better yet, add max-width: 33em to limit line length and use 1.5.
Example 2: Heading and Body Harmony
Problem: Body text is 16px with 1.5 line height (24px baseline). What line height should a 32px h2 heading use to maintain baseline rhythm?
Solution: Baseline grid = 24px\n32px heading needs minimum line height = 32px (1.0)\nNearest baseline multiple above 32 = 48px (2 baselines)\nLine height multiplier = 48 / 32 = 1.5\nWith 24px margin-bottom: total = 48 + 24 = 72px = 3 baselines\nAlternatively: line-height 40px (1.25) + 8px margin = 48px = 2 baselines
Result: Use line-height: 1.25 (40px) with 8px margin-bottom for 2-baseline total, or 1.5 (48px) for more space.
Frequently Asked Questions
What is line height in typography and why is it important?
Line height, also known as leading in traditional typography, is the vertical distance between the baselines of two consecutive lines of text. It determines how much space separates each row of text, directly affecting readability and visual density. Proper line height prevents lines from feeling cramped or disconnected. In CSS, line height can be specified as a unitless multiplier, a fixed pixel value, or a percentage. The unitless multiplier is preferred because it scales proportionally with font size changes. Research consistently shows that line height has one of the largest impacts on reading speed and comprehension among all typographic variables, making it one of the most important decisions in text-heavy layouts.
What is the recommended line height for body text?
The recommended line height for body text in most contexts is between 1.4 and 1.6 times the font size, with 1.5 being the most commonly cited ideal. This range provides enough vertical separation for comfortable reading without creating excessive gaps that disrupt the visual flow. The Web Content Accessibility Guidelines suggest a minimum line height of 1.5 for body text to meet accessibility requirements. However, the optimal value depends on several factors including font size, line length, font type, and the amount of text. Longer lines need more line height because the reader must track across a greater distance and find the next line. Shorter lines can use tighter spacing around 1.3 to 1.4 without sacrificing readability.
How does line length affect the optimal line height?
Line length and line height have a direct proportional relationship. As line length increases, the reader must travel farther horizontally to reach the end of each line, and then make a return sweep to find the beginning of the next line. Greater line height creates more vertical separation between lines, making it easier for the eye to locate the correct next line after this return sweep. For short lines of 45 characters or fewer, a line height of 1.3 is usually sufficient. For the ideal 66-character line, 1.5 works well. For longer lines of 75 or more characters, increase to 1.6 or even 1.7 to maintain comfortable reading. Failing to increase line height for wide text columns is one of the most common readability mistakes in web design.
What is leading and how does it relate to line height?
Leading is the traditional typographic term for the space between lines, originating from the strips of lead metal placed between lines of type in letterpress printing. In modern digital typography, leading is equivalent to the line height minus the font size. For example, if the font size is 16px and the line height is 24px, the leading is 8px. This 8px of extra space is distributed equally above and below each line of text as half-leading of 4px each. Understanding leading is important for precise vertical alignment work, as the half-leading affects how text aligns with adjacent elements. In CSS, you cannot set leading directly but instead control it through the line-height property, from which the browser calculates the leading automatically.
Should headings use the same line height as body text?
Headings should generally use a tighter line height than body text, typically between 1.1 and 1.3 times the font size. There are several reasons for this difference. First, headings are usually short at one to three lines, so the return sweep problem that necessitates generous line height in body text is less relevant. Second, headings at larger font sizes already have substantial absolute spacing between lines. A 36px heading with 1.5 line height produces 54px of line height, which creates an excessive 18px gap that makes multi-line headings appear disconnected. At 1.15 line height, the same heading has a more visually cohesive 41px line height. Third, tighter heading line heights create visual contrast with body text, reinforcing the typographic hierarchy.
How do I calculate line height for a baseline grid?
For a baseline grid, the line height of body text defines the fundamental unit, and all other typographic measurements should be multiples of this value. Start by choosing a body font size and multiplying by your desired line height ratio. For example, 16px font times 1.5 equals 24px baseline grid. This 24px becomes your magic number. Every margin, padding, and spacing value in the layout should be a multiple of 24. For headings at different sizes, calculate the minimum number of baseline units needed. A 32px heading needs at least 2 baseline units at 48px line height. Round to clean multiples and add margin to fill any remaining space. The key formula is total vertical space equals line height plus margin top plus margin bottom, and this total must be divisible by the baseline value.