Skip to main content
U.S. flag

An official website of the United States government

CMS Design System

Font size

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:

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>