Components

Typography

Typography is one of the most effective tools for communicating the meaning of data to users. When building data visualizations, establishing a clear hierarchy of typographic elements and using easy-to-read font families will help users better understand and interact with your data.

Typefaces

The typefaces presented in this section adhere to 2018 U.S. Census Bureau Identity and Branding Standards. If you are not a member of the U.S. Census Bureau, we recommend referencing your agency’s latest brand guidance for typeface recommendations.

Roboto

Roboto is a sans-serif typeface developed by Google. With a variety of weights that read easily at all sizes, Roboto provides clear headers as well as highly-readable body text.

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settle in to their natural width.

Roboto is licensed under the Apache License 2.0.

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

Roboto Alternatives

When creating visualizations for print or when Roboto is unavailable, you can use Gotham or Calibri as alternatives.

Lora

Lora is a serif typeface developed by Google. It is a well-balanced contemporary serif with roots in calligraphy. Lora is a text typeface with moderate contrast well suited for body text.

Technically Lora is optimized for screen appearance, and works equally well in print.

Lora is licensed under the Open Font License 1.1.

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

Lora Alternatives

When creating visualizations for print or when Lora is unavailable, you can use Chronicle or Cambria as alternatives.

Choosing a Typeface for Screens

When designing data visualizations for screens, such as mobile, web, or presentation, we generally recommend using sans-serif fonts. Sans-serif fonts tend to scale better in lower-resolution screens and are more commonly used in websites.

Font Sizing

Data visualizations use a blend of font sizes to establish a clear hierarchy of elements, known as typesetting. To maximize the usability of a data visualization, font sizes should be optimized for readability.

Readability of type depends on the display quality and viewing distance for presenting a data visualization. For example, websites often use a 16pt font size as it is optimized for legibility given the average view distance and screen quality.

Accessibility

As a general rule, we recommend using a minimum font size of 9pt for screens and 6pt for print. Though there are no rigid requirements for 508 compliance regarding font sizes, striving for font sizes as close to 16pt as possible will ensure your data visualizations are as readable and user-friendly as possible.

Below is a spectrum of font sizes that demonstrates the difficulty of reading text below the 9pt threshold.

a
6
a
7
a
8
a
9
a
10
a
11
a
12
a
14
a
16
a
18
a
21
a
24
a
28
a
32
a
36
a
42
a
48
a
60

Letter Spacing

Letter spacing, or kerning, is the spacing between individual characters. We recommend using the default letter spacing of whichever typeface you choose to maximize the readability of text in your data visualization.

Typesetting

Using a clear hiearchy of type and consistent alignment helps users to focus on the most important elements of data visualizations. In addition to the text elements inside of a visualization, it’s also important to extend these principles to external elements, such as the title, description, and source information of the data visualization.

Example

Languages Spoken at Home in New York

English-only is the most commonly spoken language at home.

Survey/Program: 2016 American Community Survey 1-Year Estimates

Guidance

Requirements

Always

Never

Recommendations

Recommended