Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

Download Code View on GitHub

Font size

Jump to Guidance
Notice:

Typography sizing updates!

We've updated typography sizing variables and class names to make them more agnostic. Read about how you can update.

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

Format: .ds-u-font-size--[5xl|4xl|3xl|2xl|xl|lg|md|base|sm]

Responsive format: .ds-u-[breakpoint]-font-size--[5xl|4xl|3xl|2xl|xl|lg|md|base|sm]

.ds-u-font-size--5xl
We the People of the United States
.ds-u-font-size--4xl
We the People of the United States
.ds-u-font-size--3xl
We the People of the United States
.ds-u-font-size--2xl
We the People of the United States
.ds-u-font-size--xl
We the People of the United States
.ds-u-font-size--lg
We the People of the United States
.ds-u-font-size--base or.ds-u-font-size--md
We the People of the United States
.ds-u-font-size--sm
We the People of the United States
Code snippet
<section class="example-list">
  <article>
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">
      .ds-u-font-size--5xl
    </code>
    <div class="ds-u-truncate ds-u-font-size--5xl">
      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--4xl
    </code>
    <div class="ds-u-truncate ds-u-font-size--4xl">
      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--3xl
    </code>
    <div class="ds-u-truncate ds-u-font-size--3xl">
      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--2xl
    </code>
    <div class="ds-u-truncate ds-u-font-size--2xl">
      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--xl
    </code>
    <div class="ds-u-truncate ds-u-font-size--xl">
      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--lg
    </code>
    <div class="ds-u-truncate ds-u-font-size--lg">
      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>
    or
    <code class="ds-u-margin-y--0 ds-u-margin-bottom--1">
      .ds-u-font-size--md
    </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--sm
    </code>
    <div class="ds-u-truncate ds-u-font-size--sm">
      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.

Code snippet

Guidance

Customization

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

  • $font-size-5xl
  • $font-size-4xl
  • $font-size-3xl
  • $font-size-2xl
  • $font-size-xl
  • $font-size-lg
  • $font-size-md, uses $font-size-base
  • $font-size-sm