Typography

Skill Level: 
Beginner

We provide styles for body copy and headings.

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.

UNL is the preferred abbreviation for the University of Nebraska–Lincoln.

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

A note on accessibility: the <abbr> element is not accessible in all assistive technology and the title attribute is not available when browsing on mobile or touch only devices. Therefore it is best to expand the abbreviation in full on the first use in a document. IE: UNL (University of Nebraska–Lincoln). The following uses of the acronym UNL could use the <abbr> markup as a convenience.

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.

Color does not add a pleasant quality to design—it reinforces it. Pierre Bonnard Awesome painter and printmaker
<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.

The Elements of Typographic Style Applied to the Web is an excellent guide for styling text on websites.

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 web fonts to include the base framework package. Fonts tend to add quite a bit of heft to a page, and too many font styles can cause visual confusion for visitors. For those that would like to experiment with different font variations, we have a few plugins that can loaded that add additional typography classes.

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. This adds 42kb to pages that use this font package.

<p class="wdn-smallcaps">Add small caps to your Mercury Text. This adds 42kb to pages that use this font package.</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 (ScreenSmart) 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. This adds 206kb to pages that use this font package.

<p class="wdn-extlatin">Our default Mercury Text (ScreenSmart) 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. This adds 206kb to pages that use this font package.</p>
<script>WDN.initializePlugin('extlatin');</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.

<p class="wdn-script-font" style="font-size: 4em">Sanelma is our script font.</p>
<script>WDN.initializePlugin('script-font');</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 (Mercury ScreenSmart). This should be used exclusively for large sizes. This adds 76kb to pages that use this font package.

<p class="wdn-display-font" style="font-size: 4em">Mercury Display is the display version of our serif body copy typeface, Mercury Text (Mercury ScreenSmart). This should be used exclusively for large sizes. This adds 76kb to pages that use this font package.</p>
<script>WDN.initializePlugin('display-font');</script>
Contributed By: 
IIM