Typography

Headers & Subheads

H1 - Header Text

Size: 3.25em/65px
Weight: 100
Line-height: 1.1em/71.5px
Color: #444

Example

Header 1

Usage

h1 is used for headlines and usually only will appear once/section at the top of the section & less than 2 lines

<h1>Header 1</h1>
			      

H2 - Header Text

Size: 2em/40px
Weight: 300
Line-height: 1.1em/44px
Color: #444

Example

Header 2

Usage

h2 is used for section headers.

<h2>Header 2</h2>
			      

H3 - Header Text

Size: 1.4em/28px
Weight: 100
Line-height: 1.2em/33.6px
Color: #444

Example

Header 3

Usage

h3 is used for section headers.

<h3>Header 3</h3>
			      

H4 - Header Text

Size: 1em/20px
Weight: Light
Line-height: 1.1em/22px
Color: #444

Example

Header 4

Usage

h4 is used for section headers.

<h4>Header 4</h4>
			      

Paragraphs

Standard paragraphs

Size: 1em/20px
Weight: 300
Line-height: 1.4em/28px
Color: #444

Example

This is a standard pargraph.

Usage

p is used for standard paragraph text.

<p>This is a standard pargraph.</p>
			      

Large paragraphs - .large

Size: 1.15em/23px
Weight: 100
Line-height: 1.2em/27.6px
Color: #444

Example

This is a large paragraph.

Usage

.large is used for subhead copy in main sections where there is too much copy to use an h3

<p class="large">This is a large paragraph.</p>
			      

Small paragraphs - .small

Size: 0.85em/17px
Weight: 300
Line-height: 1.5em/25.5px
Color: #444

Example

This is a small paragraph.

Usage

.small is used for small bits of copy, terms of use, copyrights, and error messages.

<p class="small">This is a small paragraph.</p>
			      

Mini paragraphs - .mini

Size: 0.75em/15px
Weight: 300
Line-height: 1.1em/16.5px
Color: #444

Example

This is a mini paragraph.

Usage

.mini is used for mini-buttons, tool tips, and pills only.

<p class="mini">This is a mini paragraph.</p>
			      

Lists

Size: 1em/20px
Weight: 100
Line-height: 1.75em/35px
Color: #444

Example
  • List item
  • List item
  • List item

Usage

li is used anytime you need to use a bulleted list. Simple.

<ul>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>