Design & UX
By Georgina Laidlaw

5 Common Punctuation Problems to Avoid

By Georgina Laidlaw

Poor punctuation: the other reason users don’t get your site.

For those working on interfaces, typos can seem like the biggest text-related issue you’ll face. Sadly, they’re not.

The partner in crime of the innocent typo is the punctuation error.

Punctuation is not a text effect. It has evolved over thousands of years to help us communicate, and that evolution continues.

So there are common punctuation errors that crop up again and again in web interfaces, and do much to confuse users. Here are the key problems.

1. Finishing punctuation on headings

Titles and headings shouldn’t have full stops. If the title or heading is a question, then yes, it gets a question mark. But otherwise, leave the stops and screamers (!) off.

Sounds simple; is strangely confusing. Here’s an example from Teambox.


I think that subhead is intended to be a single sentence, but the way it’s positioned over two lines makes it look as if one subhead has finishing punctuation and the other doesn’t. Not cool.

2. Weird bullets

Without wanting to point the finger, for some reason developers copying and pasting text someone else has written (in Word or Notepad/TextEdit, presumably) into HTML seem to revel in failing to mark up bullet lists as, well … bullet lists.

This is how we end up with bullets composed of text, like a dash (-) or the ever-popular colon-and-dash combo (:-).

Okay, so you might not be thrilled to have to publish a three-page Word-formatted bio for that hoity-toity board member who snubbed you at the last company Christmas party. But the About Us page isn’t the place to exact your revenge.

She doesn’t know HTML and you do, and it’ll take you three seconds to actually format that list properly so it takes the styles your designer has set for bullets that look like they’re meant to be on your website.

A P.S. here: don’t include semi-colons or any other crazy punctuation on the end of list items.

If the list items are complete sentences, give then capitals at the start and full stops at the end. If they’re not full sentences, lowercase the lot, and put a stop at the end of the last one only. Unless your house style guide says otherwise, that is.

3. Using dashes instead of commas (or parentheses, or colons)

If someone’s using more than two dashes every 50 words, you can be pretty sure they’re misusing them. The same goes for parentheses, semi-colons, and ellipses.

If you want to go editing the text, then knock yourself out, by all means. Here’s a good explanation of when and how to use dashes, and one for commas, and one for semi-colons.

If you don’t want to take the editing on, you could always send it back (with the links above perhaps!) and suggest the author or an editor take another look.


4. The greengrocer’s apostrophe

Named for the greengrocers who adorn their blackboards with messages like “Tomatoe’s $2”, this is an everyday typo, and one you should avoid.

The rules:

  • If it’s a plural, add an s.
  • If it’s possessive (or a contraction like “it’s”), add an apostrophe and an s.

End of story.

5. Ampersands in text

Ampersands are much-loved by designers and typographers, less so by readers.

An ampersand might wash in a heading, but it won’t in body text–-unless, that is, you use it consistently, everywhere in your text, instead of “and”.

If space isn’t an issue, spell out “and” every time. Why? Because convention says so. Restricting ampersand usage to a limited range of situations is as far as our language has evolved at this point.

If in doubt, don’t

Punctuation has a purpose, and that purpose is clear-cut. If you ask it to carry more than its fair share of the load, you can wind up in trouble.

An example? Sure. Back to the Teambox site. Here’s the signup call to action.

Teambox CTA

If you read the article I linked to above on dashes, you might think, well gosh darn, that Get started – free! button is just peachy. They’re using a dash to emphasise the fact that it’s free to get started. Excellent work, chaps!

Look a bit closer and you’ll spot a few problems here.

  • That’s not a dash. It’s a hyphen.
  • The heading says free and the button says free, but the subhead says $5 per user.

In that context, the use of a dash (or erroneous hyphen) to emphasize the word “free” only adds to the confusion. Is the basic package free but I have to pay for premium features? What about the 5 user thing? If I want to add a sixth basic-level user, do I have to pay? How much (assuming the $5 is for premium features)?

