${require('./_head.html') title="Typography" description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports." canonical="typography.html" } ${require('./_nav.html')}
${require('./_sidebar.html') active="typography-link"}

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 27.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>
  <h3>Subtitle for heading 2</h3>
</hgroup>
<div class="headings">
  <h2>Heading 2</h2>
  <h3>Subtitle for heading 2</h3>
</div>

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
${require('./_footer.html')}