Why is em the right unit for tracking?

Because an em is relative to the font size, so the same declaration produces the same proportional effect at every size in a scale. A pixel value tuned at 24px would be half as strong at 12px and twice as strong at 48px, meaning a separate value for every step. Authoring in em is why one rule holds across a responsive page.

When should tracking be negative?

At display sizes, where a face's default sidebearings usually read as too loose once the letters are large. The conventional range for that correction is around minus 0.01em to minus 0.03em, and it is deliberately not in this sweep: the sweep runs upward from zero because positive tracking is what capitals, captions and letterspaced word marks need.

What does the added width actually tell me?

How much longer the tracked string becomes, in pixels. Multiplying the tracking value by the size and by the number of characters gives the figure, and it is the one that matters to a layout: on a single word a fraction of a pixel per gap is nothing, while on a forty-character line it can be enough to push a word onto the next line and change the shape of the paragraph.

Why does tracked text wrap earlier?

Because every gap in the line has become wider, so the same words occupy more horizontal space. The wrapping point is therefore reached sooner, which is why a heading that fitted on one line before tracking may take two afterwards. Checking the added width against the measure before applying the value is what avoids that surprise.

Is the added-width column exact?

It is proportional rather than measured: it multiplies the tracking value by the font size and by the number of characters in the string. That is accurate to within the width of one gap, since the last character has trailing space that does not always contribute, so it is a good planning figure rather than a rendering measurement.

Font Letter Spacing Tester

Settings

Font family

Sample text

Type sizepx

Weight

Tracking stepem

Steps rendered

Tracking sweep

0emTracking changes the colour of type on the page.

0.01emTracking changes the colour of type on the page.

0.02emTracking changes the colour of type on the page.

0.03emTracking changes the colour of type on the page.

0.04emTracking changes the colour of type on the page.

0.05emTracking changes the colour of type on the page.

0.06emTracking changes the colour of type on the page.

Converted values

em	px @ 24px	ratio	added width (full string)
0em	0px	1×	0px
0.01em	0.24px	1.01×	11.52px
0.02em	0.48px	1.02×	23.04px
0.03em	0.72px	1.03×	34.56px
0.04em	0.96px	1.04×	46.08px
0.05em	1.2px	1.05×	57.6px
0.06em	1.44px	1.06×	69.12px

em is the unit to author: it scales with font-size, so one declaration holds at every breakpoint.

You Might Also Need

Letter Spacing Calculator

Calculate tracking values

CSS Letter Spacing Tool

Generate letter-spacing CSS

Optical Margin Alignment Preview

Preview optical alignment

Type Hierarchy Planner

Plan headings and body sizes

The font letter spacing tester runs a tracking sweep in em, which is the scale-independent unit a stylesheet should use, and reports the equivalent pixel values for the size you have chosen. Each step also shows how much width the tracking adds across the whole string.

What is Font Letter Spacing Tester?

The font letter spacing tester renders one sample across a tracking sweep, then converts each step into pixels, a ratio and the width it adds to the string.

Steps are generated from zero upward, advancing by a step between 0.002em and 0.05em, with between three and twelve steps rendered.
Each step is labelled with its em value in the sweep, and the sample is rendered at that tracking with the chosen family and weight.
The converted table reports the em value, the pixel equivalent at the current size, the ratio of tracked to untracked width, and the added width across the whole string.
Type size runs from 10px to 120px and weight is selectable, so the sweep can run at a caption size or at a display size.
The note under the table states the reason em is used: it scales with the font size, so one declaration holds at every breakpoint.

The added-width column is what makes the sweep more than a visual preference. Tracking of 0.02em on a forty-character line at 24px adds a specific number of pixels to that line, and that number is what determines whether the line still fits the measure or wraps a word earlier than it did. On a heading of three words the addition is negligible; on a paragraph it accumulates along the line, which is why tracking is applied to capitals, captions and small text rather than to body copy. The em unit is the other point the table makes: because an em is relative to the font size, a value tuned at 24px produces proportionally the same effect at 48px, whereas a pixel value would need recalculating for every size in a scale.

The sweep runs from zero upward only, so negative tracking for display sizes has to be tested by editing the sample's declaration or using a different tool.
Every step shares one size and weight, so the interaction of tracking with size is explored in separate passes.
The added-width figure is a proportional estimate from the string length rather than a measurement of the rendered line.
Only one line is rendered per step, so the effect of tracking on the line breaks of a paragraph is not shown.
Nothing checks the result against the measure, so the point at which tracked text starts wrapping differently has to be judged from the width figure.

Use it when tracking is being applied to a heading, capitals or small text, when a design calls for a spaced-out word mark, or when the width cost of tracking a whole line needs to be known before it is applied. Where tracking has to follow from the optical behaviour of punctuation rather than the space between letters, the optical margin alignment preview covers the hanging side of the same problem. The letter spacing calculator derives a value for a given width, the CSS letter spacing tool writes the declaration, and the optical margin alignment preview handles the punctuation that tracking cannot fix.

How to use Font Letter Spacing Tester

Choose the family and weight, then set the size the tracking will actually be applied at, since an em value interacts with both.
Enter the sample you want spaced, preferring the real words, since tracking behaves differently on a single word and on a full line.
Set the step and the number of steps so the sweep brackets the range you expect, then read down the sweep for the value that holds.
Check the added-width column against the measure, then copy the em value rather than the pixel equivalent into the stylesheet.

When to use Font Letter Spacing Tester vs related tools

Reach for it when tracking is being decided for a heading, a word mark, capitals or a caption, when a design calls for letterspacing that has to survive several breakpoints, or when the width cost of a tracking value needs checking before it changes the wrapping. The added-width column answers that last question directly. For the punctuation side of the same problem, the optical margin alignment preview covers glyphs that hang outside the measure, while the CSS letter spacing tool writes the declaration and the letter spacing calculator works backwards from a target width.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.