Type, Grid and Spacing Numbers You Can Measure

Set these numbers before you touch the mouse: line length, scale steps, gutters and target sizes.

Body copy runs 45-75 characters per line, at a line-height of 1.4-1.6 in print and 1.5-1.75 on screen. Mobile body text should not drop below 16 px, and iOS body text defaults to 17 pt — so test mobile styles against that default, not against a desktop preview.

Type sizes come from a modular scale, not from whim. At a 1.25 ratio from a 16 px base the steps run 16, 20, 25, 31, 39, 49 px; any size outside that set needs a written reason.

Spacing follows an 8-point grid: margins and paddings in 8 px increments, with 4 px for fine adjustments. Every tappable target is at least 44×44 px on iOS or 48×48 dp on Android — a cross-platform design must satisfy both floors.

The page itself sits on a 12-column grid with 16-32 px gutters inside a 1140-1280 px maximum content width. Full-bleed sections break that grid on purpose, at a chosen place — a break you planned, not a drift you noticed later.

These values are stage 3 of the learning path, and they pair with the contrast thresholds on the Color Contrast page: a layout that passes the checks below but fails 4.5:1 is still not done.

• Step 1 — Set the base: 16 px body text, 1.25 scale, lock the size set before styling anything.
• Step 2 — Constrain the measure: adjust container width until body lines hold 45-75 characters.
• Step 3 — Snap the spacing: replace every one-off margin with 8-point steps.
• Step 4 — Size the targets: nothing tappable below 44×44 px.
• Step 5 — Break on purpose: mark which sections go full-bleed and write down why.

Further reading

• Design Learning Path: 6 Stages From Zero to Portfolio
• Color Contrast and Color-Blind-Safe Palettes