Do you know when to use the ampersand?

Last updated by Tom Bui [SSW] 4 months ago.See history

Crafting content for the web means a keen focus on readability and accessibility. One common pitfall is the indiscriminate use of the ampersand (&) instead of the word "and."

There are cases where the ampersand hurts, and others where it helps. For certain brand names or UI elements the ampersand can be acceptable or even required. However, avoiding the ampersand leads to user-friendly and readable content in most cases.

Why you should write "and"

  • Readability: The word "and" is universally recognized and aids reading comprehension.
  • Scanning: The & symbol tends to stand out in the middle of other text. Since web users scan instead of reading, the & often draws the eye more than your actual content does.
  • Accessibility: The ampersand can be harder to localize than the word "and". Sometimes an ampersand is part of a proper noun (e.g. H&M or Dolce & Gabbana) so it can't just be translated in a single way.

When to use "&"

  • Space saving: Character count can quickly add up if you're using "and". An ampersand can be a great tool for making the most of limited space when needed (e.g. menu items or large headings).
  • Note taking: Writing "&" is just quicker and easier!
  • Informal tone: When it comes to intentional tone of voice, the ampersand can help create content with a more casual tone.
We open source. Powered by GitHub