UI components

Typography

U.S. government websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. We recommend a font system that uses two open-source font families: Source Sans Pro and Merriweather, both of which are designed for legibility and can beautifully adapt to a variety of visual styles.

Typefaces

Source Sans Pro

Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.

Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Merriweather

Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space.

The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity. Merriweather communicates warmth and credibility at both large and smaller font sizes.

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Pairings and styles

To support both more contemporary and more traditional web design aesthetics, this font system offers recommended font pairings. Each pairing includes web hierarchy guidance on font family, weight, size, and spacing which express either more modern or more classical type design.

Note: Some pairings require more font weights than others. While this allows more typographic expression, the use of more than four font weights will have a negative impact on page load performance. Find the balance that works for your product.

  • A simple serif and sans serif combination designed to communicate warmth and credibility. Strong Merriweather heading weights offer clear information hierarchy and when paired with Source Sans Pro’s easy-to-read body text, create a clean and professional feel.

    This pairing is included in our design standards.

    Recommended applications: digital services that feature forms; basic and text heavy sites.

    Font weights included in this package:

    1. Merriweather Regular 400
    2. Merriweather Bold 700
    3. Source Sans Pro Regular 400
    4. Source Sans Pro Italic 400
    Web Hierarchy

    Display

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 52px
    line-height: 1.3em/68px

    Heading 1

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 40px
    line-height: 1.3em/52px

    Heading 2

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 30px
    line-height: 1.3em/39px

    Heading 3

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 20px
    line-height: 1.3em/26px

    Heading 4

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 17px
    line-height: 1.3em/22px

    Heading 5

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 15px
    line-height: 1.3em/20px

    Heading 6

    font-family: ‘Source Sans Pro’
    font-weight: 400
    font-size: 13px
    line-height: 1.3em/17px
    text-transform: uppercase

    Lead
    paragraph

    font-family: ‘Merriweather’
    font-weight: 400
    font-size: 20px
    line-height: 1.7em/34px

    Body copy. A series of sentences together which make a paragraph.

    font-family: ‘Source Sans Pro’
    font-weight: 400
    font-size: 17px
    line-height: 1.5em/26px

    Italic body copy. A series of sentences together which make a paragraph.

    font-family: ‘Source Sans Pro’
    font-style: Italic
    font-weight: 400
    font-size: 17px
    line-height: 1.5em/26px

  • The most formal of the options, this pairing uses Merriweather for both headings and body text. The full suite of serif styles communicates trustworthiness, while Merriweather’s contemporary shapes convey freshness and a modern relevance. The weights are designed to pair together for easy reading and clean page design.

    Recommended applications: sites which need to convey reliability and trust; basic and text heavy sites.

    Font weights included in this package:

    1. Merriweather, Bold 700
    2. Merriweather, Regular 400
    3. Merriweather, Italic 400
    4. Merriweather, Light 300
    Web Hierarchy

    Display 1

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 52px
    line-height: 1.3em/68px

    Display 2

    font-family: ‘Merriweather’
    font-weight: 300
    font-size: 40px
    line-height: 1.3em/52px

    Heading 1

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 40px
    line-height: 1.3em/52px

    Heading 2

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 30px
    line-height: 1.3em/39px

    Heading 3

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 20px
    line-height: 1.3em/26px

    Heading 4

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 17px
    line-height: 1.3em/22px

    Heading 5

    font-family: ‘Merriweather’
    font-weight: 700
    font-size: 15px
    line-height: 1.3em/20px

    Heading 6

    font-family: ‘Merriweather’
    font-weight: 400
    font-size: 10px
    line-height: 1.5em/15px
    text-transform: uppercase

    Lead
    paragraph 1

    font-family: ‘Merriweather’
    font-weight: 300
    font-size: 20px
    line-height: 1.7em/34px

    Lead
    paragraph 2

    font-family: ‘Merriweather’
    font-weight: 400
    font-size: 17px
    line-height: 1.7em/29px

    Body copy. A series of sentences together which make a paragraph.

    font-family: ‘Merriweather’
    font-weight: 400
    font-size: 15px
    line-height: 1.7em/26px

    Italic body copy. A series of sentences together which make a paragraph.

    font-family: ‘Merriweather’
    font-style: Italic
    font-weight: 400
    font-size: 15px
    line-height: 1.7em/26px

  • A variation on the serif and sans serif pairing, this combination uses multiple weights of Source Sans Pro for clear headings combined with the formal feeling of Merriweather for body text. This pair similarly communicates professionalism, with extra emphasis on sleek and legible headings.

    Recommended applications: digital services that feature forms; basic and text heavy sites; marketing sites.

    Font weights included in this package:

    1. Source Sans Pro, Regular 400
    2. Source Sans Pro, Bold 700
    3. Merriweather, Regular 400
    4. Merriweather, Italic 400
    Web Hierarchy

    Display 1

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 59px
    line-height: 1.3em/77px

    Heading 1

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 44px
    line-height: 1.3em/57px

    Heading 2

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 34px
    line-height: 1.3em/44px

    Heading 3

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 24px
    line-height: 1.3em/31px

    Heading 4

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 19px
    line-height: 1.3em/25px

    Heading 5

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 16px
    line-height: 1.3em/21px

    Heading 6

    font-family: ‘Source Sans Pro’
    font-weight: 400
    font-size: 13px
    line-height: 1.3em/17px
    text-transform: uppercase

    Lead
    paragraph

    font-family: ‘Source Sans Pro’
    font-weight: 400
    font-size: 22px
    line-height: 1.5em/33px

    Body copy. A series of sentences together which make a paragraph.

    font-family: ‘Merriweather’
    font-weight: 400
    font-size: 15px
    line-height: 1.7em/26px

    Italic body copy. A series of sentences together which make a paragraph.

    font-family: ‘Merriweather’
    font-style: Italic
    font-weight: 400
    font-size: 15px
    line-height: 1.7em/26px

  • Inspired by the growth of simple and welcoming type in modern web UI design, this suite uses Source Sans Pro exclusively. With a range of weights designed to fit into heading styles to clearly communicate hierarchy of information, this pairing can support both extremely simple designs and more polished, promotional sites.

    Recommended applications: digital services that feature forms; basic and text heavy sites; marketing sites.

    Font weights included in this package:

    1. Source Sans Pro, Light 300
    2. Source Sans Pro, Regular 400
    3. Source Sans Pro, Bold 700
    4. Source Sans Pro, Italic 400
    Web Hierarchy

    Display 1

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 59px
    line-height: 1.3em/77px

    Display 2

    font-family: ‘Source Sans Pro’
    font-weight: 300
    font-size: 44px
    line-height: 1.3em/57px

    Heading 1

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 44px
    line-height: 1.3em/57px

    Heading 2

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 34px
    line-height: 1.3em/44px

    Heading 3

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 24px
    line-height: 1.3em/31px

    Heading 4

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 19px
    line-height: 1.3em/25px

    Heading 5

    font-family: ‘Source Sans Pro’
    font-weight: 700
    font-size: 16px
    line-height: 1.3em/21px

    Heading 6

    font-family: ‘Source Sans Pro’
    font-weight: 400
    font-size: 13px
    line-height: 1.3em/17px
    text-transform: uppercase

    Lead
    paragraph

    font-family: ‘Source Sans Pro’
    font-weight: 300
    font-size: 22px
    line-height: 1.5em/33px

    Body copy. A series of sentences together which make a paragraph.

    font-family: ‘Source Sans Pro’
    font-weight: 400
    font-size: 17px
    line-height: 1.5em/26px

    Italic body copy. A series of sentences together which make a paragraph.

    font-family: ‘Source Sans Pro’
    font-style: Italic
    font-weight: 400
    font-size: 17px
    line-height: 1.5em/26px

