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

What Is Hair Space?

Hair Space (U+200A) is the thinnest whitespace character 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. It gives you precise control over text layout.

Quick Facts About Hair Space

• It is the narrowest Unicode space character available
• Its width ranges from 1/16 to 1/24 of an em
• It allows line breaks at its position (breakable)
• It does not collapse in HTML like regular spaces
• It was introduced in Unicode 3.1 (2001)

Designers and developers use it when regular spacing feels too wide. They also use it when no spacing looks too tight. The Hair Space creates just enough separation between characters. It does not break the visual rhythm of the text.

Key Characteristics

• Extremely narrow width ranging from 1/16 to 1/24 of an em
• Breakable character which 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
• Invisible by design but leaves a measurable gap

Technical Specifications of U+200A

Professional Uses of Hair Space

Hair Space excels in professional typography and web development. Here are the most common ways designers and developers use it.

Kerning Adjustments

Certain letter combinations sit too close together. A Hair Space can fix the visual gap. You do not need to change your font settings.

<h1>AV</h1>
<!-- becomes -->
<h1>A V</h1>

This adds tiny breathing room between capital letters. Letters like A and V or A and W often clash visually. Hair Space solves this problem.

Mathematical Notation

In math and science content, Hair Space creates clean spacing around operators. The equation does not look spread out or cramped.

<p>x + y = z</p>
<p>a × b = c</p>
<p>f(x) = x² + 2x + 1</p>

Abbreviation Formatting

Professional publications use Hair Space between abbreviation letters. The result looks polished. It adds no noticeable width.

<p>e. g.  vs.  i. e.</p>
<p>N. B. This requires attention</p>
<p>c. f. Latin abbreviation for "compare"</p>

Currency Display

Adding a Hair Space between currency symbols and numbers creates a professional look. This works well for pricing displays and financial documents.

<p>$ 50 | € 45 | £ 60</p>
<p>¥ 1000 | ₹ 500 | $ 99.99</p>

Number Grouping (Thousands Separator)

Some style guides prefer thin spaces for thousands separation. Hair Space offers an even subtler alternative.

<p>1 234 567 890</p>
<p>10 000 000 (ten million)</p>

Footnote and Reference Markers

Footnotes sit too close to text without spacing. A regular space feels too large. Hair Space provides the perfect middle ground.

<p>This statement requires verification.¹</p>
<!-- with Hair Space -->
<p>This statement requires verification ¹</p>

How to Type or Insert Hair Space

Hair Space is not available on standard keyboards. Several easy methods exist. Choose the one that fits your workflow.

Copy and Paste Method (Fastest)

Copy the character between the brackets below. Paste it wherever you need it.

Copy this: [ ] (select and copy the space between the brackets)

This method works on any device. No special software is needed.

Keyboard Input by Platform

• Windows (ALT Code): Press Alt + 8202 using the number pad. Release Alt.
• Windows (Character Map): Search "Character Map" in Start. Find Hair Space in Advanced View > Unicode Subrange > General Punctuation.
• Mac: Press Control + Command + Space. Open Character Viewer. Search for "Hair Space". Double click to insert.
• Linux: Press Ctrl + Shift + U. Type 200A. Press Enter or Space.
• ChromeOS: Press Ctrl + Shift + U. Type 200A. Press Space or Enter.

Using Hair Space in Code

HTML direct insertion:

<p>1 234 567</p>
<p>Price: $ 99</p>

CSS for automatic insertion:

.hair-space::after {
  content: '\200A';
}

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

thousand-sep {
  display: inline-block;
  margin-right: 0.02em; /* fallback if hair space fails */
}

JavaScript string insertion:

const hairSpace = '\u200A';
console.log(`A${hairSpace}V`); // Shows "A V"

function addHairSpaceBetweenCapitals(text) {
  return text.replace(/([A-Z])([A-Z])/g, `$1${hairSpace}$2`);
}

Hair Space vs Other Narrow Space Characters

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

Hair Space is the narrowest among visible space characters. Thin Space (U+2009) is the next best choice when slightly more space is needed.

Visual Comparison Table

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 (AV, AW, AT)
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
5. Between footnote numbers and text
6. In abbreviations like e.g., i.e., N.B., c.f.
7. For thousands separation in numbers (as an alternative to commas)

