Grammar and mechanics

Don’t use apostrophes (') in place of quotation marks.

When pluralizing singular and plural words, add apostrophe-"s" when there’s no "s" at the end. For plural nouns that end with "s," add only an apostrophe.

For any other specifics on possessive apostrophes, refer to the AP style handbook.

Use asterisks ( ) or "(required)*" to establish form fields as required. Don’t use asterisks to denote anything as optional.

Make sure to use the Spectrum asterisk icon that comes built in with the design components — not the text form of an asterisk within the label string.

Don’t use asterisks in running text or labels when parentheses or a tooltip would suffice.

Don’t use the at sign (@) in place of the word "at."

Don’t use brackets ([] {}) in UI copy or running sentences. Instead, use parentheses ( ( ) ).

Use colons (:) when introducing lists of items or steps in a workflow. The lists and steps should be introduced on new lines.

Don’t use a colon at the end of a label for a form field. The design component should already communicate the relationship between the label and the input.

When listing things, use the serial comma (Oxford comma). This means providing a comma before the “and” when listing multiple items in a sentence (e.g., “Bacon, lettuce, and tomato”).

If you’re having to use a lot of commas in a sentence, consider whether you can split the sentence up with periods or em dashes.

Use ellipses (…) when truncating text in small spaces.

You can use them when communicating progress of a process, but don’t use them on buttons to communicate that there’s a page or action beyond the button.

When using ellipses on More menus, don’t use it with the word "More" and make sure to use the Unicode character for the ellipses.

Don’t use emoji in any interface language.

Emoji often convey tones that may be inappropriate in certain contexts. They’re also difficult to localize, and tend to diminish readability and comprehension.

Don’t use an equals sign (=) in place of the word "equals," and don’t use this as shorthand for "meaning," "means,” or "is."

Don’t use exclamation marks (!) since they are difficult to localize and easy to overuse.

Use the greater than and less than symbols (><) to navigate within a hierarchical structure (e.g., breadcrumbs, file structures). Don’t use them to communicate steps in a flow — use bulleted or numbered lists instead.

When using the symbols in the appropriate places, use chevron icons instead of the text forms.

Don’t use the greater than and less than symbols to replace the words "greater than" or "less than." And don’t use them to accent or decorate a word.

Use em dashes (—) to separate distinct but related thoughts. Include spaces before and after. (e.g., "Shaken — not stirred").

Use en dashes (–) for number ranges and lengths of time, with no spaces before or after (e.g., "Repeat steps 1–4"). Don’t use them when paired with the words “from” or “between.”

Use hyphens (-) between words, and with no spaces before or after (e.g., "A once-in-a-lifetime opportunity").

Don’t use the minus sign (-) in place of the word "minus."

Use parentheses ( ( ) ) to provide supplementary context.

Don’t use parentheses in simple tooltips. In rich tooltips, they can indicate keyboard shortcuts. Don’t use brackets in place of parentheses.

In the majority of cases, don’t use periods (.) or any other punctuation on the end of bulleted or numbered lists.

If one list item is a complete sentence, then it would end with a period (or question mark). In this case, use periods at the end of all items.

Don’t use periods at the end of short, direct phrases within UI components (e.g., toasts, notifications).

Don’t use periods in headers or buttons.

Don’t use plus signs (+) in place of the word "and," bullet points, or as any other design elements.

Don’t use plus signs when indicating there is more of something available.

When writing titles, questions marks (?) are the only acceptable punctuation mark to include.

Avoid using question marks to ask rhetorical questions.

Use quotation marks (“”) only when quoting someone’s words.

Don’t use them when directly referring to interface elements. See the Typography page for guidance on using bold text to do so.

Don’t use semicolons (;). If you need a break in a sentence, use periods, commas, or occasionally em dashes.

While semicolons are useful for connecting two related thoughts, they add a formal and academic tone to text and have shown to negatively affect user comprehension in UX writing.

Don’t use backward slashes, and don’t use a forward slash ( / ) to combine words or ideas. This comes across as noncommittal, and affects comprehension and clarity. Instead, choose “and” or “or.” Don’t use “and/or.”

Don’t use the vertical bar (|) in running text. Avoid using it to divide information in places other than webpage titles tags and footer info. It shouldn’t be used for purely stylistic reasons.

When you use the vertical bar, use the icon and not the text form. Additionally, make sure you change its name in JAWS to “Pause” for proper accessibility.