Don’t ask punctuation to solve your communications problems, or to clarify murky messages. Do use it to make an already fine point razor-sharp.

  • Daniel

    Excellent article…very good read

  • Anonymous

    Great article with some really useful info. Thanks for sharing.

  • Ted Swanson

    No comment on how there should be a comma in “Free, up to 5 users”? Right now that call to action reads like I’m about to release users into the wild, and can “unlock” an unlimited number of them for a mere $5.

    • Georgina

      :) Likewise, Ted. Thanks for pointing that out.

    • ralphm

      @Ted: even with a comma, it still reads awkwardly. I’d either go for “Up to 5 users free” or perhaps “Free—up to five users”.

  • CB

    What about a possessive on a noun that ends in an “s?” Is it “Thomas’s” or Thomas’?”

  • MJB

    Correct English English usage to form the possessive of a word that already ends in “s”, is normally to simply add an apostrophe – Thomas’ (and pronounced with only one “s”, not “Thomasis”). Arguably, you should do the same for any word that ends in a sibilant, including imported words used in a context of English text. I wrote ‘normally’, because I don’t doubt there are exceptions, as normally there are in English!
    Beware “it is” contracts to “it’s”, but the possessive pronoun is “its” (in the same way that “his” and “hers” does not require an apostrophe.
    But also be aware that correct usage differs between English-speaking countries – the article is scattered with commas that are completely superfluous according English grammars in England (for example, it is not normally necessary to use a comma in a list which is also separated by the word “and” – “X and Y and Z” and “X, Y and Z” are correct, but “X, and Y, and Z” is not).
    Correct usage varies geographically and over time (for spelling, grammar and punctuation), so it is wrong to think of English as a single homogeneous language; George Bernard Shaw once said that “England and America are two countries separated by a common language” – while intended facetiously, it is true to some extent of the entire Anglophone world.

  • MJB

    Yes Ted, if “Free up to 5 users” is a sentence, then the only candidate for a verb is the word “Free”, so pressing the blue button will set as many as 5 users free. If it is not a sentence, it is a fragment and therefore ambiguous, because it is not obvious of what it is a fragment.
    Perhaps the world’s quota of goodness is maintained by bringing about the sudden, untimely death of the writer of that Teambox text in return for all those new-found freedoms?
    I think it would actually be even funnier, if the internet were not so full of similar monstrous phrasings!

  • Anonymous

    MJB, the possessive apostrophe is mainly an aid to reading rather than pronunciation. The apostrophe at the end of Thomas’ tells a reader that what’s meant is “belonging to Thomas” but that can only be translated to speech by adding the neutral extra syllable: “Thomases”. That’s the same reason many people prefer to write Thomas’s, whether it’s wrong or inelegant or not. And don’t get me started on the Oxford comma, or trailing comma (See? They can’t even decide what it’s called). At SitePoint, we’re intensely aware that we deal with more than two countries separated by common use of the English language. It’s more like a dozen. Personally, I hope countries retain their linguistic idiosyncrasies – even if they don’t always make sense – but I suspect a new “correct usage” is evolving that amounts to a “global English”, or perhaps a “Web English”. As someone once put it, “English is the lingua franca of the web”.

  • ralphm

    I see the article hasn’t managed to impress on commenters the difference between a hyphen and a dash. Pity. I love the dash. If it helps, you can easily type the em dash by holding shift + option + hyphen as you press the hyphen key (Mac) or ctrl + alt + hyphen (PC). Similarly, you can type an en dash by just pressing the option/alt + hyphen.

    As an aside, I like the way several typos were sneakily weaved into the article to keep us on the ball. Nice work! I particularly loved the combination of en dash and hyphen to represent an em dash in the ampersands section (“text–-unless”). Very cute!

  • Anonymous

    Punctuation in a Header does also seem quite awful from a design perspective. The entire text is large and bold, while there is one single small dot at the end.

Get the latest in Design, once a week, for free.