Letter Spacing & Kerning Tool
Adjust the spacing between letters in your text with real-time preview. Fine-tune kerning for logos, headlines, or any design text.
The quick brown fox
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
How the Letter Spacing Tool Works
This tool adjusts letter spacing (tracking) for any text. Enter your text and adjust spacing to see how different values affect readability and appearance. Get CSS-ready letter-spacing values instantly.
Letter spacing controls the space between all characters uniformly. Positive values add space; negative values bring letters closer. The tool shows real-time previews as you adjust.
Export CSS with your chosen letter spacing. The tool generates values in em units for scalability. Preview how spacing affects different font sizes and weights.
When You'd Actually Use This
Styling all-caps headings
Uppercase text often needs increased letter spacing for readability. Add 0.05-0.15em to all-caps headings for a refined, professional appearance.
Fitting text into tight spaces
Your heading almost fits but wraps awkwardly. Slightly negative letter spacing (-0.02em to -0.05em) can bring it onto one line without changing font size.
Creating luxury brand aesthetics
High-end brands often use generous letter spacing. It conveys elegance and exclusivity. Test spacing values that match your brand's premium positioning.
Improving legibility at small sizes
Small text can benefit from slight positive letter spacing. It prevents characters from visually merging, especially on lower-resolution screens.
Designing buttons and navigation
Button text and nav items often use increased letter spacing. It improves click targets and creates a more polished UI component appearance.
Fixing font-specific spacing issues
Some fonts have naturally tight or loose spacing. Adjust letter spacing to compensate and achieve consistent visual rhythm across different typefaces.
What to Know Before Using
Use em units for letter spacing.Em units scale with font size automatically. 0.1em at 16px is 1.6px; at 32px it's 3.2px. This maintains proportional spacing across sizes.
Negative spacing has limits.Too much negative letter spacing causes characters to overlap. Stay above -0.1em for readability. Test thoroughly at different sizes.
Different fonts need different spacing.Geometric sans-serifs often need more spacing than humanist fonts. Serif fonts vary widely. Always preview with your actual font choice.
Letter spacing affects line length.Increased spacing makes lines longer. This can cause unexpected text wrapping. Account for spacing when calculating line lengths.
Pro tip: For all-caps text, start with 0.1em letter spacing. For small caps, try 0.05em. For lowercase body text, usually leave at default (0).
Common Questions
What's the difference between tracking and kerning?
Tracking (letter-spacing) adjusts space uniformly across all characters. Kerning adjusts space between specific letter pairs. CSS doesn't support manual kerning.
Can I use pixels for letter spacing?
Yes, but don't. Pixel values don't scale with font size. 2px spacing looks different at 16px vs 48px. Em units maintain proportional spacing.
Does letter spacing affect accessibility?
Yes. WCAG recommends letter spacing of at least 0.12em for accessibility. Increased spacing helps users with dyslexia and low vision read more easily.
Should I adjust letter spacing for mobile?
Often yes. Mobile screens benefit from slightly increased letter spacing. It improves readability at arm's length and on lower-PPI displays.
What about word spacing?
CSS has word-spacing property for adjusting space between words. It's less commonly used than letter-spacing but follows the same unit principles.
Can I animate letter spacing?
Yes, letter-spacing is animatable. Hover effects that increase spacing create subtle emphasis. But animate sparingly—it can be distracting.
Why does my spaced text look blurry?
Sub-pixel letter spacing can cause anti-aliasing artifacts. Try values that result in whole pixels, or accept that some blur is normal at certain sizes.
Other Free Tools
Font Pairing Tool
Font Pairing Tool for Designers
Line Height Generator
Line Height Calculator
Font Size Converter
Font Size Unit Converter
Text Shadow Generator
CSS Text Shadow Generator
ASCII to Hex Converter
ASCII to Hex Converter: Text to Hexadecimal Translator
Barcode Generator
Free Barcode Generator
Binary to Text Converter
Binary to Text Converter
Free Printable Calendar Maker
Create & Print Your Custom Calendar
Pie Chart Maker
Free Pie Chart Maker Online