ColorKitFree letter spacing calculator
Tracking in every unit your tools use
Type a tracking value once and read it as em, px, thousandths of an em and percent of the font size together, so a −25 from Illustrator becomes −0.025em in CSS without a detour through a spreadsheet. It is free, needs no account, and computes in the page. Alongside the conversion it recommends a value for the size you are actually setting — positive below 12.125px, negative above it, settling at −0.0223em for display type — and stacks the tracked specimen directly over the untracked one so you are judging a difference rather than a number.
- 100% free
- No signup
- 4 units at once
- Size-aware curve
- Caps allowance
Press Ctrl+V anywhere on the page to drop in a tracking value, or a whole letter-spacing declaration — no need to click the field first.
The same tracking in four units
- em-0.022em
- px-1.056px
- 1/1000 em-22
- % of size-2.2%
Recommended for 48px
-0.0223em
-22 in thousandths · -1.07px at this size
Above the 12.125px crossover the curve is negative and settles on −0.0223em, so a 48px heading and a 120px one want almost the same correction.
Specimen
Tracked to -0.022em
Efficient waffle grids — 0123
Untracked, for comparison
Efficient waffle grids — 0123
font-size: 48px; letter-spacing: -0.022em;
How to set letter spacing that holds up at any size
Convert the value, compare it with the curve for that size, then look at both specimens.
Enter the size, then the tracking in whatever unit you have it
Design tools disagree about units and this is where the friction is: Illustrator, InDesign and Photoshop count in thousandths of an em, Figma offers px or a percentage, and CSS wants em or px. Pick the unit your value came in, type the number, and the other three fill in immediately. Pasting a whole letter-spacing declaration works as well — the value and the unit are both read out of it.
Compare it against the recommendation for that size
The panel on the right computes a starting value from Inter's published dynamic-metrics curve, which is negative above 12.125px and positive below it. Press Use this value to load it into the field, then adjust from there. Tick All caps and an allowance is added on top, tapering from +0.08em at 16px down to +0.03em by 40px, because uppercase has no ascenders or descenders to break the run up.
Look at both specimens before you ship it
The tracked line sits directly above the same string set with letter-spacing: normal, at the same size, so the change is judged as a difference rather than in the abstract. Tick Centred and the CSS block gains the negative margin that pulls a tracked run back to the middle. Copy the block and it carries the font-size, the letter-spacing in em, and the text-transform and margin corrections if you asked for them.
Technical specifications
| Units converted | em, px, thousandths of an em (Illustrator, InDesign, Photoshop) and percent of font size (Figma) — all four live at once |
|---|---|
| Recommendation curve | Inter's published dynamic metrics, a + b·e^(c·s) with a = −0.0223, b = 0.185, c = −0.1745 and s the size in px |
| Curve behavior | Crosses zero at 12.125px, so anything smaller gets positive tracking; flattens onto −0.0223em above about 60px |
| Uppercase allowance | +0.08em at 16px and below, tapering linearly to +0.03em at 40px and holding there |
| Working range | −0.2em to +0.5em, which is −200 to +500 thousandths; values outside it are clamped |
| Precision | em to 4 decimals, percent to 2, px to 3, thousandths rounded to whole units — the unit design tools actually accept |
| Centring correction | Prints the margin-right that cancels the trailing space CSS adds after the final glyph |
| Access | Free and unauthenticated; the specimen renders locally with whatever fonts you already have |
Frequently asked questions
How much negative tracking does a large heading need?
About −0.022em, and it stops getting more negative once you are past roughly 60px. The curve used here settles onto an asymptote of −0.0223em, so a 48px heading and a 120px one want nearly the same correction — at 48px that is −1.07px and at 120px it is −2.68px, which is the same optical adjustment expressed in different absolute units. This is why tracking belongs in em: the correction scales with the type.
How do I convert Illustrator tracking to CSS?
Divide by 1000 and write the result in em, because Illustrator's tracking unit is one thousandth of an em by definition. A heading tracked to −25 in Illustrator is letter-spacing: −0.025em in CSS, and −25 at 60pt is a different number of points from −25 at 12pt, which is exactly the behavior you want. The one thing not to do is convert to px through the point size, because the px value stops being correct the moment the type is responsive.
Why does my centered all-caps heading look off to the left?
Because CSS adds the tracking after the last character as well as between characters, so the box is one full tracking step wider than the glyphs and centring the box shifts the glyphs left by half of it. At 48px with +0.1em that is 2.4px of visible offset — small enough to look like a mistake rather than a bug. The fix is a negative margin-right equal to the tracking, which this tool prints for you when you tick Centred.
Is there a WCAG requirement about letter spacing?
There is, and it is a robustness requirement rather than a value you must ship. WCAG 2.1 SC 1.4.12 says content must stay readable and functional when a reader sets letter-spacing to 0.12em and word-spacing to 0.16em, on top of whatever you specified. Tight tracking on a fixed-width button is the usual casualty: the label fits at −0.02em and clips at +0.12em, and the criterion is about that clipping, not about your original number.
Should uppercase always be tracked out?
Almost always, and more at small sizes than at large ones. Lowercase text is separated by its own ascenders and descenders, and a run of capitals has none of that, so the letters bunch into a block — most noticeably in short labels and buttons at 12 to 14px, where +0.08em is a reasonable starting point. A 60px all-caps display line needs far less, around +0.03em, because at that size the counters are already open enough to read.
Does letter-spacing switch off kerning or ligatures?
Kerning survives, ligatures usually do not. The kern pairs in the font's GPOS table are applied first and your tracking is added on top of the result, so a tracked Ta still has its kern. Ligatures are different: CSS Text 3 says user agents should not apply optional ligatures when the effective spacing between characters is non-zero, and Chrome and Safari both follow that — which is why the specimen here includes the word efficient, where the fi ligature visibly breaks apart the moment you track it.
About tracking, kerning and the units nobody agrees on
Tracking and kerning are often used interchangeably and they are not the same operation. Kerning is per-pair and comes from the font: the designer measured the gap between A and V and stored a correction in the GPOS table, and the browser applies it whether you asked or not. Tracking is uniform and comes from you — the same amount added between every pair in the run, on top of whatever the kern pairs already did. That is why tracking cannot fix a badly kerned pair and why a badly kerned pair still looks wrong at −0.02em.
The reason large type needs negative tracking is drawn into the font itself. A text face is cut with sidebearings generous enough to keep 10 or 12 point type legible on paper, and those sidebearings scale with the type; at 72px they are proportionally the same and optically far too much, so the word falls apart into letters. The correction is size-dependent and it asymptotes, because past a certain size the eye stops resolving the individual gaps. Very few families publish a curve for this. Apple ships a per-size tracking table for San Francisco; Inter publishes a formula, which is what this tool uses; most webfonts publish nothing at all, which means the number here is a defensible starting point rather than an answer about your specific face. Set your own family in the font preview and trust your eyes over the curve where they disagree.
Three CSS details are worth carrying away. First, prefer em over px: letter-spacing: -1px is a different optical correction at every breakpoint, and the em to px conversion is only for reading a design file, not for writing the stylesheet. Second, normal and 0 are not synonyms — normal permits the user agent to adjust spacing when justifying text, and a literal zero forbids it, so a justified column set to 0 gets worse word spacing instead of better letter spacing. Third, tracking is the third of the three numbers a piece of type needs, after the step from your type scale and the leading for that measure; a heading tightened horizontally and left loose vertically reads as an accident. If the proportions between those steps came from 1.618, the tracking correction at the top of that scale is the largest of the three and the one people forget.
Where the tracking is worked out
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.