Typesetting Tip #1: Spaces

In HTML 4.0 and the browsers that fully support it, there are 6 varieties of spaces. These spaces are the en-spaces, em-spaces, thin-spaces, non-breaking spaces, zero width joiners, and zero width non-joiners.

NOTE: Most of these are not supported in IE 6 or 7.

  1. (   ) 3 en spaces ( ) – not supported in IE
  2. (   ) 3 em spaces ( ) – not supported in IE
  3. (   ) 3 thin spaces ( ) – not supported in IE
  4. (   ) 3 non breaking spaces ( )
  5. (‍‍‍) 3 zero width joiners (‍) – not supported in IE 6
  6. (‌‌‌) 3 zero width non-joiners (‌) – not supported in IE 6

Basic Rules

Don’t use spaces to control indentation. Indentation should be controlled by CSS.

If you need to control spaces between specific words in a body of text, you can use the em spaces, en spaces, or thin spaces.

Don’t use two spaces after a period— this is a left-over habit from typewriting. You should carefully review any text your are given for this problem. This was a common convention, and was learned by anyone who learned to type previous to 1995. If you are guilty of this, it is time to stop.

The non-breaking space is used to prevent to words from being separated by text-wrapping. This can be very handy for careful crafting of headlines and titles where it is important to keep two words together for readability and meaning.

The zero width joiner and zero width non-joiner are commonly used in for setting type in Persian or Arabic, but they could also come in handy in instances where you don’t want a visual space, but there is a need to retain two separate words.

Update: Joe Clark brings the following to my attention: “You can type as many spaces as you want after sentence-ending punctuation on the Web, as they are all reduced to a single space due to rules on whitespace collapse.

(Tip #2: Hyphens and Dashes and #3: Emphasis now available)

(Digg this article)

posted by John Dilworth on Thursday, Oct 19, 2006
tagged with typography