Typography

Font Stack

Vocabulary

Font Stack

Syntax

Headings all make use of Arial Rounded MT Bold (which is the tortured cousin of Gotham Round) first, then Helvetica Rounded. The fallback fonts for headings are Arial, and Sans-serif. For Paragraph text we use the standard sans-serif font stack which begins with Arial. This ensure optimal readability for text in our emails. It looks like this for headings: font-family: Arial Rounded MT Bold, Helvetica Rounded, Arial, sans-serif; and like this for paragraph text: font-family: Arial, Helvetica Neue, Helvetica, sans-serif;

Semantics

We use this font stack because it provides the optimal level of readability and provides a bit of brand reinforcement.

Headings

Vocabulary

Headings

Syntax

We use headings to emphasize the most important ideas in an email. We do not use them for long sentences or paragraphs. They should be easy to read and help users quickly identify if an email or section of content is something they are interested in reading. Headings are also ranked in order of importance. So an H1 is should represent the most important item in an email. An H6 the opposite.

Semantics

Headings in emails allow us to add rhythm and order to our content, especially if an email contains a handful of ideas it needs to communicate. We use headings to greet our readers or identify sections of content.

HTML

<h1 class="esg-h1">h1. Heading</h1>
<h2 class="esg-h2">h2. Heading</h2>
<h3 class="esg-h3">h3. Heading</h3>
<h4 class="esg-h4">h4. Heading</h4>
<h5 class="esg-h5">h5. Heading</h5>
<h6 class="esg-h6">h6. Heading</h6>

H1

Vocabulary

Heading 1, H1

Syntax

Use H1s in greetings of emails (Hey Mike!) or to set the context of the email. You should never have more than a single H1 in an email.

Semantics

H1s are going to be the largest sized type in an email layout. The size and boldness of the element will draw the user’s eye and attention.

H2

Vocabulary

Heading 2, H2

Syntax

Use H2s to label a section content that contains multiple sub sections. While you can use multiple H2s inside of an email, it should be dependant upon having more than one section of content you need to label. H2’s should sparingly be used for entire sentences.

Semantics

H2s are going to be the second largest sized type in the email layout. While they are not as large as H1s, their size and boldness will still command the user eye and attention. If you use an H2 it should mean that there are going to be multiple sections of content that relate back to it.

H3

Vocabulary

Heading 3, H3

Syntax

Use H3s to provide insight into blocks of content like paragraphs, lists, etc. H3s will likely be the most commonly used form of heading in an email.

Semantics

H3s are going to be closer in size to our email paragraph styles because that is what they are visually meant to pair with. Because of that, they will work well to provide readers a visual anchor point for written text.

H4

Vocabulary

Heading 4, H4

Syntax

Use H4s within content areas. Unlike an H3, the H4 should be used when you need to break down a section of content, and it doesn't make sense to create an entirely new section. You should never use an H4 as a heading for an entire section. H4 should be used when an H3 serves at the header for a section of content and you need to organize the content further. Do not use H4s to bold content inline.

Semantics

H4s are the exact same size as paragraph text. They are this way so that they lend themselves to organizing the lowest level of content. When you use an H4 is means you have a heading for the main section of content already, and you need to provide another level of organization.

Paragraph

Vocabulary

Paragraph, p, p tag

Syntax

We use paragraph tags for words, sentences, paragraphs. This is basically the bread and butter of communication design. A good rule of thumb, if you aren’t sure if it should be a headline, it probably works inside a paragraph.

Semantics

We use paragraph tags to house paragraphs. Pretty simple. The size and color of our paragraph tags is setup to maintain a certain level of legibility and ease.

HTML

<p class="esg-p">Treehouse is an online school that teaches you code</p>

Bold

Vocabulary

Paragraph, p, p tag

Syntax

Bold or Strong tags should be used to make body text stand out.

Semantics

We use bold tags to emphasize text or section content so that it's easier to parse.

HTML

<p class="esg-p"><span class="esg-bold">Treehouse</span> is an online school that teaches you code</p>

Italic

Vocabulary

Italic, Italics, Text Emphasis, em tag

Syntax

Italic text should be used in the contents of another body content type, whether that be headings or paragraph tags. It should not be used on it’s own or outside of those contexts.

Semantics

We use italic text and emphasis tags to do just that. Emphasize.

HTML

<p class="esg-p"><span class="esg-italic">Treehouse</span> is an online school that teaches you code</p>