Adventures in Space: Spaces

June 14, 2016 by Yves Peters

To conclude my Adventures in Space series, I would like to take a look at the different kinds of spaces. While Spacing, Kerning, and Tracking focused on the space between characters, this last episode examines the spaces outside the words. There is quite a bit more than just the word space – if you select the Insert White Space fly-out from the Type menu in Adobe® InDesign® for example, you discover a dozen different space characters. And when you are designing for the web, Unicode provides several different space entities for online use. Using the right kind of space can make your life easier, and it will definitely help you improve your typesetting.

The different white space characters in Adobe Indesign.</br>Source: Screenshot Adobe InDesign; © Adobe Systems Incorporated.

There is more than simply pressing the space bar or tab key when it comes to adding space – between words and/or numbers, or between words or numbers and punctuation marks. In computer science the different types of spaces that represent horizontal or vertical space in typography are called white spaces. No less than 25 characters are defined as white space in the Unicode Character Database. They occupy an area on the page, but are basically invisible, and are differentiated by how big the area is that they occupy (and also sometimes by how they behave).

For the moment InDesign is the only Adobe® Creative Cloud® app that allows the user to select different types of space characters. When it comes to online use, the specific space entity needs to be supported by the browser to show up properly. Also, certain types of spaces behave differently in InDesign than in Unicode.

Non-breaking space

Code point: U+00A0
HTML/XML entity (decimal):  
HTML/XML entity (named):

While all the other types of spaces in this article belong to the General Punctuation Unicode block, the non-breaking space is part of the Latin-1 Supplement. The non-breaking space occupies the same area as the regular word space (the one you get when you press the space bar) but as it name implies it ‘glues’ the characters before and after the space together. This can come in handy when you want multi-part names to remain connected, for example the prefix and the actual name in a typeface name like FF Chartwell®. And if you prefer that the complete name of Tobias Frere‑Jones stays together you also need a non-breaking hyphen for his family name.

In some formats like HTML, the non-breaking space also prevents consecutive white space characters from collapsing into a single space. While the non-breaking space is a space character in and of itself, some of the other space characters are also non-breaking. I will specify this for every one mentioned in this article.

Figure space

Code point: U+2007
HTML/XML entity (decimal):  
HTML/XML entity (named): &numsp;

The figure space takes up the same amount of space as a tabular figure in a font. It is very useful when you need to do some quick and dirty formatting of tabular numbers. The easiest way to have the figures in numbers of varying length line up vertically is to use tabular figures and have them aligned flush right. However if the numbers are preceded by a currency symbol for example, those will not align. This problem is usually solved by having the lines with numbers align flush left and insert a right indent tab between currency symbol and number. A quick fix is simply adding figure spaces in front of the shorter numbers to make them all the same length.

The figure space is non-breaking in both Unicode and InDesign. Which makes sense, because you want those numbers and currency or unit symbols to stay together.

Punctuation space

Code point: U+2008
HTML/XML entity (decimal):  
HTML/XML entity (named): &puncsp;

Similar to the figure space, the punctuation space takes up the same amount of space as the narrow punctuation marks in a font, like the period or the comma. This too can be useful in tabular figures, as figure spaces can be used to replace missing decimal points or thousands separators in shorter numbers. Sometimes the use of spaces rather than commas is encouraged in math lessons.

The punctuation space is wrappable in Unicode (the space breaks at the end of the line), but non-breaking in InDesign.

Thin space

Code point: U+2009
HTML/XML entity (decimal):  
HTML/XML entity (named): &#thinsp;

The thin space and the hair space are the narrowest whitespace characters, with the hair space ⅓ of the width of the thin space. They are mostly often used to finetune the distance between punctuation marks and letters or other punctuation marks, for example around the em dash or the slash. There are no hard rules for their use.

The thin space and hair space are wrappable in Unicode, but non-breaking in InDesign.

Hair space

Code point: U+200A
HTML/XML entity (decimal):  
HTML/XML entity (named): &#hairsp;

Em space

Code point: U+2003
HTML/XML entity (decimal):  
HTML/XML entity (named): &emsp;

Historically also known as the ‘mutton’, the em space basically is a square – it is as wide as the point size. So for example in 12pt type the em space is 12pt wide. In traditional typesetting it was often used as a paragraph indent, at the beginning of the first line of text of a new paragraph.

The em space is wrappable in Unicode, but non-breaking in InDesign.

En space

Code point: U+2002
HTML/XML entity (decimal):  
HTML/XML entity (named): &ensp;

Historically also known as the ‘nut’, the en space is half the width of the em space. In traditional typesetting it was often used as a fixed-width space between the bullet and the subsequent character.

The en space is wrappable in Unicode, but non-breaking in InDesign.

The width of most of the white space characters in relation to the width of the em space.

Third space

Code point: U+2004
HTML/XML entity (decimal):  
HTML/XML entity (named): &emsp13;

Historically also known as a ‘thick space’, as its name implies the third space or three-per-em space is one third of the width of an em.

The third space is wrappable in Unicode, but non-breaking in InDesign.

Quarter space

Code point: U+2005
HTML/XML entity (decimal):  
HTML/XML entity (named): &emsp14;

Historically also known as a ‘mid space’, as its name implies the quarter space or four-per-em space is one fourth of the width of an em.

The quarter space is wrappable in Unicode, but non-breaking in InDesign.

Sixth space

Code point: U+2002
HTML/XML entity (decimal):

As its name implies the sixth space or six-per-em space is one sixth of the width of an em.

The sixth space is wrappable in Unicode, but non-breaking in InDesign.

Flush space

The flush space is a white space character specific to InDesign, not present in Unicode. When used in the Justify All paragraph alignment setting, this variable space character will automatically expand to make the line of text fill the entire column width. Substituting word spaces with flush space characters guarantees that the letterspacing remains constant, and the justification of the text comes from the word spaces only.

Previous episodes

Part 1 – Adventures in Space: Spacing
Part 2 – Adventures in Space: Kerning
Part 2.5 – Adventures in Space: Special Cases
Part 3 – Adventures in Space: Tracking
Part 4 – Adventures in Space: Spaces

_{Typeface in header image: FF Qtype® by Achaz Reuss. Typefaces in visuals: FF Hertz™ by Jens Kutilek and FF Mark by Hannes von Döhren, Christoph Köberlin and FontFont Type Department.}