UI components

Typography

NASA 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. For headings and logos, we recommend Helvetica.

Typefaces

Helvetica

The Helvetica® typeface has been used by NASA extensively for decades, from the space shuttle to signage and printouts.

It is one of the most ubiquitous typefaces in the world, used commonly at large sizes for signs, titles, and logos. Most systems already have this font or an equivalent installed, so an additional font download is not necessary.

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

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 that uses multiple weights of Helvetica for clear headings combined with the formal feeling of Merriweather for body text. Source Sans Pro is used everywhere else such as navigation and UI elements due to it's ability to remain legible and take up less horizontal space than Helvetica. This combination communicates professionalism, with extra emphasis on sleek and legible headings and UI elements.

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

Usage: Add class .usa-serif-body to the section(s) containing your body text and Merriweather will be used on all paragraphs and list items within the section(s).

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. Merriweather, Regular 400
5. Merriweather, Italic 400
6. Merriweather, Bold 700
Page Performance

Fast

Ideal number of fonts. Will allow for optimal page load performance.

Example

NASA Glenn website
Web Hierarchy

Display 1

font-family: ‘Helvetica’
font-weight: 700
font-size: 59px
line-height: 1.2em/71px
letter-spacing: -.021em

Display 2

font-family: ‘Helvetica’
font-weight: 300
font-size: 44px
line-height: 1.2em/53px
letter-spacing: -.021em

Heading 1

font-family: ‘Helvetica’
font-weight: 700
font-size: 44px
line-height: 1.2em/53px
letter-spacing: -.021em

Heading 2

font-family: ‘Helvetica’
font-weight: 700
font-size: 34px
line-height: 1.2em/41px
letter-spacing: -.021em

Heading 3

font-family: ‘Helvetica’
font-weight: 700
font-size: 24px
line-height: 1.2em/29px

Heading 4

font-family: ‘Helvetica’
font-weight: 700
font-size: 19px
line-height: 1.2em/23px

Heading 5

font-family: ‘Helvetica’
font-weight: 700
font-size: 16px
line-height: 1.2em/19px

Heading 6

font-family: ‘Helvetica’
font-weight: 400
font-size: 13px
line-height: 1.5em/20px
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: ‘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 Helvetica and 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
Page Performance

Fast

Ideal number of fonts. Will allow for optimal page load performance.
Web Hierarchy

Display 1

font-family: ‘Helvetica’
font-weight: 700
font-size: 59px
line-height: 1.2em/71px
letter-spacing: -.021em

Display 2

font-family: ‘Helvetica’
font-weight: 300
font-size: 44px
line-height: 1.2em/53px
letter-spacing: -.021em

Heading 1

font-family: ‘Helvetica’
font-weight: 700
font-size: 44px
line-height: 1.2em/53px
letter-spacing: -.021em

Heading 2

font-family: ‘Helvetica’
font-weight: 700
font-size: 34px
line-height: 1.2em/41px
letter-spacing: -.021em

Heading 3

font-family: ‘Helvetica’
font-weight: 700
font-size: 24px
line-height: 1.2em/29px

Heading 4

font-family: ‘Helvetica’
font-weight: 700
font-size: 19px
line-height: 1.2em/23px

Heading 5

font-family: ‘Helvetica’
font-weight: 700
font-size: 16px
line-height: 1.2em/19px

Heading 6

font-family: ‘Helvetica’
font-weight: 400
font-size: 13px
line-height: 1.5em/20px
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

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">
    <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>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>

Documentation

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="http://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>

Documentation

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>

Documentation

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.

No longer maintained.

Typefaces

Helvetica

Source Sans Pro

Merriweather

Pairings and styles

Default: Helvetica headings, Merriweather body, Source Sans Pro everywhere else

Web Hierarchy

Display 1

Display 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Helvetica headings, Source Sans Pro body

Web Hierarchy

Display 1

Display 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Typesetting

Alignment

The Grand Canyon

Line length - Desktop

Spacing

Page heading

Section heading

Section of the page

Subsection of the page

Subsection of the page

Implementation

Usability

Links

Accessibility

Lists

Unordered list

Ordered list

Implementation

Usability

When to use

When to consider something different

Guidelines