Typography

Documentation and examples for typography, including global settings, headings, body text, lists and more.

Headings #

All HTML headings, <h1> through <h6>, are available to use with predefined styles.

Heading selector aliases, .heading-1 through .heading-6, are also available and should be favored over HTML headings if using a HTML heading would be semantically incorrect.

Heading 1
Font: Acumin Pro Bold | Size: 40px | Line Height: 1.2

Heading 2
Font: Acumin Pro Bold | Size: 32px | Line Height: 1.2

Heading 3
Font: Acumin Pro Bold | Size: 28px | Line Height: 1.2

Heading 4
Font: Acumin Pro Bold | Size: 24px | Line Height: 1.2

Heading 5
Font: Acumin Pro Bold | Size: 20px | Line Height: 1.2

Heading 6
Font: Acumin Pro Bold | Size: 18px | Line Height: 1.2

Display Headings #

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1
Font: Bebas Neue Bold | Size: 96px | Line Height: 1

Display 2
Font: Bebas Neue Bold | Size: 64px | Line Height: .95

Display 3
Font: Bebas Neue Bold | Size: 32px | Line Height: .95

Display 4
Font: Bebas Neue Bold | Size: 24px | Line Height: .95

Text #

Use the text and font utility classes to change text alignment, style and weight.

<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>

Captions #

Use a <figcaption> in a <figure> that contains the classname caption when providing context to media elements

Example

<figure class="caption">
    <img class="display-block" src="assets/images/transparent.png">
    <figcaption class="border-b purple-border pad-0-t">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    </figcaption>
</figure>

Adding dark to a <figcaption> classlist to apply an alternative dark theme

Example

<figure class="caption">
    <img class="display-block" src="assets/images/transparent.png" alt="fpo">
    <figcaption class="dark">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    </figcaption>
</figure>

Blockquotes #

For quoting blocks of text from another source within your document.

<blockquote>
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur
    aut odit aut fugit, sed quia consequuntur magni dolores eos qui
    ratione voluptatem sequi nesciunt.
</blockquote>

Citing Sources

Wrap the <blockquote> in a <figure> that contains the classname blockquote, and then add a <figcation> which contains a <cite> that identifies the source.

<figure class="blockquote">
    <blockquote>
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur
        aut odit aut fugit, sed quia consequuntur magni dolores eos qui
        ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
        dolorem ipsum quia.
    </blockquote>
    <figcaption>
        <img
            class="cite-avatar"
            src="assets/images/transparent.png"
            width="56"
            height="56"
        >
        <cite>Quote Source</cite>
        <a class="purple">
            <small>
                <span class="mu-icon-long-arrow-right"></span>
                <b>Spotlight Profile</b>
            </small>
        </a>
    </figcaption>
</figure>

Lists #

Unorganized Lists

<ul class="styled">
    <li>Lorem <strong>ipsum dolor</strong> sit amet integer lorem at massa</li>
    <li>Consectetur adipiscing elit</li>
    <li>
        Integer molestie lorem at massa
        <ul class="styled">
            <li>Lorem <strong>ipsum dolor</strong> sit amet integer lorem at massa</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
        </ul>
    </li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit</li>
</ul>

Organized Lists

<ol class="styled">
    <li>Lorem <strong>ipsum dolor</strong> sit amet integer lorem at massa</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at mass</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit</li>
</ol>

Quicklinks Lists

<ul class="quicklinks purple">
    <li>
        <a>Academic Calendar<span class="mu-icon-file-pdf"></span></a>
    </li>
    <li>
        <a>Fall Exam Schedule<span class="mu-icon-file-pdf"></span></a>
    </li>
    <li>
        <a>Library</a>
    </li>
</ul>

Unstyled Lists

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit</li>
</ul>