Tracking, in every unit designers use
Design tools count in thousandths of an em; CSS wants em. This converts between them and shows the result at your actual size.
Tracking, in every unit designers use
Photoshop and Figma count in thousandths of an em; CSS wants em or px. This converts between them and shows the result at the size you are actually setting.
Tracking runs opposite to size
The single most useful rule here is that the larger the type, the tighter it wants to be. At display sizes the natural gaps between letters are magnified along with the letters, and text set at 48px with default spacing looks loose and disconnected; pulling it in slightly, often to around -0.02em, makes a headline read as one object rather than a row of characters. Below about 14px the opposite applies, and a little positive tracking keeps small text from closing up and turning grey.
This is why tracking belongs to a type scale rather than to a single choice. A value that flatters a headline will thin out body copy, and one tuned for captions will make the same headline look spaced out. Set it per step, not per project.
Capitals and the em unit
Set in capitals, type almost always needs opening up. Uppercase letterforms were designed to be spaced apart in inscriptions rather than run together as words, and lower-case spacing applied to them reads as cramped — which is why small-caps labels and buttons in all caps usually want somewhere around 0.06em to 0.12em, considerably more than anything you would apply to a sentence.
The reason to express all of this in em rather than pixels is that an em is a proportion of the current font size. Tracking set in em holds its relationship as text scales — when a heading shrinks on a narrow screen, the spacing shrinks with it and the proportions survive. Pixels do not: a value tuned at one size becomes wrong at every other, and responsive type will find every one of them.
Why em is the unit to ship
An em value scales with the font size, so one declaration works across a whole type scale. A px value has to be recalculated for every size, and a scale with eight sizes needs eight tracking values.
Design tools count in thousandths because that is what the OpenType and PostScript tooling used. 20 there is 0.02em here.
Uppercase needs tracking; lowercase does not
Type is spaced by its designer for its intended use, and that is almost always mixed case. Setting it all in capitals removes the ascenders and descenders that give words their shape, and the default spacing then looks tight.
A little positive tracking — 0.02 to 0.08em — restores it. Applying the same value to lowercase body copy destroys the word shapes readers actually rely on.
Large type wants less
Default spacing is calibrated for text sizes. At display sizes the same relative spacing looks loose, which is why headlines are often tracked slightly negative — around −0.02em — and body copy never is.