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
For all Firefox content, use serial commas when three or more items are listed in a sentence (also called Oxford commas). For example, “Save bookmarks, history, and passwords when you sync accounts.”
Contractions
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 descriptive phrase out of two or more words. (e.g., "High-speed connection") |
|
En dash (–) |
For ranges, like numbers (e.g., "Items 1–9"). |
|
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 indicate that an action 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.
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.