Tt TotallyType

“White space is to be regarded as an active element, not a passive background.”

— Jan Tschichold

Your eyes only see a small amount of text at a time — typically six letters on either side of your focal point or point of fixation. The farther a word is from that point, the fuzzier it appears. Eyes use white space to recognize where a word begins and ends by making subconscious adjustments called saccades. This is the scientific reason why the space between words needs to be greater than the space between letters. If the space between words is too large, the reader's eyes will need to make more adjustments or saccades slowing down the pace of reading. The following lesson will look at the word space as well as the em, en, thin, hair, non-breaking, and hard spaces.

Spaces

A word space is the standard space between words; it is set by the typeface designer and typed with the space bar. The em and en spaces are often used as a measurement of space. An em or en space are sometimes used as a word space or to add additional spacing where normal spacing is inadequate. The em space is sometimes used to create paragraph indents in print and in place of using text-indent on the Web.

  Space Windows Mac HTML
Em glyphs panel glyphs panel  
En glyphs panel glyphs panel  
Thin glyphs panel glyphs panel  
| Hair glyphs panel glyphs panel n/a

The thinspace is approximately 1/2 of a word space and is sometimes used when a word space is too large such as in my initials: R. A. F. A hairline space is sometimes used before a colon, semicolon, point, exclamation point, or after parentheses and quotation marks — most digital fonts already have these spaces accounted for.

Nonbreaking Spaces

Desktop publishing software sees a word space as a place to break and flow text onto the next line. A nonbreaking space is a special word space that prevents the text from breaking onto a new line. We use this to prevent awkward breaks. Some good places are in abbreviations, reference marks (Ex. 2 Fig. 18), after symbols (© 2015), before an ellipses (someday …), and before and after em or en dashes with spaces (2010 – 2015).

  Space Windows Mac HTML
  word space space space
  nonbreaking control+shift+space option+shift+space  

This is as good a time as any to talk about the period or point used at the end of sentences. Before digital type it was customary to use two spaces after a sentence. This is unnecessary; the period itself is mostly white space and when combined with the word space, provides adequate spacing.

Hard Spaces

A hard line break separates lines of text. It breaks a line onto the next, in other words, gives you control over text flow. This is useful to balance awkward breaks in headings or for listing items such as in an address. A hard page break puts the next line on a new page. Do not use multiple carriage returns. All of these breaking spaces have one purpose, to give you flow and reflow of text. Using these breaks will allow the text to reflow as you intended when you edit your copy or typesetting down the road.

Type is a beautiful group of letters, not a group of beautiful letters.
Type is a beautiful group of letters, <br />
not a group of beautiful letters.

Although I just used one, the Web is no place for hard line breaks. By nature web pages do not support the use or need of page breaks either; they are only useful in print. On the Web we use the <p> tag to define paragraphs. In a responsive multi-device world, you don't have control over line-length let alone text size.

  Space Windows Mac HTML
  nonbreaking control+shift+space option+shift+space &nbsp;
  hard line break shift+return shift+return <br />
  page break control+return option+return <br />
Back to Lessons Kerning