Typesetting

Readable text allows users to efficiently read and take in textual information, whereas text that is not readable turns off readers or makes it challenging for them to stay focused. The following guidelines promote good readability.

Alignment

The Grand Canyon

Grand Canyon National Park is the United States’ 15th oldest national park. Named a UNESCO World Heritage Site in 1979, the park is located in Arizona.

Line length - Desktop

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

75 characters max on desktop

Spacing

Section heading

Great Smoky Mountains National Park straddles the border of North Carolina and Tennessee.

Section heading

Section of the page

The sprawling landscape encompasses lush forests and an abundance of wildflowers that bloom year-round. Streams, rivers and waterfalls appear along hiking routes that include a segment of the Appalachian Trail.

Subsection of the page

World renowned for its diversity of plant and animal life, the beauty of its ancient mountains, and the quality of its remnants of Southern Appalachian mountain culture, this is America’s most visited national park.

Right now scientists think that we only know about 17 percent of the plants and animals that live in the park, or about 17,000 species of a probable 100,000 different organisms.

Subsection of the page

Entrance to Great Smoky Mountains National Park is free. The park is one of the few national parks where no entrance fees are charged.

<h6 class="usa-heading-alt">Alignment</h6>
<div class="alignment-example">
  <h4>The Grand Canyon</h4>
  <p>Grand Canyon National Park is the United States' 15th oldest national park. Named a UNESCO World Heritage Site in 1979, the park is located in Arizona.</p>
