Font size

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]

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.

New tab

Code snippet

<div
  class="ds-u-font-size--base ds-u-sm-font-size--lg ds-u-md-font-size--xl ds-u-lg-font-size--2xl ds-u-xl-font-size--3xl"
>
 We the People of the United States, in Order to form a more perfect Union
</div>

CMS Design System

Typography sizing updates!

Responsive font sizes

Guidance

Customization