Typography
Utilities
If you are a developer making custom themes and components, the WVU Design System offers a number typeface utilities to style your content.
Font Utilities
| Typeface | Utility Class(es) |
|---|---|
| Helvetica Neue | helvetica-neue |
| Helvetica Neue Bold | helvetica-neue-bold |
| Config Extra Bold | config-extra-bold |
| Config Extra Bold Italic | config-extra-bold-italic |
| Config Light | config-light |
| Antonia | antonia-regular |
| Antonia Bold | antonia-bold |
| Antonia Italic | antonia-italic |
| Antonia Light | antonia-light |
| Antonia Heavy | antonia-heavy |
| Antonia Heavy Italic | antonia-heavy-italic |
General Typography Palette
Primary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
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.
<div class="audience-general tone-default">
<h1 class="wvu-b-display-heading text-wvu-blue display-3 mb-4"><span class="wvu-b-font-adjust">Primary Heading</span></h1>
<p class="wvu-b-subheading fs-4 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<h2>Secondary Header</h2>
<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>
</div>Academic / Traditional Typography Palette
Primary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
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.
<div class="audience-alumni tone-default">
<h1 class="wvu-b-display-heading text-wvu-blue display-4 mb-4"><span class="wvu-b-font-adjust">Primary Heading</span></h1>
<p class="wvu-b-subheading fs-4 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<h2>Secondary Header</h2>
<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>
</div>Formal + Modern Typography Palette
Primary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
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.
<div class="audience-leaders_partners tone-default">
<h1 class="wvu-b-display-heading text-wvu-blue display-4 mb-4"><span class="wvu-b-font-adjust">Primary Heading</span></h1>
<p class="wvu-b-subheading fs-4 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<h2>Secondary Header</h2>
<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>
</div>Prospective Students Typography Palette
Primary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
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.
<div class="audience-prospective_students tone-default">
<h1 class="wvu-b-display-heading text-uppercase text-wvu-blue display-3 mb-4"><span class="wvu-b-font-adjust">Primary Heading</span></h1>
<p class="wvu-b-subheading fs-4 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<h2>Secondary Header</h2>
<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>
</div>