When we type, we usually think of a “space” as a single, uniform thing: the result of hitting the largest key on our keyboard. In the realm of basic word processing, this is generally true. However, in professional typography, web design, and digital publishing, a space is not just a space.
The Unicode standard, which governs how computers handle text, includes dozens of different “whitespace” characters. Each one has a specific width, behavior, and purpose. Understanding these variations is crucial for designers and developers who want precise control over how their text renders across different devices and browsers.
Why Do We Need Different Types of Spaces?
In traditional letterpress printing, typesetters used physical blocks of lead (called “quads” and “spaces”) of varying widths to perfectly align text, create indents, and manage the gaps between words.
When text moved to digital screens, the Unicode standard digitized these physical blocks. We need different whitespace characters because a standard space (U+0020) is dynamic; its width changes depending on the font used and whether the text is justified. When a designer needs a space to be an exact, mathematical width regardless of the font, they must use specific Unicode whitespaces.
The Core Whitespace Characters
Let’s break down some of the most important visible and invisible spacing characters found in the Unicode standard:
The Standard and Non-Breaking Spaces
- Space (U+0020): The standard spacebar space. Its width is determined by the font and can stretch or shrink if the text is justified (aligned to both the left and right margins).
- Non-Breaking Space (NBSP) – U+00A0: This space has the same width as a standard space, but it acts as glue. It prevents the browser from breaking a line between the two words it separates. This is essential for keeping units with numbers (e.g., “10 kg”) or names (e.g., “Mr. Smith”) together on the same line.
The Typographical Spaces (Fixed Widths)
These spaces are defined by the “em,” a unit of measurement in typography equal to the current point size of the font.
- Em Space (U+2003): A wide space, exactly equal to one “em”. If your font size is 16px, the Em Space is 16px wide. It is often used for paragraph indents.
- En Space (U+2002): Half the width of an Em Space. It is roughly the width of a standard typographical “N”.
- Thin Space (U+2009): Usually one-fifth or one-sixth of an em. It is used to add a tiny amount of breathing room, for example, between nested quotation marks or alongside punctuation in French typography.
- Hair Space (U+200A): The thinnest visible space available, thinner than a Thin Space.
The Invisible/Zero-Width Spaces
These characters do not take up any visual width but provide instructions to the rendering engine.
- Zero-Width Space (ZWSP) – U+200B: Allows a line break where one normally wouldn’t occur (perfect for long URLs).
- Word Joiner (WJ) – U+2060: Prevents a line break between characters.
How to Use These Characters in Web Design
While you can technically insert these characters using HTML entities (like   for an En Space or   for an Em Space), managing them in raw text or databases can be tricky.
If you are working on a design project, customizing a UI, or testing how a browser handles different spacing parameters, you often need the raw character itself. You can easily find and copy these specific characters, including the Em Space, En Space, and various Zero-Width characters, from our comprehensive Unicodes.
Conclusion
Mastering Unicode whitespace characters elevates your work from basic typing to professional typography. By understanding when to use a non-breaking space versus an Em Space, or how a Zero-Width Space can save your layout from breaking, you gain absolute control over your digital text.