9Typography

  • Primary font: Avenir Next
  • Fancy font: Last Paradise

9.1Headers

Header styles for H1 through H6 elements.

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!
Forget it, Donny, you’re out of your element!
Show Markup

<h1>Forget it, Donny, you&rsquo;re out of your element!</h1>
<h2>Forget it, Donny, you&rsquo;re out of your element!</h2>
<h3>Forget it, Donny, you&rsquo;re out of your element!</h3>
<h4>Forget it, Donny, you&rsquo;re out of your element!</h4>
<h5>Forget it, Donny, you&rsquo;re out of your element!</h5>
<h6>Forget it, Donny, you&rsquo;re out of your element!</h6>

9.2Paragraphs

Default body copy styles for a P element.

Look, let me explain something to you. I’m not Mr. Lebowski. You’re Mr. Lebowski. I’m the Dude. So that’s what you call me. That, or His Dudeness … Duderor … El Duderino, if, you know, you’re not into the whole brevity thing.

Show Markup

<p>Look, let me explain something to you. I&rsquo;m not Mr. Lebowski.
You&rsquo;re Mr. Lebowski. I&rsquo;m the Dude. So that&rsquo;s what you call
me. That, or His Dudeness &hellip; Duderor &hellip; El Duderino, if, you
know, you&rsquo;re not into the whole brevity thing.</p>

9.3Small header segments

Small header styles for H1 through H6 elements.

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!
Forget it, Donny, you’re out of your element!
Show Markup

<h1>Forget it, Donny, <small>you&rsquo;re out of your element!</small></h1>
<h2>Forget it, Donny, <small>you&rsquo;re out of your element!</small></h2>
<h3>Forget it, Donny, <small>you&rsquo;re out of your element!</small></h3>
<h4>Forget it, Donny, <small>you&rsquo;re out of your element!</small></h4>
<h5>Forget it, Donny, <small>you&rsquo;re out of your element!</small></h5>
<h6>Forget it, Donny, <small>you&rsquo;re out of your element!</small></h6>

9.4Subheaders

Tweaks to Foundation subheaders.

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!

Forget it, Donny, you’re out of your element!
Forget it, Donny, you’re out of your element!
Show Markup

<h1 class="subheader">Forget it, Donny, you&rsquo;re out of your element!</h1>
<h2 class="subheader">Forget it, Donny, you&rsquo;re out of your element!</h2>
<h3 class="subheader">Forget it, Donny, you&rsquo;re out of your element!</h3>
<h4 class="subheader">Forget it, Donny, you&rsquo;re out of your element!</h4>
<h5 class="subheader">Forget it, Donny, you&rsquo;re out of your element!</h5>
<h6 class="subheader">Forget it, Donny, you&rsquo;re out of your element!</h6>

9.5Accessibility

  • Every page should have a first-level heading
  • Proper hierarchy of all headings should be preserved (HeadingsMap chrome extension is useful for testing this)