Use the free Letter Spacing Calculator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What letter spacing is
Letter spacing, also called tracking, is the even space added between every character in a piece of text. Designers set it in thousandths of an em: a tracking value of 50 means each letter gets an extra 0.05 em of space. The Letter Spacing Calculator above converts that abstract number into pixels and points for your font size, and shows you a live preview, so you can see the effect before you commit it to a stylesheet.
Tracking is often confused with kerning, but they do different jobs. Kerning adjusts the space between one specific pair of letters, like A and V, which naturally sit close together. Tracking adjusts all letters evenly, which changes the overall texture and density of a block of text. You use kerning to fix a pair; you use tracking to set a mood, such as the wide, airy feel of a luxury headline or the tight, dense feel of a compact label.
How to use the calculator
Enter your font size in pixels, then your tracking value in thousandths of an em. A value of 0 means no extra spacing. Positive values open the text up; negative values tighten it. Type your own preview text, press Calculate, and read the letter spacing in pixels, points, and ems. The preview below the result shows your text at the chosen size with the spacing applied, so you can judge the look, not just the number.
The math is simple: letter spacing in pixels equals font size times tracking divided by 1000. At 16 pixels with tracking 50, the spacing is 0.8 pixels. At 32 pixels with the same tracking, it is 1.6 pixels, because an em grows with the font size. That is why tracking is defined relative to the em: the same tracking value scales cleanly from small body text to huge display type.
A worked example
An all-caps headline at 32 pixels with tracking 100 gets 3.2 pixels of extra space per letter, which opens the caps nicely and stops them from crowding. Body text at 16 pixels with tracking 25 gets 0.4 pixels, a subtle loosening that can help small text breathe on screen. Tightening a logo wordmark at 48 pixels with tracking minus 25 removes 1.2 pixels per letter, pulling the letters into a compact, deliberate shape. Small numbers have big visual effects at large sizes, so change tracking in small steps and look at the result each time.
When to add space, and when not to
All-caps text almost always benefits from extra tracking. Capital letters are wide and uniform, and without added space they form a solid block that is hard to read. Small caps and short labels benefit too. Body text, by contrast, usually needs little or no tracking: the typeface designer already tuned the default spacing for reading, and adding space to long paragraphs makes the text feel scattered and slows the reader down.
Negative tracking has its uses, but it is easy to overdo. Tightening a headline slightly can make it feel bold and confident. Tightening body text makes letters collide, especially at small sizes or in fonts with wide shapes. As a rule, keep body text between minus 10 and plus 25, keep headlines in the range that looks right for the font, and always test at the actual size the reader will see.
Tracking across fonts
The same tracking value looks different in different fonts. A condensed font with narrow letters tolerates more tracking than a wide, geometric font, where extra space quickly looks gappy. Serif fonts often need slightly different tracking than sans-serifs at the same size. The calculator gives you the exact pixel value, but your eye makes the final call: try the same tracking on two or three fonts before you lock a style, and check it on a real screen, not just in a design tool’s preview.
From calculator to stylesheet
In CSS, letter spacing is set with the letter-spacing property, which accepts pixels or ems. The calculator’s em figure drops straight into a stylesheet and scales with the font size, which is why many designers prefer ems for tracking. Pixels are exact for one size but must be recalculated if the font size changes. Either way, keep the value in your design notes alongside the font and size, so the next person working on the project reproduces the look instead of guessing it.
Typography figures are computed from the entered font size, and real rendering varies by font. Use the calculator to get exact numbers, check the preview with your real font and text, and test at the sizes your readers will actually use.
Related tools
- Calculadora de Espaciado entre Letras (Spanish version)
- Line Length Calculator
- Line Height Calculator
Pingback: Sublimation Size Planner - Transfer Fit Check for Your Garment and Press