Should big type get tighter letter-spacing?

The standard advice is yes: tighten headlines, loosen captions. Then you open Apple’s own tracking table for San Francisco and find the opposite. Above 24 points, Apple adds space. Both are correct, and which one applies to you depends on a single property of the font you’re using. Here is how to tell, and the unit mistake that quietly undoes the work once a design is scaled up for export.

A font is spaced for one size

Every glyph carries a little empty space on each side, called its sidebearings. The type designer sets those once, and they are tuned for the size the font is mostly used at, which for an interface face means body text. Scale the font up and every gap scales with it, in exact proportion.

Your eye doesn’t judge it in proportion. At 12 pixels, letters need air between them to stay distinct; strokes are a pixel or two wide and the gaps are what make an “rn” read as two letters instead of an “m”. At 96 pixels the same proportional gaps become wide channels of empty space, and the word starts to read as a row of separate shapes instead of one unit. Tracking is the correction for that mismatch: a single number added to, or taken from, every gap at once.

Inter’s curve: tighten, then stop

Rasmus Andersson, who designed Inter, published the correction he uses as a formula on Inter’s “dynamic metrics” page:

tracking = −0.0223 + 0.185 × e−0.1745 × size

The result is in ems, so multiply by the font size to get pixels. Worked through, it gives about +1.0% at 10px, roughly zero at 12px, −1.1% at 16px, −2.0% at 24px, and −2.2% from around 40px up. In other words: open the small sizes a touch, tighten through the mid range, and level off. Nothing about a 120px headline needs more tightening than a 48px one. The curve flattens because by then the gaps are all large and the proportion is what the eye reads.

That is the source of the rule everyone repeats, and for a font like Inter it’s right.

Apple’s table goes the other way

The Human Interface Guidelines publish a tracking value for San Francisco at every point size from 6 to 96. The small end looks like Inter: +41 thousandths of an em at 6pt, 0 at 12pt, −26 at 17pt (the body size, which works out to −0.43pt). Then it turns. It’s −23 at 20pt, −12 at 22pt, crosses zero between 23 and 24, and reaches +14 by 28pt. From there it eases back down, +8 at 48pt and +4 at 64pt, and sits at 0 from 80pt up.

A designer who learned “big type, tight tracking” and sets a 34pt San Francisco title at −2% has done the opposite of what Apple specifies, by about three percent of the font size.

The reason, as far as the shape of the table tells it, is that San Francisco is not one design. It has a Text cut drawn for small sizes and a Display cut drawn for large ones, and the system moves from one to the other somewhere around 20pt. The Display cut is already drawn with tighter spacing built in, so the correction it needs is smaller and runs the other direction: the table opens it back up a little through the 24–60pt range where a headline usually sits. Inter’s formula was made for a single design stretched across every size, which is why it only ever tightens.

The question to ask the font

So the useful rule is not about size. It is: does this font change its drawing at large sizes?

• It has an optical-size axis or a Display family. Use it at headline sizes and leave the tracking close to zero, then adjust by eye. Inter itself is now in this group: version 4.0 folded the separate Inter Display family into the variable font as an opsz axis. On the web, font-optical-sizing: auto is the default and picks the optical size from the font size for you, so stacking Inter’s old −2.2% on top of the display cut tightens twice.
• It’s a single design. Tighten as size goes up, roughly along Inter’s curve, and stop somewhere around −2% to −3% unless the face is unusually loose.
• It’s a mockup of Apple’s system font. In a running app, the system applies the table itself. In a design file or an exported image, nothing does, which is why the HIG tells you to set the values by hand in mockups.

The unit that breaks at export size

Tracking only holds up if it’s stored as a fraction of the font size. The tools disagree on that. Figma accepts a percentage. CSS accepts em. Flutter’s letterSpacing and the point values in Apple’s table are absolute: logical pixels and points that don’t change when the font does.

That matters the moment a design gets scaled. A store screenshot headline is drawn on a canvas over a thousand pixels wide, and the type is often 100px or more. Copy the iOS body value of −0.43 into that headline and it comes out at −0.4%, which is nothing. Tune a headline to −1px at 32px in a preview and render it at 120px, and −3% has become under −1%. The fix is the same everywhere: store a ratio and multiply at render time. In Flutter that is letterSpacing: fontSize * -0.02, not letterSpacing: -1.

Capitals and small text go the other way

Capital letters are spaced to sit next to lowercase, where the short letters around them leave room. Put a word in all capitals and those sidebearings meet each other with nothing in between, so caps settings usually want positive tracking, a few percent of the size, even at sizes where lowercase would be tightened. The same goes for small labels: the positive end of both Inter’s curve and Apple’s table exists because text below about 12px gets harder to read when the letters crowd.

The trailing space nobody sees until it’s centred

One more thing to check once the number is right. Browsers add letter-spacing after every character, including the last one. We measured it in Chrome: the word HELLO set in Arial at 100px with letter-spacing: 0.1em grows by exactly 50px, five gaps for five letters, not four. On centred text that extra gap pushes the visible word half of it, 5px here, to the left of centre. With negative tracking it goes the other way. Cancel it with a matching margin-inline-end on the element, or measure the trailing gap before you centre. It’s the same kind of small offset we covered in why “perfectly centered” looks slightly off, except this one is real geometry, not perception.

How to check it by eye

Numbers get you close; your eye makes the call. Set the headline at the size it will actually be seen, not zoomed out to fit the artboard. Look for three things:

• Pairs that fuse when tight: “rn” turning into “m”, “cl” into “d”, “ri” touching at the top.
• Round letters next to each other (“oo”, “ce”) that look further apart than straight ones (“nn”, “il”). Tracking can’t fix that; it’s the font’s kerning, and it gets worse as you tighten.
• A word that reads as one shape from across the room. If you can see the gaps before you can read the word, it’s too loose.

If you’re setting white type on a dark background, start a little looser than you would on white; light text spreads into its gaps. Setting white type on dark without the bloom covers that adjustment in detail.

Store screenshot headlines are where all of this shows: big type, scaled for export, often on dark, and usually centred.