Letter Spacing Calculator

Try the Calculator

What Optical Tracking Is

Optical tracking is the practice of adjusting letter spacing by how the text will be read, not by a single fixed number. The core observation is simple: the same amount of space between letters reads differently at different sizes. At 10px, the default spacing between glyphs is tight enough that letters start to merge. At 64px, the same default spacing looks like the letters are drifting apart.

Traditional type foundries publish tracking tables that capture this: a value for 6pt, another for 8pt, another for 12pt, and so on up the scale. Digital typesetting mostly threw those tables away. CSS gives every size the same default letter spacing, and most web type never gets adjusted at all. That is the gap this tool fills: it reconstructs the traditional table as em values you can apply in a stylesheet.

The rules are not arbitrary. Small sizes need loosening because the physical space between glyphs shrinks with the font. Large sizes need tightening because the same physical space grows. Light weights need more air than bold ones because thin letterforms leave less visual mass to separate. Caps need tracking because they lack the ascenders and descenders that give lowercase its silhouette. Each correction in the calculator maps to one of these facts.

How the Values Are Computed

Every row starts from zero at the 16px body size, then applies corrections. Sizes at or below 14px add positive tracking, scaled so the smallest sizes get the most. Sizes at 24px and above subtract tracking, with the largest display sizes getting the tightest values. The weight shifts the whole curve: light text stays looser everywhere, bold text sits tighter.

Uppercase mode adds a fixed 0.05em across the table, the classic recommendation for set caps. Tight display mode nudges every value down a step for projects that prefer a more condensed headline look. All values are clamped so that no size goes below negative 0.03em, which keeps even the largest display text from collapsing its counters.

Because the values are em based, one set of tokens works for the whole scale. The export defines a tracking token per size, and each heading or caption class references the token for its own size. Change the weight later and the table, the preview, and the export all rebuild together.

How to Use the Tool

1. Set the weight to the dominant weight in your project. If headings are bold and body is regular, run it twice and take the relevant rows from each table.
2. Turn on uppercase mode only for interfaces that actually set labels and buttons in caps, like the nav labels on many marketing sites.
3. Read the verdict column to check that the values match your intention: looser for small, tighter for display.
4. Scan the live preview. The sentence at 14px should look airy without falling apart, and the 48px and 64px rows should look compact without touching.
5. Copy the CSS and map each token to your heading classes or design tokens in the brand kit.

Common Letter Spacing Mistakes

The most common mistake is using one tracking value everywhere. A value that looks right for a 48px hero looks wrong on a 14px caption, and vice versa. The fix is a size-aware table like the one this tool produces, not a single global letter-spacing rule.

The second mistake is positive tracking on large bold headlines. Big bold type already has generous internal spacing, and added tracking makes it look hollow. Large display type wants neutral or slightly negative values, which is why the table turns negative above 32px.

The third is ignoring case. All-caps navigation with no tracking looks cramped because every letter is the same rectangular shape. The 0.05em bump for caps is the difference between a label that reads as a word and one that reads as a block of letters.

Finally, avoid negative tracking on small light text. The strokes are thin and the counters are small, so even a small negative value starts to close them. Keep small sizes at zero or above, which the clamp in this tool enforces automatically.

Kerning, Tracking, and Letter-Spacing in CSS

The three terms get mixed up constantly, and the confusion has real consequences. Kerning is the per-pair adjustment built into a font: the AV pair, the To pair, the Wa pair all get bespoke spacing so they do not look uneven. Tracking is the uniform adjustment applied across a whole selection, which is exactly what the CSS letter-spacing property does.

In CSS you never set kerning directly. Browsers apply the font kerning table by default, and the font-feature-settings or font-kerning properties only toggle whether that built-in behavior runs. What you do control is letter-spacing, and it sits on top of the kerning table: the final space between two glyphs is the kerning value plus the letter-spacing value. That is why a large letter-spacing value can swamp good kerning, and why display headlines with heavy positive tracking look lumpy. The font did its careful pair work and the stylesheet threw a blanket over it.

The practical rule: let kerning do its job, keep body text at neutral letter-spacing, and apply deliberate tracking only where the optical rules say it helps, small text and caps looser, display text tighter. When you do change letter-spacing, change it by size bucket rather than globally, which is the whole point of the table above.

Where This Fits with the Other Tools

Letter spacing is one of the refinements that turns a working scale into a polished one. The type scale calculator picks the sizes, and the vertical rhythm calculator fixes the spacing between lines, while this tool tunes the space inside the lines. Test the finished values on real fonts in the typography playground, check readability at small sizes with the text measure tool, and make sure the tighter display values still pass contrast with the contrast checker.

FAQ

What is the difference between kerning and tracking?

Kerning adjusts the space between two specific characters to fix awkward pairs like AV or To. Tracking adjusts the space across a whole range of text uniformly. You cannot set kerning in CSS, the font itself contains the kerning pairs, but letter-spacing is exactly tracking, and this tool computes it.

Should letter spacing be in em or px?

Use em. An em value scales with the font size, so a tracking token written once works at any size. A px value is fixed and has to be rewritten every time the size changes. The export on this tool uses em for that reason.

Why does small text need looser tracking?

At small sizes the counters and spaces between letters physically shrink, and the eye struggles to separate glyphs. A little extra air restores readability. This is why UI toolkits loosen tracking below 14px and why body copy at 16px usually wants neutral tracking.

Why does large text need tighter tracking?

At display sizes the spaces between letters grow proportionally and start to look gappy. Tightening pulls the word back together visually. Bold display type in particular reads better with slightly negative tracking, which is where the term tight display setting comes from.

Does uppercase text always need extra tracking?

Almost always. Uppercase has no ascenders and descenders to give each letter shape, so the eye has fewer cues to tell letters apart. The traditional rule is to add tracking to caps, and the classic guidance is around 5 percent of the em, which is why this tool adds 0.05em when caps mode is on.

Can I use negative letter spacing?

Yes, carefully. Negative values are standard for large bold headlines. The risk appears below 1em sizes: too much negative tracking at small sizes makes letters collide, especially in light weights with tight spacing. The tool clamps values so the smallest sizes never go negative.