Typography

Font size and letter spacing

The em box reserves room for ascenders such as h, k, and l, descenders such as g, p, and j, and extra space that keeps neighboring lines from colliding. Glyph proportions vary by typeface, so two fonts at the same size can still look different.

Latin letters generally sit on a baseline, with the body and ascenders above it and descenders below. East Asian type does not use an identical baseline model; Chinese glyphs are generally designed within a square. In mixed text, the layout engine uses each font’s metrics to align glyphs into a visually balanced line.

Text can also align by top, center, or bottom, but continuous prose should generally use baseline alignment to maintain a stable reading rhythm. Other modes are better suited to icons, buttons, and short interface labels.

Text can also be left aligned or justified horizontally:

Left alignment suits left-to-right reading. It provides a stable starting edge and preserves natural spacing, but leaves a ragged edge on the right.

Justification adjusts word or character spacing so every line except the last fills the measure. It creates a tidy block, but short lines and narrow screens can produce uneven gaps. Many reading apps use justification together with line-breaking and punctuation adjustments.

Letter spacing is the extra distance added between adjacent characters. The standard value is zero and body text rarely needs adjustment. Positive values loosen text; negative values tighten it. Use both sparingly, as wide spacing fragments words and tight spacing crowds strokes.

Line height and line spacing

Line height and line spacing are often used interchangeably, but describe different measurements. Line height is the full height allocated to a line; line spacing is the extra whitespace between neighboring text areas.

Line height / leading

Line height is the vertical distance between the baselines of adjacent lines. It includes the theoretical font-size area plus extra space distributed above and below it.

Line spacing

Line spacing is the extra space left after subtracting the font size from line height. In the common CSS model it is approximately split above and below the inline box as half-leading.

Their relationship can be expressed with the following formula:

For example, 16px type with a 24px line height leaves roughly 8px of extra space, commonly understood as about 4px above and below. This gives text balanced room inside its line box.

For body text, prefer a unitless multiplier so line height scales with font size. For long-form reading, begin around 1.6 to 2.0. Values below 1.2 often feel crowded, while values well above 2.0 can break continuity. Always account for the typeface, line length, and language.

Paragraph spacing

Paragraph spacing is the vertical whitespace between paragraphs. It signals that one unit of meaning has ended and another is about to begin.

Start with roughly 0.5 to 1 line of paragraph spacing, or about 8px to 16px at common mobile sizes. The goal is not a rigid ratio: the gap should be clearly larger than normal line spacing without breaking the article into disconnected blocks.

Margins

Margins are the whitespace between the page edge and the main content. If line and paragraph spacing shape the breathing room inside an article, margins frame the whole composition. They improve balance and keep text away from the physical edge of a screen.

For mobile readers, begin with side margins around 1.5 to 2 font sizes while preserving a minimum safe inset on narrow screens. Top and bottom margins are often equal or slightly larger. More important than a fixed ratio is a comfortable line length and respect for notches, rounded corners, and gesture areas.