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.

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.

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.

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.

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.

<divclass="usa-grid"><h6class="usa-heading-alt">Alignment</h6><divclass="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><h6class="usa-heading-alt">Line length - Desktop</h6><divclass="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><pclass="help-text">75 characters max on desktop</p></div><h6class="usa-heading-alt">Spacing</h6><h1>Page heading</h1><pclass="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.

<p><ahref="javascript:void(0);">This</a> is a text link on a light background.</p><p><aclass="usa-color-text-visited"href="javascript:void(0);">This</a> is a visited link.</p><p>This is a link that goes to an <aclass="usa-external_link"href="https://media.giphy.com/media/8sgNa77Dvj7tC/giphy.gif">external website</a>.</p><divclass="usa-background-dark"><p><ahref="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.

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.

Become part of the community

The U.S. Web Design System has grown into a blossoming, open source community of government engineers, content specialists, and designers. We currently support dozens of agencies and more than 100 sites, which is fueled through an active community of contributors both in and out of government.