Hair Space (U+200A) | The Invisible Typographic Separator

What Is Hair Space?

Hair Space (U+200A) is the thinnest whitespace character available in Unicode. It was designed for situations where even a thin space takes up too much room. Think of it as a barely visible sliver of space that gives you precise control over text layout.

Designers and developers use it when regular spacing feels too wide but no spacing at all looks too tight. It creates just enough separation between characters without breaking the visual rhythm of the text.

Key Characteristics

• Extremely narrow width ranging from 1/16 to 1/24 of an em
• Breakable character which means it allows line wrapping at that point
• Does not collapse in HTML and CSS like regular spaces sometimes do
• Built for micro-spacing where every fraction of space matters

Technical Specifications

Professional Uses of Hair Space

Hair Space shines in professional typography and web development. Here are the most common ways designers and developers put it to work.

Kerning Adjustments

When certain letter combinations sit too close together, a Hair Space can fix the visual gap without changing your font settings.

<h1>AV&#8202;A&#8202;T&#8202;AR</h1>

This adds the tiniest bit of breathing room between capital letters that tend to clash visually.

Mathematical Notation

In math and science content, Hair Space creates clean spacing around operators without making the equation look spread out.

<p>x&#8202;+&#8202;y&#8202;=&#8202;z</p>

Abbreviation Formatting

Professional publications often use Hair Space between the letters in abbreviations. It looks polished without adding noticeable width.

<p>e.&#8202;g.&#8202;&#8202;vs.&#8202;&#8202;i.&#8202;e.</p>

Currency Display

Adding a Hair Space between currency symbols and numbers creates a clean, professional look in pricing displays.

<p>$&#8202;50 | &euro;&#8202;45 | &pound;&#8202;60</p>

How to Type or Insert Hair Space

Hair Space is not available on standard keyboards. But there are several easy ways to get it into your text or code.

Copy and Paste Method (Fastest)

Simply copy the character between the quotes below and paste it wherever you need it.

Copy this: " " (highlight and copy the space between the quotes)

This works on any device. No special software needed.

Keyboard Input by Platform

• Windows: Press Alt + 8202 using the number pad
• Mac: Open Character Viewer and search for Hair Space
• Linux: Press Ctrl + Shift + U, then type 200A and hit Enter

Using It in Code

HTML for number grouping:

<p>1&#8202;234&#8202;567</p>

CSS for automatic insertion:

.currency::before {
  content: '\200A';
}

Hair Space vs Other Narrow Space Characters

Unicode includes several narrow spacing characters. Here is how Hair Space compares to the other options.

Hair Space is the narrowest of all these options. If you need slightly more visible spacing, Thin Space (U+2009) is usually the next best choice.

When to Use Hair Space

Hair Space works best in specific situations where precision matters. Here is a quick guide on when it helps and when to skip it.

Good Use Cases

1. Between tightly spaced capital letters that look awkward together
2. Around mathematical operators for clean equation formatting
3. Between currency symbols and numbers in pricing layouts
4. For fine-tuning alignment in monospaced font displays

When to Avoid It

• Do not use it for paragraph indentation. Regular spacing or CSS padding works better
• Avoid it for general word spacing. Normal spaces handle that job fine
• Skip it on low resolution displays where the tiny space may not render at all

Font Support and Rendering Tips

Not all fonts and platforms handle Hair Space the same way. Here is what to expect.

• You will get the best results with high quality fonts from sources like Adobe Fonts or Google Fonts
• Some web fonts may not render it at all, making it completely invisible
• Always test across multiple browsers and devices before relying on it in production
• If Hair Space does not render consistently, use CSS letter-spacing as a reliable fallback

Troubleshooting

Can not see the Hair Space working?

Since it is so tiny, it can be hard to confirm whether it is actually there. Try these steps:

1. Temporarily increase your font size to make the spacing more visible
2. Select the text around where you placed it. The selection highlight will reveal hidden characters
3. Open your code editor and turn on the show invisibles or show whitespace option
4. Compare the text with and without the Hair Space side by side to spot the difference