Letter Spacing & Tracking Guide
Discover optimal letter spacing and tracking ranges across font sizes and capitalization styles. Learn when to open up uppercase labels and tighten display headlines.
Tracking & Letter Spacing Guide
Font size: 16px
-0.01em – 0.02em
0em
Letter spacing: 0.000em
Typography rhythm
letter-spacing: 0.000em; (0px)What this letter spacing & tracking guide does
This letter spacing and tracking guide calculates recommended tracking ranges based on optical font size and capitalization. Maintain optimal rhythm and avoid disjointed or overlapping letterforms.
How to use it
Set your target font size using the slider.
Choose between Sentence case body text and Uppercase labels.
Review the recommended optical range and ideal starting value.
Adjust the letter spacing slider to test live visual density.
Copy the letter-spacing em value into your CSS or design tokens.
Frequently asked questions
What is the difference between tracking and kerning?
Tracking (CSS letter-spacing) applies uniform spacing across an entire text string simultaneously. Kerning is the pair-specific adjustment between two distinct adjacent characters (like AV or To) to resolve optical gaps.
When should I use negative letter spacing?
Large display headlines (36px+) have generous internal counters that can make words look loose. Subtle negative tracking (-0.01em to -0.03em) binds large letters into cohesive word units.
Why does uppercase text require extra letter spacing?
Capital letters lack ascenders and descenders to create visual variety, producing uniform rectangular blocks. Adding positive tracking (+0.05em to +0.12em) restores internal breathing room and reading cadence.
Related resources
Custom Type Engineering
Need a custom brand typeface or complete typography system?
Goafreet crafts bespoke Latin and Indic typefaces, authorized script extensions, and corporate font governance for modern digital brands.