Typography: Using Helper Classes

Written by: Becky Aiken | IANR Media

From looking at UNL websites, we are used to seeing the big blocky font used for headings, and the serif font used for body copy.

Heading

Subheading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

If you want to jazz up the typography on your website, the UNL Web Framework has a lot of helper classes built in to display different styles of text. You can add these classnames to elements on your website and change the way they look without having to edit your own site's CSS.

None Classes HTML

Thinner Heading

Styled Subheading

Introductory paragraph style with larger text. Lorem ipsum dolor sit amet. Estibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Here's a regular paragraph for comparison. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

You can also make your paragraph teensy

By default headings have a lot of space at the top.

But they don't have to.

You can make headers display in the Gotham typeface

(They get kinda big though)

You can do the same thing with paragraph tags too. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

You can center your text

You can also do cool things with lists


Like give them a header

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Or get rid of the bullets and margin

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<h2 class="wdn-brand clear-top">Thinner Heading</h2>
<h3 class="wdn-alt-header">Styled Subheading</h3>
<p class="wdn-intro-p">Introductory paragraph style with larger text. Lorem ipsum dolor sit amet. Estibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
<p>Here's a regular paragraph for comparison. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<p class="small">You can also make your paragraph teensy</p>
<h2 class="wdn-brand">By default headings have a lot of space at the top.</h2>
<h3 class="wdn-brand clear-top">But they don't have to.</h3>
<h3 class="wdn-sans-serif">You can make headers display in the Gotham typeface</h3>
<h4 class="wdn-sans-serif">(They get kinda big though)</h4>
<p class="wdn-sans-serif">You can do the same thing with paragraph tags too. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
<h3 class="wdn-brand wdn-center">You can center your text</h3>
<p class="wdn-center wdn-intro-p">You can also do cool things with lists</p>
<br />
<h4 class="wdn-list-header clear-top">Like give them a header</h4>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<h4 class="wdn-list-header">Or get rid of the bullets and margin</h4>
<ul class="wdn-list-reset">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>

Learn more about additional framework classes & selectors from the WDN

Page Feedback

Was this article helpful?