CMS Design System

Change an element's typeface to either the sans-serif (Open Sans) or serif (Bitter) family using the font family utility.

Format: .ds-u-[serif|sans]

.ds-u-sans

Open Sans, Helvetica, sans-serif

.ds-u-serif

Bitter, Georgia, serif

Code snippet

<section class="example-list">
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-sans</code>
    <p class="ds-u-sans ds-title">Open Sans, Helvetica, sans-serif</p>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-serif</code>
    <p class="ds-u-serif ds-title">Bitter, Georgia, serif</p>
  </article>
</section>

Guidance

Customization

The following Sass variables can be overridden to theme the font family utility:

$font-family-sans
$font-family-serif