Overview

Typography is a critical part of web design. The goals for text are to create a harmonious system that follows consistent rules, while also keeping considerations like accessibility in mind.

• By default, we start with a base font size of 16px. This is the browser default. All other font sizes, and really, all sizes in general, are based on this value. This is critical for accessibility. When a user changes their browser default to something else, the entire website will intelligently scale with it. To that end, the site’s sizing uses the rem unit.
• To achieve this goal, we use a framework called Typey. Typey provides the math to create a font system that is rhythmic, where font sizes and line-heights follow a harmonious pattern. As a Sass framework, Typey also provides us with mixins and functions to carry this approach throughout the site. For example, you can use a spacing mixin like @include margin(1 0) to add the exact amount of vertical spacing around an element that follows the pattern established by Typey.

Font stacks

OfferPad uses a sans-serif font stack for most type, with the exception being code and other elements where a monospace font stack is more appropriate.

The typeface we use specifically is Soleil.

Sans-serif

font-family: "Soleil", "Helvetica Neue", Helvetica, sans-serif;

Monospace

font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Headings

You can apply these styles to any text element by using the appropriate matching class. For example, use the class .u-h2 to emulate an h2 style.

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

Hero headings

These styles double the size of each heading class inside hero units and other similar patterns, for pronounced effects. Be mindful of their use in small devices.

<h1 class="c-hero-heading-1">Heading 1</h1>
<h2 class="c-hero-heading-2">Heading 2</h2>
<h3 class="c-hero-heading-3">Heading 3</h3>
<h4 class="c-hero-heading-4">Heading 4</h4>
<h5 class="c-hero-heading-5">Heading 5</h5>
<h6 class="c-hero-heading-6">Heading 6</h6>

Lead paragraph

Add the .u-para-lead class to a paragraph to help it stand out, especially in introductory contexts.

<p class="u-para-lead">Hey, I'm a lead paragraph. Check me out!</p>

Inline text

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>Here is some <code>inline code</code>.</p>

Blockquotes

As blockquotes can have additional uses besides their common form in text content, use .c-blockquote as a class for complete styling. It will increase the font size of child elements and add a border.

Add citations by wrapping them in a <footer> with class .c-blockquote__footer, and wrapping the citation source name with <cite>.

<blockquote class="c-blockquote">
    <p>Mollit do ipsum nisi eiusmod veniam dolore amet est amet officia laboris id irure nisi. Deserunt enim velit veniam velit qui eiusmod esse elit non do Lorem in anim.</p>
    <footer class="c-blockquote__footer">A person, <cite title="Title">Title</cite></footer>
</blockquote>

Lists

There are four types of lists available: unstyled, unordered, ordered, and description (definition) lists.

Unstyled lists

Unstyled lists, borrowed from Bootstrap, use the .u-list-unstyled class to remove padding and list-style from a list. This styling only applies to immediate child list items, so you’ll need to add the class to nested lists as well.

<ul class="u-list-unstyled">
    <li>List item 1</li>
    <li>List item 2
        <ul class="u-list-unstyled">
            <li>List item A</li>
            <li>List item B</li>
        </ul>
    </li>
    <li>List item 3</li>
</ul>

Unordered lists

<ul>
    <li>List item 1</li>
    <li>List item 2
        <ul>
            <li>List item A</li>
            <li>List item B</li>
        </ul>
    </li>
    <li>List item 3</li>
</ul>

Ordered lists

<ol>
    <li>List item 1</li>
    <li>List item 2
        <ol>
            <li>List item A</li>
            <li>List item B</li>
        </ol>
    </li>
    <li>List item 3</li>
</ol>

Descripton lists

<dl>
    <dt>Definition title 1</dt>
    <dd>Definition item 1</dd>
    <dt>Definition title 2</dt>
    <dd>Definition item 2</dd>
</dl>