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. |
|
En dash (–) |
For ranges, like numbers (e.g., 1–9) and dates. |
|
Em dash (—) |
To set related — but separate — thoughts off from each other. |
|
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.
Most of the time, you won't use end punctuation in things like titles, buttons, checkbox or radio labels, bulleted lists, tooltips, form field error text, toast messages, or text links (unless the link ends a sentence).
In the rare occasion that the text in question contains more than one sentence, use end punctuation.