Skip to main content
U.S. Flag

An official website of the United States government

Font family

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]


Open Sans, Helvetica, sans-serif


Bitter, Georgia, serif

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



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

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