@moodxd/utility-typography v1.0.3

MoO Utility Typography

Overview

Mutual of Omaha uses two typefaces as the official corporate fonts, Source Pro Sans. This font is the default typeface for all Mutual of Omaha marketing assets. They are used in specific cases to ensure readability and to help maintain a consistent look and feel throughout all marketing materials both digital and physical. To best represent our brand, the two typefaces should be used concurrently. When our corporate fonts are not available, web-standard fonts Arial is used instead, respectively.

Source Pro Sans

For headlines, pull quotes and highlighted copy, Source Pro Sans is used since it is a strong typeface and can stands out strong on a layout.

In the event Source Pro Sans is not available on the client, Arial should be set as the fallback.

Headings

Source Pro Sans is used in headings and headlines. There are six primary types of headings available through the standard header HTML tags.

<h1>H1: Header <strong>One</strong> and Only Brand Blue</h1>
<h2>H2: Starting Dark Gray Now with Heading <strong>Two</strong></h2>
<h3>H3: Lucky Number <strong>Three</strong> is Going, Going, Gone</h3>
<h4>H4: July <strong>Four</strong> Twenty Fourteen is Coming Soon</h4><br/>
<h5>H5: Alive Going <strong>Five</strong> Headers that are all Four Pixels Changing</h5><br/>
<h6>H6: Small and Mighty <strong>Six</strong> May be the Only Bolder Header at Four Hundred Weight</h6>

Body Copy

Source Pro Sans is used as the default typeface for all other body copy. Body copy is typically set by using a paragraph and list tags.

<p>Here is some body copy.</p>
<ul>
    <li>And some body copy&hellip;</li>
    <li>&hellip; in a list.

Measurement

All fonts use rem (root em) as the default form of size measurement with a px (pixel) fallback.

Weights

Various weights can be applied to the Meta (sans serif) font as an alternative to using a strong tag for bold text. There are six different weights to choose from: .u-fontWeight300 .u-fontWeight400 .u-fontWeight600 .u-fontWeight700

<p class="u-fontWeight300">This is the font weight of 300</p>
<p class="u-fontWeight400">This is the font weight of 400</p>
<p class="u-fontWeight600">This is the font weight of 600</p>
<p class="u-fontWeight700">This is the font weight of 700</p>

Links

To create a link to a URL, apply an anchor tag around the applicable text.

<p>This is a <a>link</a> in some text</p>

Strong, Italic, Underlined, and Small

Text can be formatted in various forms. By applying standard HTML tags, the applicable text will change accordingly. For bold text, use the strong tag, or apply the .u-fontBold class alternatively. For underlined text, use the u tag, or apply the .u-fontUnderline class. For italicized text, use the em tag, or apply the .u-fontItalic class. And for small text, use the small tag, or apply the .u-fontSmall class.

<p>This is <strong>bold</strong> text</p>
<p>This is <u>underlined</u> text</p>
<p>This is <em>italicized</em> text</p>
<p>This text is <small>small</small></p>

u-fontBold, u-fontUnderline, u-fontItalic, and 'u-fontSmall' also available.

Lists

To build an unordered list, use standard HTML formatting of a parent ul tag with children li (list item) tags. You may also use an ol tag to create an ordered list. • Unordered lists - use li (list item) tags • Ordered lists – use ol (ordered list) tags

<ul>
  <li>This is a list item</li>
  <li>This is a list item
    <ul>
        <li>This is a list item nested within another list.
            <ul>
                <li>One more level.</li>
            </ul>
        </li>
    </ul>
  </li>
  <li>This is a list item</li>
</ul>

<ol>
  <li>This is a list item</li>
  <li>This is a list item
    <ol>
        <li>This is a list item nested within another list.
            <ol>
                <li>One more level.</li>
            </ol>
        </li>
    </ol>
  </li>
  <li>This is a list item</li>
</ol>

Text Alignment/Position

Text can be aligned left, right, or centered. Utilize the .u-textLeft class to force left alignment, .u-textRight for right alignment, and .u-textCenter for center alignment. These classes can also be triggered in regard to the responsive layout by adding the -sm, -md, -lg suffixes to the class names.

Responsive sizes also available (-sm, -md, -lg).

<div class="u-textCenter">Center</div>
<div class="u-textLeft">Left</div>
<div class="u-textRight">Right</div>

Misc.

Body copy can inherit the color of its parent element’s copy by applying the .u-fontInheritColor class. Copy can also be set to not wrap to another line by applying the .u-textNoWrap class. Applying .u-textTruncate to a block element will truncate its text based on the width of its parent container. Text can be set to all uppercase by utilizing the .u-textCaps class.