Skip to main content

Font size

Jump to Guidance

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