Hair Space (U+200A) | The Invisible Typographic Separator
Hair Space (U+200A) is an ultra-thin spacing character used in precise typography. Learn how and where to use it.
Table of Contents
What Is Hair Space?
The Hair Space (U+200A) is the narrowest Unicode whitespace character, designed for ultra-precise typographic adjustments where even thin spaces are too wide. This invisible character creates subtle separation without disrupting visual flow.
Key Characteristics
- Extremely narrow (1/16 to 1/24 of an em)
- Breakable (allows line wrapping)
- Non-collapsing in HTML/CSS
- Ideal for micro-spacing needs
Technical Specifications
| Property | Value |
|---|---|
| Unicode | U+200A |
| HTML Entity | |
| CSS Code | \200A |
| Width | ~0.5pt at 12pt font |
| Category | Space Separator (Zs) |
Professional Usage of Thin Space
1. Kerning Adjustments
html
AV A T AR
2. Mathematical Notation
html
x + y = z
3. Abbreviation Formatting
html
e. g. vs. i. e.
4. Currency Display
html
$ 50 | € 45 | £ 60
How to Implement Hair Space
1. Keyboard Input
- Windows: Alt+8202 (Numpad required)
- Mac: Character Viewer → Search “Hair Space”
- Linux: Ctrl+Shift+U, then 200A
2. Code Implementation
html
1 234 567
css
.currency::before {
content: '\200A';
}
3. Copy-Paste Method
Copy this character: “?” (select between quotes)
Comparison With Other Narrow Spaces
| Character | Unicode | Relative Width | Breakable | Use Case |
|---|---|---|---|---|
| Hair Space | U+200A | 1/24 em | Yes | Ultra-precise kerning |
| Thin Space | U+2009 | 1/6 em | Yes | Standard narrow spacing |
| Six-Per-EM | U+2006 | 1/6 em | Yes | Tabular alignment |
| Punctuation | U+2008 | Font-specific | Yes | Around punctuation |
Technical Best Practices
When to Use
- Between tightly spaced capital letters
- Around mathematical operators
- For currency symbol separation
- In monospaced font alignment
When to Avoid
- As paragraph indentation
- For general word spacing
- In low-resolution displays
Font Support & Rendering
- Best results in high-quality fonts (Adobe fonts, etc.)
- May disappear in some web fonts
- Test thoroughly across browsers
- Fallback option: Use CSS letter-spacing as an alternative
Troubleshooting Guide
Why can’t I see my hair space working?
Try:
- Increasing font size temporarily
- Selecting the text to reveal hidden characters
- Checking in code editor with “show invisibles” enabled