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.
Emojis
Use emojis on mobile (iOS and Android) only — never on desktop. When used well, emojis can reinforce brand personality and add expressive warmth without adding copy weight. This aligns with our Playful voice attribute, which calls for language that's "light and expressive when the time is right, helping the web feel more human, personal, and fun."
Example: Shake your device to summarize this page in seconds. ⚡
- Use when the message is a welcome, discovery, or celebratory moment (see Playful and Fiery tones).
- The emoji should add warmth or emphasis.
- The context should be low-stakes and informal.
- Place the emoji at the end of the message — this is friendlier for screen readers, which announce emoji descriptions inline and can interrupt the flow of the message if placed mid-sentence
- Use an emoji that mirrors the icon used for the relevant feature in the UI, when possible. This helps users make the visual connection and find the feature in the menu. For example, the ⚡ lightning bolt in a message about the page summary feature echoes the bolt icon used in the menu.
- Use common, simple emojis that are immediately recognizable at body copy size.
- Don’t use when the message is an error, warning, permission request, or destructive action
- Don’t use on desktop.
- Don't use more than one emoji per message — it reads as noisy.
- Don't substitute an emoji for a word or punctuation mark. Emojis should complement copy, not replace it. Screen readers and users with visual impairments rely on complete, readable text.
- Don't use highly detailed emojis that are hard to read at small font sizes.
- Don't use an emoji without first checking it renders correctly the platform you’re working with: iOS or Android — not all emojis exist on both platforms.
- Don’t use an emoji without checking with the localization team, since emojis can have different (and sometimes offensive) meanings across cultures.
- Don't use an emoji without checking if it has sufficient contrast against the message surface color.
End punctuation
Use a period at the end of a complete sentence in body copy. This includes things like subheadings and descriptions.
Most of the time, you won't use end punctuation in things like titles, headlines, 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.