</div>

<h6 class="usa-heading-alt">Line length - Desktop</h6>
<div class="usa-line-length-example">
  <p>Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.</p>
  <p class="help-text">75 characters max on desktop</p>
</div>

<h6 class="usa-heading-alt">Spacing</h6>
<h1>Section heading</h1>
<p class="usa-font-lead">Great Smoky Mountains National Park straddles the border of North Carolina and Tennessee.</p>
<h2>Section heading</h2>
<h3>Section of the page</h3>
<p>The sprawling landscape encompasses lush forests and an abundance of wildflowers that bloom year-round. Streams, rivers and waterfalls appear along hiking routes that include a segment of the Appalachian Trail.</p>
<h4>Subsection of the page</h4>
<p>World renowned for its diversity of plant and animal life, the beauty of its ancient mountains, and the quality of its remnants of Southern Appalachian mountain culture, this is America's most visited national park.</p>
<p>Right now scientists think that we only know about 17 percent of the plants and animals that live in the park, or about 17,000 species of a probable 100,000 different organisms.</p>
<h5>Subsection of the page</h5>
<p>Entrance to Great Smoky Mountains National Park is free. The park is one of the few national parks where no entrance fees are charged.</p>

Implementation

To get the max-width on body text, add the class usa-content to your document. Use at the specificity that best suits your project’s needs.

Lists must use usa-content-list for the above.

You can change the max-width value $text-max-width in src/stylesheets/core/_variables.scss.

Usability

  • Alignment: Type set flush left provides the eye a constant starting point for each line, making text easier to read.
  • Line length: Controlling the length of lines of text in extended copy makes reading more comfortable by helping readers’ eyes flow easily from one line to the next. Somewhere between 50 and 75 characters per line is broadly considered to be a readable line length, while 66 characters is considered the ideal. Other factors beyond line length also affect reading comfort. Text with more space between lines can have somewhat longer line length. Also, contexts in which users will not be reading long passages of text (such as footnotes or alerts) can safely be set with somewhat longer lines as well.
  • Spacing: White space affects how the user focuses their attention on the content. It makes it easier to know what to read and where to begin. Spacing between typographic elements should be open enough to feel light, but close enough to establish a proper relationship between elements. When setting headers and body copy, white space should be 60px, 30px, 20px, or 15px.

Lists

Lists organize written information for users.

Unordered list
  • Unordered list item
  • Unordered list item
  • Unordered list item
Ordered list
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

<div class="usa-grid-full">
  <div class="usa-width-one-third">

    <h6 class="usa-heading-alt">Unordered list</h6>

    <ul>
      <li>Unordered list item</li>
      <li>Unordered list item</li>
      <li>Unordered list item</li>
    </ul>

  </div>

  <div class="usa-width-one-third">

    <h6 class="usa-heading-alt mt0">Ordered list</h6>

    <ol>
      <li>Ordered list item</li>
      <li>Ordered list item</li>
      <li>Ordered list item</li>
    </ol>

  </div>
</div>

Implementation

Lists are styled by default. For unstyled lists, use either the usa-unstyled-list class or unstyled list mixin: @include unstyled-list;. Both are located in src/stylesheets/core/_utilities.scss.

Usability

When to use
  • Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
  • Use unordered lists to display text in no specific order.
When to consider something different
  • If you need to communicate long lists of narrative text.
Guidelines
  • Use sentence case and begin lists with a capital letter.
  • Use punctuation appropriate to the text. Do not leave sentences without periods.