Typography

This is a guide to the basic HTML markup and typographic styles available for use on official Purdue websites.

Learn more about our fonts.

Headings

First-level header, h1

<h1>First-level header, h1</h1>

Second-level header, h2

<h2>Second-level header, h2</h2>

Third-level header, h3

<h3>Third-level header, h3</h3>

Fourth-level header, h4

<h4>Fourth-level header, h4</h4>
Fifth-level header, h5
<h5>Fifth-level header, h5</h5>
Sixth-level header, h6
<h6>Sixth-level header, h6</h6>

Blockquotes

<aside class="highlight">
    <h3 class="highlight__title">Joe Tiller</h3>
    <p class="highlight__content">"We're here to win a championship. We've won in the past and we will win again in the future."</p>
</aside>

"That's one small step for man, one giant leap for mankind."

Neil Armstrong

<blockquote class="quote">
    <p class="quote__content">"That's one small step for man, one giant leap for mankind."</p>
    <p class="quote__source">Neil Armstrong</p>
</blockquote>

"You wanna know how good bacon is? To improve other food, they wrap it in bacon."

Jim Gaffigan

<blockquote class="quote quote-mark">
    <p class="quote__content">"You wanna know how good bacon is? To improve other food, they wrap it in bacon."</p>
    <p class="quote__source">Jim Gaffigan</p>
</blockquote>