Typography

All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

Device	Extra small	Small	Medium	Large	Extra large
Base font	16px	17px	18px	19px	20px
`<h1>`	32px	34px	36px	38px	40px
`<h2>`	28px	29px	31.5px	33.25px	35px
`<h3>`	24px	25.5px	27px	28.5px	30px
`<h4>`	20px	21.25px	22.5px	23.75px	25px
`<h5>`	18px	19.125px	20.25px	21.375px	22.5px
`<h6>`	16px	17px	18px	19px	20px
`<small>`	14px	14.875px	15.75px	16.625px	17.5px

Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Inside a <hgroup> or a <div class="headings"> all margin-bottom are collapsed and the :last-child is muted.

Heading 2

Subtitle for heading 2

<hgroup>
  <h2>Heading 2</h2>
  <p>Subtitle for heading 2</p>
</hgroup>

Inline text elements:

Abbr. abbr

Bold strong b

Italic i em cite

~~Deleted~~ del

Inserted ins

Ctrl + S kbd

Highlighted mark

~~Strikethrough~~ s

Small small

Text _Sub sub

Text ^Sup sup

Underline u

Links come with .secondary and .contrast styles.

ℹ️ These classes are not available in the class-less version.

Primary
Secondary
Contrast

<a href="#">Primary</a>
<a href="#" class="secondary">Secondary</a>
<a href="#" class="contrast">Contrast</a>

Blockquote:

"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia

<blockquote>
  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
  Nam at dui sit amet ipsum cursus ornare."
  <footer>
    <cite>- Phasellus eget lacinia</cite>
  </footer>
</blockquote>