ORNL’s 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: Lato and Roboto Slab, both of which are designed for legibility and can beautifully adapt to a variety of visual styles.
Typefaces
Recommended
Roboto
Roboto is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Roboto provides clear headers as well as highly-readable body text. Roboto is in Google’s signature family of fonts, the default font on Android and Chrome OS, and the recommended font for Google’s visual language, Material Design.
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
Other Options
Lato
Lato is a sans serif typeface. Lato has a “transparent” quality when used in body text but displays some original traits when used in larger 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
Open Sans
Open Sans is a humanist sans serif typeface designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
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
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.
Note: Click on the linked heading text to expand or collapse accordion panels.
Code
<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> 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. <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. 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>
CSS
body {
color: #6B6B6B;
word-wrap: break-word;
font-family: 'Roboto', sans-serif;
line-height: 1.7;
font-size: 16px;
}
h1 {
color: #007833;
font-weight: 500;
font-size: 38px;
font-family: 'Roboto', sans-serif;
line-height: 1.1;
}
h2 {
color: #444;
font-size: 28px;
font-weight: 700;
font-family: 'Roboto', sans-serif;
line-height: 56px;
margin-bottom: 20px;
margin-top: 20px;
}
h3 {
color: #444;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
margin-top: 20px;
}
h4 {
color: #444;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
line-height: 56px;
margin-bottom: 20px;
margin-top: 20px;
}
h5 {
color: #444;
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
line-height: 1.1;
margin-bottom: 10px;
margin-top: 20px;
}
Links
Links lead users to a different page or further information.
This is a text link on a light background. This is a link that goes to an external website.
This is a text link on a dark background.
Code
Links lead users to a different page or further information. <div class="preview "> This is a <a>text link</a> on a light background. This is a link that goes to an <a class="external-link" href="#">external website</a>. <div class="background-dark"> This is a <a>text link</a> on a dark background.
CSS
a {
color: #007833;
}
.external-link:after {
content: "\f08e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-left: 0.2em;
}
.background-dark {
padding: 15px 15px 5px;
display: inline-block;
margin: 5px 0 15px;
border-radius: 5px;
background-color: #323a45;
max-width: 53rem;
}
.background-dark a {
color: #b0b0b1;
text-decoration: underline;
}
.background-dark p {
color: #ffffff;
}