Punctuation

Usage

These best-practice recommendations cover some of the most common UI scenarios and use cases. For additional guidance, we also have recommendations for the use of specific punctuation marks.

Buttons

Avoid using punctuation in button labels.

Do not use punctuation to create icons on buttons (for example, do not use a plus sign "+"). Instead, refer to PatternFly's icons page for any icons you place on buttons.

Headings and titles

Headings and titles can include punctuation, but should not end in punctuation.

Before	After
Style, voice, and tone.	Style, voice, and tone
Getting started with PatternFly!	Getting started with PatternFly

The exception for this rule is a question mark (?), when it is contextually important. For example, in a confirmation dialog, it is important that users understand what action they are about to take. A valid heading may include a question mark, such as "Delete service account?".

UI text references

When referring to an element or text in the UI, don't use quotation marks or italics. Those should be reserved for quotes and emphasis, respectively. Instead, use bold text.

Before	After
Add user to the “Group title” team	Add user to the Group title team

Punctuation marks

Follow these general guidelines when using punctuation marks anywhere in your UI.

Ampersand (&)

An ampersand is a shorthand symbol for "and."

For clarity, avoid using ampersands. Use "and" instead.

The exception to this is within graphics or when you have particularly limited space in the UI.

Colon (:) and semicolon (;)

Colon

A colon separates parts of a sentence.

Guideline	Examples
Use a colon to introduce a list or a series.	"The product improved in 3 categories: accessibility, ease of use, and functions."
Use a colon after a note label.	"Note: By the way, this note may be good to know." "Tip: Here's a helpful tip for you."
Use a colon between 2 independent clauses to elaborate or emphasize a relationship between the clauses.* * This usage is typically interchangeable with an em dash.	"Plan the configuration carefully: the initial settings are difficult to change after you add user accounts."

Semicolon

A semicolon indicates a firm break or pause in a sentence.

Guideline	Examples
Use a semicolon to connect two closely related independent clauses.	"I love running in the morning; it wakes me up."
You can also use a semicolon instead of a comma to separate long list items for extra clarity.	"Every morning, I enjoy eating toast, bacon, and eggs; reading a book; and relaxing on the porch."

If you're tempted to use a semicolon in the UI, try breaking up the sentence and cutting down on your words instead. This often leads to content that is more readable and clear.

Comma (,)

A comma indicates a break or pause in a sentence.

Guideline	Examples
Use a comma before a conjunction if it connects 2 independent clauses.	"Click Save, and type a file name."
Use a comma between items in a list of 3 or more words or phrases.	"A message window describes an error, explains how to correct it, and provides the controls to correct it."
Use the Oxford comma, which is placed before the conjunction in a list of 3 or more words or phrases.	"I like to run, swim, and hike."
Use commas after introductory words and phrases.	"First, create a project." "After you remove the lid, proceed to step 4."
Use commas to separate nonrestrictive clauses (clauses that provide additional, nonessential information).	"The Recovery log, which is generated automatically, shows the cause of the problem."

Ellipsis (...)

An ellipsis is used when information is omitted from a sentence or phrase.

In a UI, ellipses are most commonly used for truncating text. Refer to our truncation guidelines for these scenarios.

Dashes and hyphens

Em dash (—)

An em dash is used to add emphasis to a phrase or sentence. You can also use an em dash to provide additional information or specification in the middle of a sentence. For example:

"Good design is not about you—it’s about the user."
"I like drinking something hot—coffee, tea, or cocoa—during my morning meetings."

En dash (–)

To separate numbers in a series, use an en dash ( – ). For example:

"We plan on having 100–150 attendees."

Hyphen (-)

Use a hyphen ( - ) if it's part of a term (such as "walk-through") or someone's name (such as "Mary-Jane").

You should also use a hyphen for a compound adjective that comes before the noun it modifies, but omit the hyphen if the first adjective ends in "-ly." For example:

"I like when my documentation is up to date."
"I write up-to-date documentation."
"He is a highly talented writer."
"She is a high-quality job candidate."

For most prefixes, you should not use a hyphen. However, there are a few scenarios where using a hyphen with a prefix is appropriate.

Guideline	Examples
Use a prefix hyphen to distinguish the word from a homonym.	"co-op" "re-create"
Use a prefix hyphen when the root word is capitalized or is a numeral.	"pre-2000"
Use a prefix hyphen when the root word consists of more than one word.	"non-English-speaking citizens" "pre-latency-period transaction"
Use a prefix hyphen when identical letters would be next to each other.	"co-opt" "de-emphasize"
Use a prefix hyphen when the prefix is "self-", "all-", or "ex-" (meaning formerly.)

With caution, there are some instances where you can use a prefix hyphen when the prefix is "non":

When it precedes multiple words. For example:
- "non-Red Hatter"
When omitting a hyphen would impede readability. For example:
- "non-native"

If you're unsure about the use of a hyphen, refer to Merriam-Webster's online dictionary.

Exclamation mark (!)

An exclamation mark is used to denote excitement.

Use exclamations marks sparingly. Don’t use one to generate excitement; only use an exclamation mark if the user is actually experiencing something exciting. You can also use an exclamation mark for something cautionary, like “Stop!” or “Watch out!”

To more accurately capture human expression, use an exclamation mark after just a few words, not after a long sentence.

Before	After
Congratulations on creating an account!	Congratulations! You created an account.

Parentheses ( )

Parentheses are used to offer more context to a term or phrase.

Don't	Do
Do not use parentheses to indicate a possible plural of something, like "account(s)." When a user can either select one thing or multiple things, use the plural form.	Use parentheses to offer a description or short example.

View source on GitHub