Character Spacing Calculator
Use our free Character spacing Calculator to learn and practice. Get step-by-step solutions with explanations and examples.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Letter-Spacing (em) = Tracking Value / 1000 | Letter-Spacing (px) = (Tracking / 1000) x Font Size
Tracking values in design tools are measured in 1/1000 of an em. To convert to CSS letter-spacing in em units, divide by 1000. To get pixel values, multiply the em result by the font size in pixels. Positive values increase spacing, negative values decrease it.
Worked Examples
Example 1: Heading Typography Spacing
Problem:A designer needs to set tracking for a 48px heading with the text 'WELCOME HOME' (12 characters). What CSS letter-spacing should they use, and how much wider will the text become?
Solution:For 48px display text, optimal tracking is approximately -30 units.\nTracking in em: -30 / 1000 = -0.03em\nTracking in pixels: -0.03 x 48 = -1.44px\nCSS: letter-spacing: -1.44px (or -0.03em)\nTotal width reduction: 12 characters x -1.44px = -17.28px narrower\nThis tighter spacing creates a more cohesive, impactful headline.
Result:CSS letter-spacing: -0.03em (-1.44px) | Text 17.28px narrower
Example 2: Body Text Tracking for Web Article
Problem:A web developer has a 1,500-word article at 16px font size in a 680px container (~65 characters per line). They want to add slight tracking of 20 units. How does this affect the layout?
Solution:Tracking in em: 20 / 1000 = 0.02em\nTracking in pixels: 0.02 x 16 = 0.32px\nTotal characters: 1,500 words x 6 avg chars = 9,000 characters\nEffective chars per line: 65 / (1 + 0.02) = ~63.7, rounds to 63\nLines without tracking: 9,000 / 65 = ~138 lines\nLines with tracking: 9,000 / 63 = ~143 lines\nExtra lines: ~5 lines added to the article.
Result:CSS letter-spacing: 0.02em (0.32px) | Adds ~5 extra lines to a 1,500-word article
Frequently Asked Questions
What is character spacing in typography?
Character spacing, also known as tracking or letter-spacing, refers to the uniform adjustment of space between all characters in a block of text. Unlike kerning, which adjusts spacing between specific character pairs, tracking applies the same spacing increase or decrease across every character uniformly. This spacing is typically measured in units of 1/1000 of an em, where one em equals the current font size. Proper character spacing is essential for readability, visual hierarchy, and overall typographic quality in both print and digital design contexts.
Why do large headings need tighter character spacing?
Large headings typically require tighter (negative) tracking because the spaces between characters become visually exaggerated at larger sizes. What appears as comfortable spacing at 16 pixels can look awkwardly loose at 48 or 72 pixels. This optical phenomenon occurs because our perception of spacing is relative to character size. Professional typographers routinely apply negative tracking of -20 to -50 units for display sizes above 24 pixels. This tightening creates a more cohesive, impactful visual appearance and helps headlines feel more like unified words rather than collections of individual letters.
How does character spacing affect readability and legibility?
Character spacing directly impacts both legibility (ability to distinguish individual characters) and readability (ease of reading continuous text). Too-tight spacing causes characters to visually merge, particularly problematic for letterforms like rn (which can resemble m) or cl (which can resemble d). Excessively loose spacing breaks the word-shape patterns that experienced readers rely on for rapid text processing. Research shows that slightly increased tracking improves legibility for small text sizes, while body text reads best at default or minimal tracking. The optimal balance depends on font design, size, medium, and viewing distance.
What CSS property controls character spacing on the web?
The CSS letter-spacing property controls character spacing in web design. It accepts values in various units including pixels (px), ems (em), and rems (rem). For example, letter-spacing: 0.05em adds spacing equal to 5% of the font size. Using em units is recommended because the spacing scales proportionally with font size changes. The property can accept negative values for tighter spacing. When converting from design tools like Adobe InDesign or Figma, divide the tracking value by 1000 to get the em equivalent. For instance, a tracking value of 50 in Figma translates to letter-spacing: 0.05em in CSS.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy