Skip to main content
U.S. flag

An official website of the United States government

CMS Design System

Font size

Use the font size utility to make the text larger or smaller.

Format: ds-u-font-size--[display|title|h1|h2|h3|h4|lead|base|small]

Responsive format: ds-u-[breakpoint]-font-size--[display|title|h1|h2|h3|h4|lead|base|small]

Code snippet
<section class="example--list">
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--display</code>
    <div class="ds-u-truncate ds-u-font-size--display">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--title</code>
    <div class="ds-u-truncate ds-u-font-size--title">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--h1</code>
    <div class="ds-u-truncate ds-u-font-size--h1">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--h2</code>
    <div class="ds-u-truncate ds-u-font-size--h2">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--h3</code>
    <div class="ds-u-truncate ds-u-font-size--h3">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--h4</code>
    <div class="ds-u-truncate ds-u-font-size--h4">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--lead</code>
    <div class="ds-u-truncate ds-u-font-size--lead">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--base</code>
    <div class="ds-u-truncate ds-u-font-size--base">We the People of the United States</div>
  </article>
    <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">ds-u-font-size--small</code>
    <div class="ds-u-truncate ds-u-font-size--small">We the People of the United States</div>
  </article>
  </section>

Responsive font sizes

Use a breakpoint prefix to change the font size at specific breakpoints.

New tab
Code snippet
<div
  class="ds-u-font-size--base ds-u-sm-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2 ds-u-xl-font-size--h1"
>
 We the People of the United States, in Order to form a more perfect Union
</div>

Guidance

Customization

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

  • $display-font-size
  • $title-font-size
  • $h1-font-size
  • $h2-font-size
  • $h3-font-size
  • $h4-font-size
  • $lead-font-size
  • $base-font-size
  • $small-font-size