Font size - CMS Design System

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

Format: ds-u-font-size--[SIZE]

Code snippet

<article class="ds-u-font-size--display ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--display</code><br/>
    <code>$display-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--title ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--title</code><br/>
    <code>$title-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--h1 ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--h1</code><br/>
    <code>$h1-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--h2 ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--h2</code><br/>
    <code>$h2-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--h3 ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--h3</code><br/>
    <code>$h3-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--h4 ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--h4</code><br/>
    <code>$h4-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--lead ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--lead</code><br/>
    <code>$lead-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--base ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--base</code><br/>
    <code>$base-font-size</code>
  </h2>
</article>
<article class="ds-u-font-size--small ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
 We the People of the United States
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--small</code><br/>
    <code>$small-font-size</code>
  </h2>
</article>

Responsive font sizes

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

Resize your browser to see each breakpoint in action:

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>