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>

CMS Design System

Responsive font sizes

Guidance

Customization