Tip: Add white space with punctuation

Clever use of three punctuation marks can increase the readability of web content and other documents by increasing the space around text:

  • the humble full stop
  • dot points, also known as bullet points
  • the mighty em-dash.

Add white space, add white space. Meaning add white space to your web content. What can the poor web content writer do? Use certain punctuation marks.

Just to confuse you, white doesn't mean white, in this context. It means empty. With no stuff in it: no words, no pictures, no patterns. If the background of your web site is yellow, white means yellow. If the background colour is black, white means black. Got it?

Some punctuation marks add white space, at least that's how humans perceive them. Not colons: or semi-colons; they just add to the clutter. Not even commas, because the meaning of a comma requires a teeny tiny bit of subconscious analysis.

We perceive full stops as white space, because one tiny dot is topped by emptiness and followed by emptiness. (Hint: short sentences rule.) It's all very zen.

Similarly, dot points provide white space. (Short list items heighten the effect.)

Now we come to the em-dash: the big long dash. White space is yet another reason for getting your head around the right uses of the hyphen, the en-dash (a dash as wide as the letter n) and the em-dash (a dash as wide as the letter m).

hyphen, em-dash, en-dash

The em-dash is my friend, says Cathy Curtis:

That little horizontal line is one of the most useful forms of punctuation on the web. Commas, semicolons and colons don't do a good job of visually breaking up information, and they're hard to see on the screen. Parentheses have to be used carefully, because the words they enclose are understood to be less important than the rest of the sentence.

But the mighty em-dash is easy to see, and democratic in the way it treats words on either side of it. 

No need to add space on each side of an em-dash. (One possible exception: when publishing a book on Kindle.)

Image (c) www.ilovetypography.com


Leave a comment: