Here's an overview of our base typographic styles.
Waterfall
This is the standard typographic scale we use.
A Big Header
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio explicabo a officia reiciendis consectetur unde cum natus expedita corrupti voluptatem culpa molestiae suscipit voluptatibus enim accusantium eligendi iure similique ratione.
A small paragraph
<h1 class="big">A Big Header</h1>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p>Lorem ipsum...</p>
<p class="small">A small paragraph</p>
Headers
There are a number of different styles and treatments for typographic elements, such as small header segments.
Header 1
with a Line Break And a <small> tag
Lorem ipsum dolor sit amet...
Header 2
with a Line Break And a <small> tag
Lorem ipsum dolor sit amet...
Header 3
with a Line Break And a <small> tag
Lorem ipsum dolor sit amet...
Header 4
with a Line Break And a <small> tag
Lorem ipsum dolor sit amet...
Header 5
with a Line Break And a <small> tag
Lorem ipsum dolor sit amet...
Header 6
with a Line Break And a <small> tag
Lorem ipsum dolor sit amet...
<h1>Header 1 <small>Small Header Text</small></h1>
<h2>Header 2 <small>Small Header Text</small></h2>
<h3>Header 3 <small>Small Header Text</small></h3>
<h4>Header 4 <small>Small Header Text</small></h4>
<h5>Header 5 <small>Small Header Text</small></h5>
<h6>Header 6 <small>Small Header Text</small></h6>
Links
By default links are highlighted with our secondary color and have simple tranisition between states.
This is a Header 1 Link
This is a Header 2 Link
This is a Header 3 Link
This is an example of a link within a paragraph.
<h1><a href="#">This is a Header 1 Link</a></h1>
<h2><a href="#">This is a Header 2 Link</a></h2>
<h3><a href="#">This is a Header 3 Link</a></h3>
<p>This is an example of a <a href="#">link</a> within a paragraph.</p>