Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

Font weight

Change an element's font-weight property using the font weight utility.

Format: .ds-u-font-weight--[normal|semibold|bold]

.ds-u-font-weight--normal
We the People of the United States, in Order to form a more perfect Union
.ds-u-font-weight--semibold
We the People of the United States, in Order to form a more perfect Union
.ds-u-font-weight--bold
We the People of the United States, in Order to form a more perfect Union
Code snippet
<section class="example-list">
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-font-weight--normal</code>
    <div class="ds-u-font-weight--normal">
      We the People of the United States, in Order to form a more perfect Union
    </div>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-font-weight--semibold</code>
    <div class="ds-u-font-weight--semibold">
      We the People of the United States, in Order to form a more perfect Union
    </div>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-font-weight--bold</code>
    <div class="ds-u-font-weight--bold">
      We the People of the United States, in Order to form a more perfect Union
    </div>
  </article>
</section>