The WVU Design System offers a number typeface utilities to style your content.
Available Options
| Typeface | Utility Class(es) |
|---|---|
| Helvetica Neue |
helvetica-neue
|
| Helvetica Neue Bold |
helvetica-neue-bold
|
| Helvetica Neue Light |
helvetica-neue-light
|
| Iowan Old Style |
iowan-old-style
|
| Iowan Old Style Italic |
iowan-old-style-italic
|
| Iowan Old Style Black |
iowan-old-style-black
|
| Iowan Old Style Black Italic |
iowan-old-style-black-italic
|
| Helvetica Condensed Black |
helvetica-neue-black-condensed
wvu-shout
|
Font licenses can be purchased online. See WVU’s typography guidelines for details.
Example Type Hierarchy
User our typography and element utilities with Bootstrap’s text utilities to create a strong type hierarchy.
Primary Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Secondary Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tertiary Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h2 class="wvu-shout text-wvu-blue display-3 wvu-bar wvu-bar--bottom">Primary Header</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3 class="iowan-old-style-black-italic mt-3">Secondary Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4 class="iowan-old-style-black wvu-text-letter-spacing text-uppercase h6 mt-3">Tertiary Header</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>