Typography

A well developed hierarchy indicates to the user where to start reading and how to proceed. A typographic scale with a limited set of type sizes that work well together balances content and reading comfort across all devices.

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Body

The reader’s eye is going to be on the body copy far longer than anywhere else, so it’s really the work horse of the project. The body copy should make the reader’s job very easy.

Links

Within long text, links are one more type of focus point, and you should find a way to make them pop.

Lists

John
Paul
George
Ringo

Highlighting

Highlight text to bring attention to a word or an entire block of copy that spans multiple lines.

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

<!-- Body -->
<p>The reader’s eye is going to be on the body copy far longer than anywhere else, so it’s really the work horse of the project. The body copy should make the reader’s job very easy.</p>

<!-- Links -->
<p>Within long text, <a>links</a> are one more type of focus point, and you should find a way to make them <a>pop</a>.</p>

<!-- Lists -->
<ul>
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>

<!-- Highlighting -->
<p>Highlight text to bring attention to a <mark>word</mark> or an <mark>entire block of copy that spans multiple lines</mark>.</p>