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 these fonts: Arial, Trebuchet MS, and Museo Slab 500, which are designed for legibility and can beautifully adapt to a variety of visual styles.

Typefaces

Arial

Arial is a sans-serif typeface and set of computer fonts. It was created to be metrically identical to the popular typeface Helvetica, with all character widths identical, so that a document designed in Helvetica could be displayed and printed correctly without having to pay for a Helvetica license.

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

Trebuchet MS

Trebuchet, designed by Vincent Connare in 1996, is a humanist sans serif designed for easy screen readability. Trebuchet takes its inspiration from the sans serifs of the 1930s which had large x heights and round features intended to promote readability on signs.

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

Museo Slab 500

Museo Slab is a robust slab serif with Museo's friendliness. It is a perfect match for Museo Sans.

Download Museo Slab from Codeshare
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

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="oit-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="oit-heading-alt">Line length - Desktop</h6>
<div class="oit-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="oit-heading-alt">Spacing</h6>
<h1>Section heading</h1>
<p class="oit-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 oit-content to your document. Use at the specificity that best suits your project’s needs.

Lists must use oit-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="oit-grid-full">
  <div class="oit-width-one-third">

    <h6 class="oit-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="oit-width-one-third">

    <h6 class="oit-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 oit-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.