Letter Spacing

A typeface is drawn once, usually at a size close to body text. Its letters are spaced so that a paragraph reads well. Scale that same drawing up to a headline and the spaces between letters scale with it, which is more room than a headline needs. Scale it down to a caption and the letters start to touch.

Letter spacing, or tracking, is the fix. Drag the size slider and compare the untouched word with the one that tightens as it grows.

Headline0

Headline-0.022em

Size48px

The second line follows the formula Rasmus Andersson published for Inter, the typeface this site uses. Around body size it barely moves. Above 24px it settles near -0.02em. That number sounds tiny and it is, but the headline reads as one word instead of a row of letters.

Across a scale

The rule holds for every step of a type scale, not only the headline. Toggle the card to see all four sizes adjust at once.

Launch weekFive days of shippingEvery day this week we release one thing we have been working on for months. Some are big, most are small.Posted Monday, 9:00

FlatScaled

FlatScaled

The display line tightens, the body copy stays put, and the caption opens up by a hair. If you only remember one thing: tighten as you go up, loosen as you go down, and leave body text alone.

Uppercase

Capital letters were designed to sit next to lowercase letters. Set a whole word in caps and the even sidebearings of lowercase are gone, so the word looks cramped, especially small.

Wrong

Pinned

• RoadmapDraft
• PricingLive
• ChangelogLive

Right

Pinned

• RoadmapDraft
• PricingLive
• ChangelogLive

Small uppercase labels like section headers and status pills want extra room, somewhere between 0.05em and 0.1em. The same applies to all caps buttons and tabs, if you use them.

Usage

Always write tracking in em. It is relative to the font size, so the same value keeps working when the text scales, and it survives a change of typeface far better than a pixel value would.