Punctuation

Ampersand (&)

Avoid using unless there's a very compelling reason. Generally used in logos or expressions that are so common they look odd without them (example: rock & roll).

 

Apostrophes and quotation marks

Use the typographic characters (the curly ones, also called smart quotes) for apostrophes and quotation marks.

MacOS keyboard shortcuts

Windows keyboard shortcuts

Option + ] for a left single quote ‘

Shift+ Option + ] for a right single quote ’

Option + [ for a left double quote “

Shift + Option + [ for a right double quote ”

ALT + 0145 for single left quote  ‘

ALT + 0146 for single right quote ’

ALT + 0147 for a left double quote “

ALT + 0148 for a right double quote ”

 

Commas

Use serial commas (also called Oxford commas). Example: I like to eat apple, oranges, and plums.

 

Contractions

A contraction combines two words ("don't," "can't," and "isn't."). Use contractions in most cases, especially in contexts where the tone is more casual or playful.

 

Hyphens and dashes

Type

When to use

Hyphen (-)

To create a single idea out of two or more words.
No space before or after.

En dash (–)

For ranges, like numbers (e.g., 1–9) and dates.
No space before or after.

Em dash (—)

To set related — but separate — thoughts off from each other.
Add a space on either side.

MacOS keyboard shortcuts

Windows keyboard shortcuts

Option + Dash for an en dash (–)

Option + Shift + Dash for an em dash (—)

ALT + 0150 for an en dash (–)

ALT + 0151 for an em dash (—)

 

Ellipses

Ellipses help telegraph to people that an action they want to execute requires another step before it's completed. The visual cue offered by an ellipsis allows people to explore your software without fear of taking an action prematurely.

To decide whether a button, link, or menu item needs an ellipses, think about what happens next.

An additional step is required to complete that specific action.

Hint: Often, the action label contains a verb.

 

Examples:

  • "Print..."
  • "Save page as..."

Displays another window or page from which users can select a variety of actions.

Examples:

  • “Learn more” should never have an ellipsis.
  • A button that takes users to their Settings.
    A settings menu label doesn't require more information or another action. It only takes users to about:preferences, which offers more actions.

Body copy: In general, do not use ellipses in body copy. They might be helpful for stylistic reasons in rare instances, like in a major release message. If ellipses appear in the middle of a sentence, include a space before and after them.

 

End punctation

At the end of a sentence in normal body copy. Usually it's a period.

At the end of a title, button label, checkbox or radio button label, tooltip, text link (unless the link ends a sentence), or navigation element.

In the rare occasion that the text in question contains more than one sentence, use end punctuation.