Writing guidelines

Consistent punctuation is important when writing UI copy. It influences the tone of the brand, as well as the reader’s flow of reading.

Ampersand (&)

We don’t use ampersand in sentences or titles. We spell out the word “and”.

  • Use ampersand when it’s part of a branded term (i.e. Engel & Völkers)
  • You may use ampersand for navigation labels where space is severely limited, and there are only 2 things that form part of the same category (i.e. Bed & breakfast)
  • Remember to maintain sentence case after the ampersand

Did you know:

  • Some screen reading and text-to-speech software and applications need the ampersand sign to be coded in a different way in HTML. You may not have control over that.
  • The symbol can be a distractor. It stands out as it is taller than most letters and is an unusual shape. Some users might not understand what it means.

🥳 BONUS CONTENT: Check out these helpful Readability Guidelines for clear info on the topic of ampersands.

Apostrophe (')

Use apostrophes to represent omitted letters or numbers:

  • Omitted letters (don’t, can’t, won’t)
  • Verb contractions (it’s, you’re, we’re, that’s)
  • Omitted numbers (’40s)

Use apostrophes to form possessives:

  • Singular nouns: add ’s, even if they end in s (buyer’s, process’s)
  • Plural nouns that don’t end in s: add ’s (women’s, men’s)
  • Plural nouns that end in s: add an apostrophe (agents’, brokers’)
  • Try to avoid forming the possessive form of the Huspy brand name, rather opt for “our” or “we”.

Be careful: 's is never used for the possessive form of it, or plurals.

Colon (:)

Use colons only to introduce lists, radio buttons, or checkboxes.

  • Avoid using colons in sentences.
  • Don’t capitalize the first word after the colon unless it’s a proper noun, or a list item.

Comma (,)

Always use the oxford comma (also known as the serial comma) in sentences. There should be a comma after every list item, unless you’re using a bulleted or numbered list.

  • Don’t use commas to separate bulleted or numbered list items.
  • If a sentence becomes too long, consider rewriting your message as two sentences.

Exclamation mark (!)

Try to avoid exclamation marks as much as possible.

  • Only use an exclamation mark for really, really exciting things.
  • Even then, limit it to one exclamation mark per page/screen.
  • Overuse of exclamation marks can make it seem like we are shouting, or being insincere.

Period (.)

Complete sentences should always end with a period.

  • In general, don’t use periods in interface copy unless it’s a full sentence description.

When to use periods:

✅ Complete sentences

✅ Body text, descriptions, and subtitles

✅ Help text under text boxes (form fields)

✅ Validation messages

❌ Top-level headings and titles

❌ Buttons

❌ Navigation menu items

❌ Radio button and checkbox text

❌ Hover/tooltip text

❌ Toast messages

❌ Placeholder copy (form input field)

Question mark (?)

When a person needs to make a decision, a question is appropriate.

  • Use questions sparingly. In general, people want us to give them answers.
  • Don’t use question marks if there is only one option available E.g. “Reset password”.