skip to content

In a design system on an 8-point spacing grid, how should text line heights align with the spacing scale, and why?

level: middleimportance: should knowfreq 36%

answer

  1. the line box takes the space
  2. line height, not font size
  3. multiples of 4
  4. 22.5 is a warning sign
  5. half-leading above the letters

basics

~20 s

Line heights, not font sizes, should be multiples of the base unit or half-step, because the line box is what occupies layout space. Then text blocks and the components holding them land on the grid, and spacing stays predictable.

solid answer

~40 s

In layout, text occupies its **line box**, whose height is the **line height**, not the font size. If line heights are multiples of 4 (16, 20, 24, 28, 32), every text block, and every component made of text plus inset, adds up to grid values: a 24-unit line with 12 above and below makes a 48-unit row. Font sizes such as 14, 15 or 17 are fine as long as their line heights are rounded onto the grid; a 15-unit font at a 1.5 ratio gives 22.5, which should be rounded to 24. One side effect needs a decision: the line box includes **half-leading** above the letters, so text often looks further from a card's edge than the spec says. Teams either accept it, trim it in the type styles, or compensate optically.

go deeper

for a junior

Recall that line heights, not font sizes, go on the grid, and that they are usually multiples of 4.

for a middle

Explain the line box and half-leading, and show how line height plus inset produces on-grid component heights.

for a senior

Show how you would fix a type ramp that produces fractional line heights and align design files and code on how spacing is measured.

for a principal

Weigh strict grid alignment of every text style against typographic quality for display sizes and scripts with taller glyphs.

## What text actually occupies When text is laid out, each line occupies a **line box**. Its height is the **line height** (also called leading), not the font size. The glyphs sit inside it, with extra space, called **half-leading**, split above and below. - A 16-unit font with a 24-unit line height takes 24 units of vertical space per line. - Three lines take 72 units, regardless of the font size. So for layout purposes, **line height is the text's size**. That is the value that must cooperate with the spacing scale. ## Aligning line heights with the grid On an **8-point spacing grid** with a 4-unit half-step, a common rule is: every text style's line height is a multiple of 4. | Text style | Font size | Line height | On the grid? | |---|---|---|---| | Caption | 12 | 16 | yes | | Body | 15 | 24 | yes, rounded up from 22.5 | | Body large | 17 | 24 | yes | | Title | 20 | 28 | yes | | Headline | 28 | 36 | yes | Font sizes are free to be whatever the type scale says. Only the line heights are rounded. ## Why it matters 1. **Components add up.** A button with a 24-unit line and 12 units of inset above and below is 48 tall; a list row with two lines of 20 and 16 of inset is 72. Every height lands on the grid without fiddling. 2. **Multi-line text stays aligned.** Because each line adds the same on-grid amount, a two-line dish description ends on the grid just like a one-line one. 3. **Neighbours line up.** Text next to an icon, an image or another column shares the same vertical rhythm. 4. **No fractions creep in.** A 15-unit font at a 1.5 ratio gives 22.5; a component built on it inherits half units and drifts off the grid. ## The half-leading problem Because the line box includes space above the letters, the visible gap between a card's top edge and the top of its title is bigger than the inset the spec states. In a **food-delivery app**, a restaurant card with a 16-unit inset and a 28-unit title line may look as if it has about 20 units above the title. Systems handle this in one of three ways: - **Accept it.** Keep specs measured from the line box; it is consistent and easy to implement. - **Trim it.** Some platforms and techniques can remove the leading above the first line and below the last, so the visible gap matches the spec more closely. - **Compensate optically.** Designers reduce the inset for text-led containers by a step, and document why. Whichever is chosen, design files and code must measure the same way, or the design and the build will disagree by a few units on every screen. ## A worked component Take a menu row in a food-delivery app: a dish name in the body style, a one-line description in a caption style, and a price aligned to the right. 1. The name uses a 15-unit font with a 24-unit line height. 2. The description uses a 12-unit font with a 16-unit line height. 3. Stack spacing of 4 separates them. 4. The row's inset is 12 above and below. The row's height is 12 + 24 + 4 + 16 + 12 = 68, a multiple of 4, and when the description wraps to two lines it becomes 84, still on the half-step. Had the name used a 22.5-unit line height, every row would end on a half unit and the list would drift further off the grid with each row. ## Where the rule bends - **Very large display text** may use a line height just above its font size; still round it to the grid. - **Mixed text sizes on one line**, such as a price beside a strike-through price, share one line box, so they follow the larger line height. - A **baseline grid**, where every line's baseline sits on a fixed interval, is a stricter layout-grid technique and a separate decision from putting line heights on the spacing scale. ## Checklist for a type-and-spacing review - Every text style's line height is a multiple of the base unit or half-step. - Component heights computed as line height plus inset land on the scale. - The system states whether spacing is measured from the line box or from the letters. - No text style produces a fractional line height.

  • Why align line heights rather than font sizes?
    The line box, whose height is the line height, is what occupies layout space; the font size only sets the glyphs inside it. If line heights sit on the grid, text blocks and the components holding them add up to grid values whatever the font size, so the type scale keeps its freedom and layouts stay aligned.
  • Text on a card looks further from the edge than the spec says; why, and what do you do?
    The line box includes half-leading above the letters, so the visible space is the inset plus that leading. Either accept it and measure from the line box consistently, trim the leading above the first line where the platform allows, or reduce the inset for text-led containers optically. The key is that design and code measure the same way.

saying these in an interview costs you the question

  • Font sizes must be multiples of 8 to sit on an 8-point grid.
  • Line height does not affect layout because only the letters take space.
  • A 1.5 line-height ratio always gives an on-grid line height.
  • Spacing is always measured from the letters, so leading adds nothing.