How big is a space? Not space, the final frontier. We're talking about much smaller spaces you type on your keyboard. It's the space you create with the space bar as well as specific lengths of space that require special keystrokes and may vary by the font you use.
Not all spaces are created equal. And spaces between words and sentences differ among the many written languages of the world. For the purposes of this spaced-out article I'll stick with the English language primarily and spaces most used in typesetting. We'll touch on Web spaces too. As a whole these are white space characters. (Related to but not to be confused with the design principle of white space.)
Number of SpacesDid you know that not all languages put a space between words? And space between sentences varies as well. The debate over one space or two between sentences goes back and forth. Sometimes there are more on the one space side and at other times the two-spacers lead the discussion. In typeset material, one space is the preferred number of spaces. (Disagree? Plenty do.). A happy medium might be achieved by using a space character other than the default you get when hitting the spacebar.
It's not only space between words and sentences that become an issue in print and the Web. There are customary conventions when it comes to space before or after certain symbols and abbreviations. In English there is typically no space between a number and the percent (%) sign but it's not necessarily wrong to write 15 % instead of 15%. Yet, in other languages a space before % is the norm. Sometimes spaces are used to improve the appearance of the text rather than because of any specific style guide. For example, in some fonts a designer might feel that an em dash needs a little space separating it from surrounding text — like this, instead of—like this.
Breaking and Non-Breaking SpacesNormally while typing on a computer, when reaching the margin the software will look for a space where it can end the line and start a new line of type. This may be referred to as line wrap, text wrap, or line break. This can result in awkward or less-than-ideal breaks such as:
The QA conference is planned for AprilIn the (exaggerated) example, above, it would be better if the date, time, and Mr. Johnston's name could each appear together instead of breaking to the next line. This can be achieved with a non-breaking space between the parts you don't want to be separated. The software will either keep the text together at the end of the line or break earlier moving it all to the next line. Other names for a non-breaking space include: non-breakable space, fixed space, or hard space.
5. I'd like all the team leaders to arrive by 7
AM for a quick run-through. You are also
expected to attend a break-out session at
noon with special guest, Alexander Finlay
Johnston, V.P. of QA Operations South.
In HTML, a non-breaking space holds words together, can be used to insert indents, and do other layout tricks.
Size of SpacesThe size of a space in typography is not absolute. It changes relative to the point size of the typeface. The default (spacebar) space between words is larger in 24 point text than it is in 12 point text. Several special spaces are used in typesetting and are based on an em. An em is equivalent to the point size of a given font. In a 12 point font, the em is 12 points. Various space characters range from the em space at 1 em to the hair space at 1/10 of an em or smaller. The normal blank space between words, creating by pressing the spacebar, is generally around 1/3 to 1/4 the size of an em. For 12 point type the normal space between words would be about 3 to 4 points before any additional tracking or character spacing is applied.
See the table at the end of this article for names, descriptions, and codes for 12 different white space characters.
Designing With White Space Characters
Some designers find that a normal space or no space between certain characters is unattractive. Instead they will insert em, en, thin, hair spaces, or some other spacing. In some types of typesetting including mathematical or scientific formulas, spaces that are thicker or thinner than normal spaces are required or at least preferred. In other cases, it's a matter of opinion or preference of the client or designer. Some places where these spaces may be used include:
- Before and after hyphens, em dashes, or en dashes; for example using a thin space or a hair space on each side of an em dash.
- Between sentences when a single space seems crowded and two normal spaces are too much.
- To create uniform spacing and alignment; for example, use a figure space to align numbers in a table or en spaces after bullets in a bulleted list.
Tutorials and standards on using special space characters:
Insert white space characters in Adobe InDesign.
Fine-tuning Spacing in QuarkXPress covers many spacing issues including special space characters.
Latin 1 - Space Characters Design Standards from Microsoft typography, aimed primarily at type designers.
White-space characters at Typography for Lawyers looks at the word space, non-breaking space, and other similar keyboard characters.
Writing Tips: Spacing at Writer's Block addresses the use of normal, thin, hair, en, and em spaces including some places where you might find each.
How Big is an Em? from About.com Web Design/HTML discusses the use of ems instead of pixels in Web page measurements.
- In addition to explicitly inserting white space characters, word and character spacing and line endings are adjusted using the kerning, tracking, and hyphenation controls in word processing or page layout software.
Some of the most common space characters are shown and described in the following table. Note that some browsers may not display some of these characters correctly, if at all. To insert these special characters on a Mac use the Character Palette/Character Viewer. For Windows use Character Map (use Alt + 0160 on the numeric keyboard for a non-breaking space). Note that not all fonts contain all these special space characters.
To quickly find all the available space characters in a font using Windows 7 Character Map:
- Open Character Map and check the Advanced view box if not already selected.
- Choose your font from the drop down (top of Character Map).
- Select the desired Character set (such as Unicode).
- In the Search for: window type the word space then click Search button.
- Most of the space character boxes will appear to be empty so hover over a blank box to see character names.
- Alternately, instead of search, select Unicode Subrange under the Group by: section then select General Punctuation in the pop-up window. Most space characters will be there along with periods, exclamations points, and other punctuation. This will also show you some space characters that may not have space in their names (such an em quad).
A Dozen Space Characters
|Normal (breaking)||approximately 1/4 to 1/3 of an em but varies by font; also called blank space or word space||use spacebar||U+0020|
|Normal non-breaking||same size as a normal space but won't allow an automatic line break|| ||U+00A0|
|En||half the width of an em; also called a nut|| ||U+2002|
|Em||width of an em; point size (height) of typeface; also called a mutton|| ||U+2003|
|Three per em||about 1/3 of an em; also called Third space or Thick space||U+2004|
|Four per em||about 1/4 of an em; also called Quarter space or Mid space||U+2005|
|Six per em||about 1/6 of an em; also called Sixth space; may be same as a thin space||U+2006|
|Figure||about the width of a single monospaced digit (number) in a typeface; tabular width||U+2007|
|Punctuation||about the width of a period, comma, or exclamation point (the character and the space surrounding it)||U+2008|
|Thin||about 1/5 to 1/8 of an em|| ||U+2009|
|Hair||about 1/10 to 1/24 of an em; thinnest space in a font; also called hairline space||U+200A|
|Medium Mathematical||4/18ths of an em; used in mathematical typography||U+205F|
|Pick Your Path to Desktop Publishing|
|Get Started:||Basic Guidelines and Requirements for Desktop Publishing|
|Choose Software:||Desktop Publishing and Design Software|
|Tips & Tutorials:||How to Do Desktop Publishing|
|Training, Education, Jobs:||Careers in Desktop Publishing|
|In the Classroom:||Back to School With Desktop Publishing|
|Make Something:||Things to Make Using Desktop Publishing|
|Use Templates:||Templates for Print and Web Publishing|