When to Avoid Hair Space

• 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 well.
• Skip it on low resolution displays where the tiny space may not render at all.
• Avoid it in email clients. Many email clients strip or ignore Unicode spaces.
• Do not use it in JSON APIs without proper encoding. Use \u200A instead.

Font Support and Rendering Tips

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

Fonts with Good Hair Space Support

• Adobe Fonts (Source Sans Pro, Source Serif Pro, Helvetica Neue)
• Google Fonts (Roboto, Open Sans, Lato, Montserrat, Merriweather)
• System Fonts (Arial, Times New Roman, Segoe UI, San Francisco)
• Specialty Fonts (Fira Code, JetBrains Mono for code environments)

Fonts That May Struggle

• Some older Windows system fonts
• Custom or poorly maintained web fonts
• Fonts that predate Unicode 3.1 (before 2001)

Rendering Tips

• Test across multiple browsers and devices before using in production.
• Use CSS letter-spacing as a reliable fallback for unsupported environments.
• Consider using margin or padding in CSS for spacing that must work everywhere.
• For critical typography, provide fallbacks using modern CSS features.

.hair-separated {
  /* Primary method: Hair Space in HTML */
  
  /* Fallback 1: CSS letter-spacing */
  letter-spacing: 0.01em;
  
  /* Fallback 2: for specific elements */
  margin-right: 0.02em;
}

Hair Space vs CSS letter-spacing

Both methods solve similar spacing problems. Each has advantages.

Recommendation: Use CSS letter-spacing for broad spacing needs. Use Hair Space for precise, character-specific adjustments that must survive copy-paste.

Troubleshooting Common Issues

Cannot see the Hair Space working?

The character is extremely tiny. Visibility depends on font size and renderer. Try these steps:

1. Temporarily increase your font size to at least 24px. The spacing becomes visible.
2. Select the text around where you placed it. The selection highlight reveals hidden characters.
3. Open your code editor. Turn on "show invisibles" or "show whitespace" option.
4. Compare the text with and without Hair Space side by side. Place them in adjacent columns.
5. Use browser developer tools to inspect the element. Look for the Unicode character in HTML.

Hair Space creates a line break unexpectedly

Hair Space is a breakable space. Line breaks can occur at its position in narrow containers.

Solution: Wrap the words in <nobr> or use CSS white-space: nowrap on the parent element.

Hair Space disappears in email clients

Email clients have poor Unicode space support. Gmail, Outlook, and Yahoo often strip these characters.

Solution: Do not rely on Hair Space in HTML emails. Use standard spaces or CSS margin.

Frequently Asked Questions

Is Hair Space the same as Zero Width Space?

No. Zero Width Space (U+200B) has no width at all. It only controls line breaks. Hair Space has measurable width (1/24 of an em).

Can I use Hair Space in domain names?

No. Domain names cannot contain spaces of any kind. This includes Hair Space.

Does Google treat Hair Space as a word separator?

For SEO purposes, treat Hair Space as a standard space. Google's parser normalizes most Unicode spaces to standard spaces.

Why does my Hair Space look wider than expected?

Some fonts implement Hair Space as a fixed fraction of the em. Others use font-specific metrics. Different browsers also render spaces differently.

What is the difference between U+200A and U+2009?

U+200A (Hair Space) is 1/24 em (thinnest). U+2009 (Thin Space) is 1/6 em (four times wider). Choose based on visual need.

Can I use Hair Space in passwords?

Technically yes, but this is not recommended. Many password systems strip or reject Unicode spaces. Stick to standard characters.

Quick Reference Card

Summary

Hair Space (U+200A) is the thinnest visible spacing character in Unicode. It measures approximately 1/24 of an em. Professional typographers and developers use it for micro-spacing adjustments.

Type it using Alt + 8202 on Windows. Copy and paste on Mac and mobile devices. Use   in HTML and \200A in CSS.

Hair Space excels at kerning corrections, mathematical notation, abbreviation formatting, and currency display. For broader spacing needs, use Thin Space (U+2009) or CSS letter-spacing.

Test Hair Space across your target browsers and devices. Provide CSS fallbacks for unsupported environments. When it works, Hair Space delivers professional-grade typographic control that regular spaces cannot achieve.