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.
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.
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:
- Merriweather Regular 400
- Merriweather Bold 700
- Source Sans Pro Regular 400
- Source Sans Pro Italic 400
Web Hierarchy
Display
font-family: ‘Merriweather’
font-weight: 700
font-size: 52px
line-height: 1.3em/68pxHeading 1
font-family: ‘Merriweather’
font-weight: 700
font-size: 40px
line-height: 1.3em/52pxHeading 2
font-family: ‘Merriweather’
font-weight: 700
font-size: 30px
line-height: 1.3em/39pxHeading 3
font-family: ‘Merriweather’
font-weight: 700
font-size: 20px
line-height: 1.3em/26pxHeading 4
font-family: ‘Merriweather’
font-weight: 700
font-size: 17px
line-height: 1.3em/22pxHeading 5
font-family: ‘Merriweather’
font-weight: 700
font-size: 15px
line-height: 1.3em/20pxHeading 6
font-family: ‘Source Sans Pro’
font-weight: 400
font-size: 13px
line-height: 1.3em/17px
text-transform: uppercaseLead
paragraphfont-family: ‘Merriweather’
font-weight: 400
font-size: 20px
line-height: 1.7em/34pxBody 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/26pxItalic 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:
- Merriweather, Bold 700
- Merriweather, Regular 400
- Merriweather, Italic 400
- Merriweather, Light 300
Web Hierarchy
Display 1
font-family: ‘Merriweather’
font-weight: 700
font-size: 52px
line-height: 1.3em/68pxDisplay 2
font-family: ‘Merriweather’
font-weight: 300
font-size: 40px
line-height: 1.3em/52pxHeading 1
font-family: ‘Merriweather’
font-weight: 700
font-size: 40px
line-height: 1.3em/52pxHeading 2
font-family: ‘Merriweather’
font-weight: 700
font-size: 30px
line-height: 1.3em/39pxHeading 3
font-family: ‘Merriweather’
font-weight: 700
font-size: 20px
line-height: 1.3em/26pxHeading 4
font-family: ‘Merriweather’
font-weight: 700
font-size: 17px
line-height: 1.3em/22pxHeading 5
font-family: ‘Merriweather’
font-weight: 700
font-size: 15px
line-height: 1.3em/20pxHeading 6
font-family: ‘Merriweather’
font-weight: 400
font-size: 10px
line-height: 1.5em/15px
text-transform: uppercaseLead
paragraph 1font-family: ‘Merriweather’
font-weight: 300
font-size: 20px
line-height: 1.7em/34pxLead
paragraph 2font-family: ‘Merriweather’
font-weight: 400
font-size: 17px
line-height: 1.7em/29pxBody copy. A series of sentences together which make a paragraph.
font-family: ‘Merriweather’
font-weight: 400
font-size: 15px
line-height: 1.7em/26pxItalic 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:
- Source Sans Pro, Regular 400
- Source Sans Pro, Bold 700
- Merriweather, Regular 400
- Merriweather, Italic 400
Web Hierarchy
Display 1
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 59px
line-height: 1.3em/77pxHeading 1
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 44px
line-height: 1.3em/57pxHeading 2
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 34px
line-height: 1.3em/44pxHeading 3
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 24px
line-height: 1.3em/31pxHeading 4
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 19px
line-height: 1.3em/25pxHeading 5
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 16px
line-height: 1.3em/21pxHeading 6
font-family: ‘Source Sans Pro’
font-weight: 400
font-size: 13px
line-height: 1.3em/17px
text-transform: uppercaseLead
paragraphfont-family: ‘Source Sans Pro’
font-weight: 300
font-size: 22px
line-height: 1.5em/33pxBody copy. A series of sentences together which make a paragraph.
font-family: ‘Merriweather’
font-weight: 400
font-size: 15px
line-height: 1.7em/26pxItalic 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:
- Source Sans Pro, Light 300
- Source Sans Pro, Regular 400
- Source Sans Pro, Bold 700
- Source Sans Pro, Italic 400
Web Hierarchy
Display 1
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 59px
line-height: 1.3em/77pxDisplay 2
font-family: ‘Source Sans Pro’
font-weight: 300
font-size: 44px
line-height: 1.3em/57pxHeading 1
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 44px
line-height: 1.3em/57pxHeading 2
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 34px
line-height: 1.3em/44pxHeading 3
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 24px
line-height: 1.3em/31pxHeading 4
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 19px
line-height: 1.3em/25pxHeading 5
font-family: ‘Source Sans Pro’
font-weight: 700
font-size: 16px
line-height: 1.3em/21pxHeading 6
font-family: ‘Source Sans Pro’
font-weight: 400
font-size: 13px
line-height: 1.3em/17px
text-transform: uppercaseLead
paragraphfont-family: ‘Source Sans Pro’
font-weight: 300
font-size: 22px
line-height: 1.5em/33pxBody 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/26pxItalic 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
Page 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.
<div class="usa-grid">
<h6 class="usa-heading-alt">Alignment</h6>
<div class="alignment-example">
<h5>The Grand Canyon</h5>
<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>Page 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>
</div>
Implementation
To add a max-width to text, add the class usa-content to your document. Use at the specificity that best suits your project's needs.
You can change the max-width value $text-max-width in dist/scss/core/_variables.scss. The max-width defaults to 66 characters per line using character units (`66ch`).
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.
Links
Links lead users to a different page or further information.
This is a text link on a light background.
This is a visited link.
This is a link that goes to an external website.
This is a text link on a dark background.
<p>
<a href="javascript:void(0);">This</a> is a text link on a light background.
</p>
<p>
<a class="usa-color-text-visited" href="javascript:void(0);">This</a> is a
visited link.
</p>
<p>
This is a link that goes to an
<a
class="usa-external_link"
href="https://media.giphy.com/media/8sgNa77Dvj7tC/giphy.gif"
>external website</a
>.
</p>
<div class="usa-background-dark">
<p>
<a href="javascript:void(0);">This</a> is a text link on a dark background.
</p>
</div>
Accessibility
- Users should be able to tab to navigate between links.
- Users should be able to activate a link when pressing ‘Enter’ on their keyboard.
- Users should be able to identify links without relying on color alone.
- Users should be able to activate hover and focus states with both a mouse and a keyboard.
Lists
Lists organize written information for users.
Unordered list
- Unordered list item
- Unordered list item
- Unordered list item
Ordered list
- Ordered list item
- Ordered list item
- 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/.
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.