Typography

The WDN framework includes a core set of webfonts (Mercury Text, Tungsten and Gotham) delivered by Cloud.typography. Tungsten is generally reserved for headings; it doesn't render well at small sizes. Both Mercury Text and Gotham are optimized for smaller text sizes and delivered as ScreenSmart fonts.

We generally discourage the use of the <b>, <i>, and <u> elements that provide styles without semantics. The <strong> and <em> elements should be used to style text with greater importance or stress emphasis, respectively.

Alignment

Use the .wdn-center class to center align text.

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

<abbr title="University of Nebraska–Lincoln">UNL</abbr>

Blockquotes

For quoting blocks of content from another source within your document. We do not provide default styles, but you can opt-in to a custom style with the .wdn-quoter class.

<blockquote class="wdn-quote">
    Color does not add a pleasant quality to design—it reinforces it.
    <cite class="wdn-quoter">
        Pierre Bonnard <span class="quoter-context">Awesome painter and printmaker</span>
    </cite>
</blockquote>

Paragraphs

The wdn-intro-p style is larger than the standard paragraph size and is useful for grabbing attention and leading the eye into more detailed content. It should usually be reserved for the first paragraph on the page, but can be used again to introduce sections on pages with large amounts of copy. Use with discretion. Remember: if everything is important, nothing is important.

Body copy is set in Hoefler & Co.’s Mercury Text.

How about we look at some lorem ipsum? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tortor odio, suscipit quis metus sit amet, vestibulum congue libero. Sed luctus ligula a leo cursus accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sit amet metus vel augue commodo lacinia eu at justo. Aliquam laoreet rutrum nunc.

<p class="wdn-intro-p">Your intro paragraphs content goes here.</p>

Additional Fonts

Careful consideration went into determining which webfonts to include in the base framework package. Developers can also extend and/or add optional fonts via plugins as needed for more expressive typography. Keep in mind, though, that each of these font plugins will add additional file size to your pages and that the core webfont stack already weighs 271kb. Too many font styles can also cause visual confusion for visitors. Use judiciously.

Small Caps

Small caps is a typographic font varient that uses optimized uppercase glyphs that are not quite as tall as the actual uppercase glyphs. Instead of using browser CSS to provide faux small-caps, the smallcaps plugin loads an optimized version of Mercury that has support for this feature and adds the .wdn-smallcaps class for applying the font to any element.

Add small caps to your Mercury Text. Mercury Text Small Caps adds 42kb to pages that use this plugin.

<p class="wdn-smallcaps">Add small caps to your Mercury Text. <em>Mercury Text Small Caps adds 42kb to pages that use this plugin.</em></p>
<script>WDN.initializePlugin('smallcaps');</script>

Extended Latin

The extlatin plugin loads an optimized version of Mercury that has support for more languages and adds the .wdn-extlatin class for applying the font to any element.

Our default Mercury Text includes a minimum set of accented characters for the major Western European languages. The extended latin set adds support for 140 languages throughout the world, including all of Central Europe. With extended Latin enabled, you could use the Czech word for ‘big’ (‘potężny’) or the Romanian word for ‘red’ (‘roşu’). Mercury Text Extended Latin adds 220kb to pages that use this plugin.

<p class="wdn-extlatin">Our default Mercury Text includes a minimum set of accented characters for the major Western European languages. The extended latin set adds support for 140 languages throughout the world, including all of Central Europe. With extended Latin enabled, you could use the Czech word for ‘big’ (‘potężny’) or the Romanian word for ‘red’ (‘roşu’). <em>Mercury Text Extended Latin adds 220kb to pages that use this plugin.</em></p>
<script>WDN.initializePlugin('extlatin');</script>

Mercury Display

The display-font plugin loads this web font and adds the .wdn-display-font class for appling the font to any element.

Mercury Display is the display version of our serif body copy typeface, Mercury Text. It should be used exclusively for large sizes. Ligatures are enabled for Mercury Display, making more elegant connections between certain letter pairs, like ‘fi’ or ‘ffi’ or ‘fl’. Mercury Display adds 76kb to pages that use this plugin.

<p class="wdn-display-font" style="font-size: 3.375rem; line-height: 1.333;">Mercury Display is the display version of our serif body copy typeface, Mercury Text. It should be used exclusively for large sizes. <a href="https://en.wikipedia.org/wiki/Typographic_ligature">Ligatures</a> are enabled for Mercury Display, making more elegant connections between certain letter pairs, like ‘fi’ or ‘ffi’ or ‘fl’. <em>Mercury Display adds 76kb to pages that use this plugin.</em></p>
<script>WDN.initializePlugin('display-font');</script>

Sanelma

The script-font plugin loads this web font and adds the .wdn-script-font class for appling the font to any element.

Sanelma is our script font. As noted in the Toolbox & Brand Book, its use should be limited to headlines. Sanelma adds 233kb to pages that use this plugin.

<p class="wdn-script-font" style="font-size: 3.375rem; line-height: 1.333;">Sanelma is our script font. As noted in the </a href="http://ucomm.unl.edu/toolbox/typography">Toolbox & Brand Book</a>, its use should be limited to headlines. <em>Sanelma adds 233kb to pages that use this plugin.</em></p>
<script>WDN.initializePlugin('script-font');</script>