Grammar and mechanics

Don’t use ampersands (&) in UI copy. Instead, use the word “and.”

Ampersands aren’t as accessible for people using screen readers. They also bring attention to the conjunction, which is the least important part of the sentence.

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 (also known as the Oxford comma). This means providing a comma before the word “and” when listing multiple items in a sentence.

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.

In general, use ellipses (…) when truncating text in small spaces.

Use an ellipsis at the end of the text to communicate the progress of something that is in process, such as a waiting or loading state.

Don’t use an ellipsis in a call-to-action on a button to communicate that there’s a page or action beyond the button.

For hint text, if an action starts a process, use an ellipsis at the end of the text (e.g., “Add names or email addresses…”).

For menu items, adding an ellipsis at the end of the menu item will depend on if your product is using a native (OS-level) pattern or not. For a native menu that your product is adding to, defer to the native pattern. For a menu that doesn’t follow a native pattern, only prompt text (ghost text) should use an ellipsis. A menu item does not need an ellipsis, even if the item is an action.

If you need to directly refer to a UI element that has copy that contains an ellipsis (e.g., “Find…”) and can’t write around it, drop the ellipsis before the mention of the element (e.g., “Use Find to search the database"). If you’re referring to the element at the end of a sentence, you can leave the ellipsis (e.g., “Search the database with Find…”).

When using an ellipsis on a More menu, don’t use it as part of a string, and make sure to use the appropriate icon.

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.

When communicating navigation, such as in breadcrumbs, use the "chevron" icon built into the component, not the greater than symbol.

Don’t use the greater than and less than symbols to communicate steps in a flow — use bulleted or numbered lists instead.

Don’t use these 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 the em dash.

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

When needing to show gaps in data in a table, use an en dash to represent null, unavailable, or inapplicable values.

Use hyphens (-) between words, and with no spaces before or after the hyphen.

Don’t use the minus sign (-) in place of the word “minus,” “without,” “less,” “negative,” or other words related to subtraction.

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, use the words “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 or decorative purposes when blank space between items is sufficient.

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