Patternfly Logo

Punctuation

Ampersand (&)

Avoid using ampersands (&), and use "and" instead.

Referring to text in the UI

Use bold text (not quotation marks) when referring to an element or text in the UI.

BeforeAfter
Add user to the “Group title” teamAdd user to the Group title team

Buttons

  • Avoid punctuation on buttons.
  • Do not create icons on buttons using punctuation (for example, "+"). Instead, refer to PatternFly's icons page for any icons you place on buttons.

Commas

When a conjunction connects two independent clauses, a comma should precede it. Also put a comma before “and” if it’s the Oxford comma.

Examples:

  • I like to run, and I like to swim — A comma is needed before “and” because “and” connects two independent clauses.
  • I like to run and swim — A comma is not needed before “and” because “and” does not connect two independent clauses.
  • I like to run, swim, and hike — The Oxford comma is included before “and.”

Ellipses (...)

Ellipses (...) are commonly used when information is omitted. You might use ellipses when you cannot fit all words onto a line or when you remove less relevant information (like in a quote).

Before ellipsesAfter ellipses
They said, “For many reasons, I think the PatternFly community is great.”They said, “...I think the PatternFly community is great.”

Ellipses can also be used in more creative contexts to signify someone’s thoughts or speech, like a pause for thinking.

Example:

But I was just trying to...never mind, forget it.

Em dash, en dash, hyphen

Use an em dash (—) to add emphasis to the phrase or sentence following it. You can also use an em dash to provide additional information or specification in the middle of a sentence.

Examples:

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

Use an en dash ( – ) to separate numbers in a series.

Example: We plan on having 100–150 attendees.

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

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."

Examples:

  • 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.

Do NOT use a hyphen ( - ) for most prefixes, specifically the following:

  • auto- (autopopulate; autoloading)
  • Pre- (prerequisite)
  • Re- (recreate)
  • Sub- (submerge)

Exception: Use a hyphen ( - ) for prefixes when adding a modifer prefix like “non," such as "non-Red Hatter."

Unsure about hyphenation for other terms? Refer to Merriam-Webster's online dictionary

Exclamation mark

Use exclamation 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.

BeforeAfter
Congratulations on creating an account!Congratulations! You created an account.

Parallel structure

All items in a list or series should be of the same part of speech.

BeforeAfter
Remember these important tips: Write clearly; conduct research; spelling and grammar.Remember these important tips: Write clearly; conduct research; use correct spelling and grammar.

Parentheses

Do not use parentheses to indicate a possible plural of something, like "Account(s)." If a user can select one thing or multiple things, use the plural form.

Quotation marks

Use double quotation marks (“Example”) for quotes and article titles. Use single quotation marks (‘Example’) for quotes or article titles within double quotation marks.

Double quotation marks and single quotation marks are sometimes used interchangeably across various publications. In some contexts, they can mean the same thing. Double quotation marks are the standard in American English, and single quotation marks are usually the standard in British English.

But double and single quotation marks are not always interchangeable, particularly when you need to use quotation marks within quotation marks. In this case, single quotation marks are used inside of double quotation marks.

Examples:

  • An article title within a dialogue: Abi said, “I love the article Cat wrote. It’s called ‘Improving product design with an open source mindset,’ and it’s such a fun read.”
  • A quote within a dialogue: “I like Cat’s article too, Abi. My co-worker told me, ‘PatternFly has the best publication ever.’ That made me smile.”

Semicolon and colon

Use a colon to introduce a list or a series. You can also use it as a pause before introducing related information.

Use a semicolon to connect two closely related independent clauses. You can also use a semicolon instead of a comma to separate long list items for extra clarity.

Examples:

  • That leads me to my favorite hobby: running.
  • I love running in the morning; it wakes me up.
  • Every morning, I enjoy eating toast, bacon, and eggs; reading a book; and relaxing on the porch.

Note: If you're tempted to use a semicolon in the UI, try breaking up the sentence and cutting down on your words instead.


View source on GitHub