Punctuation

Periods

A period signals to a speaker or reader that a sentence has come to an end, and it assists users in visually breaking up content.

• Do not use periods:
  • For the label of a UI element. For example, for the label associated with a checkbox, text box, or button.
  • For the title of a UI element. For example, for the title of a banner, warning, broadcast message, dialog box, or modal.
• Use periods:
  • For additional help text. For example, for text in banners, warnings, and for the extra description below a checkbox or text box.

Follow these additional guidelines:

Use periods with links that are full sentences.

Do	Don’t
Mention someone to notify them. Learn more. This is another sentence.	Mention someone to notify them. More.

Use a period after every bullet point that is a sentence.

Do	Don’t
This is a complete sentence. This is also a complete sentence.	This is a complete sentence, it needs a period This is also a complete sentence, it also needs a period

Use a period after every bullet point that completes the introductory stem.

Do	Don’t
This is an introductory stem: Completed by this sentence. Also completed by this sentence.	This is an introductory stem: Completed by this sentence Also completed by this sentence

Use no punctuation after bullets that are not sentences and do not complete the stem.

Do	Don’t
These are just words in a list: One item Two item	These are just words in a list: One item. Two item.

Use all sentences or all fragments in a bulleted list, not a mixture.

Do	Don’t
Consistency is key here. Item. Don’t mix sentences and individual items in a list.	Consistency is key here. Item Don’t mix sentences and individual items in a list.

Numbers

Use “1, 2, 3” instead of “one, two, three” for numbers. One exception is when mixing uses of numbers, such as “Enter two 3s.”

Do	Don’t
3 new commits	Three new commits
Enter two 3s.	Enter 2 3s.

Punctuation overview

Use punctuation to add clarity or be grammatically correct.

Punctuation mark	Copy and paste	HTML entity	Description
Period	.		Use in lists or modals with full and multiple sentences, and any sentence followed by a link or inline code. Place inside quotation marks, unless you’re telling the reader what to enter and it’s ambiguous whether to include the period.
Comma	,		Place inside quotation marks. Use a serial comma in lists of three or more terms.
Exclamation point	!		Avoid exclamation points, as they tend to come across as shouting. Some exceptions include greetings or congratulatory messages.
Colon	:	:	Omit from form labels.
Apostrophe	’	’	Use for contractions (I’m, you’re, ’89) and to show possession. To show possession, add an ’s to all singular common nouns and names, even if they already end in an s: “Look into this worker process’s log.” For singular proper names ending in s, use only an apostrophe: “James’ commits.” For plurals of a single letter, add an ’s: “Dot your i’s and cross your t’s.” Omit for decades or acronyms: “the 1990s”, “MRs.”
Quotation marks	“ ” ‘ ’	“ ” ‘ ’	Use proper quotation marks (also known as smart quotes, curly quotes, or typographer’s quotes) for quotes. Single quotation marks are used for quotes inside of quotes. The right single quotation mark symbol is also used for apostrophes. Don’t use primes, straight quotes, or free-standing accents for quotation marks.
Straight quotes and accents	" ' ` ´		Don’t use straight quotes or free-standing accents for primes or quotation marks. Proper typography never uses straight quotes. They are left over from the age of typewriters, and their only modern use is for code.
Ellipsis	…	…	Use to indicate an action in progress (“Downloading…”), incomplete or truncated text, or the action will require additional input from the user, for example, in a button label. No space before the ellipsis.
Chevrons	« » ‹ › < >	&#171; &#187; &#8249; &#8250; &lt; &gt;	Omit from links or buttons that open another page or move to the next or previous step in a process. Also known as angle brackets, angular quote brackets, or guillemets. We use icons in place of written chevrons.
Em dash	—	&mdash;	Avoid using dashes to separate text. If you must use dashes for this purpose — like this — use an em dash surrounded by spaces.
En dash	–	&ndash;	Use an en dash without spaces instead of a hyphen to indicate a range of values, such as numbers, times, and dates: “3–5 kg”, “8:00 AM–12:30 PM”, “10–17 Jan”
Hyphen	-		Use to represent negative numbers, or to avoid ambiguity in adjective-noun or noun-participle pairs. Example: “anti-inflammatory”; “5-mile walk.” Omit in commonly understood terms and adverbs that end in ly: “frontend”, “greatly improved performance.” Omit in the term “open source.”
Parentheses	( )		Use only to define acronyms or jargon: “Secure web connections are based on a technology called SSL (the secure sockets layer).” Avoid other uses, and instead rewrite the text or use dashes or commas to set off the information. If parentheses are required: If the parenthetical is a complete, independent sentence, place the period inside the parentheses; if not, the period goes outside.