@moodxd/base-typography v1.0.3

MoO Base Typography

Overview

<p>This is Mutual of Omaha's chosen Typography set.<br/>
We use <strong>Source Pro Sans</strong> as our headings.<br/>
All font sizes use <code>rem</code> with a <code>px</code> fallback.<br/>
We use <strong>Source Pro Sans</strong> as our body Copy with the base font size of <strong>2.2rem</strong> and the <code>line-height</code> of <strong>3.2rem</strong>.</p>

Headings

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

Weights

<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

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

Strong, Italic, Underlined, and Small

<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

<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>