Chart components

Using the appropriate font not only increases consistency with the core brand, but assures legibility and good visual hierarchy. Proper labeling and titles help users quickly understand the chart and increases comprehension as well as helping with accessibility.

Key questions
  • Does your chart have a descriptive title and subtitle so someone who cannot see the chart could understand the general trends?
  • Have you included notes and a data source?
  • Is it clear when the data is from?

Font

All data, labels and titles for data visualizations should be in a sans-serif font. The preferred choices for fonts are: Avenir Next over Arial, and Arial over another sans serif font.

While serif fonts are generally easier to read for long blocks of text, data visualizations rarely include long blocks. The lack of serifs, especially on numbers, helps cut down on the amount of lines and visual clutter. This lack also increases the legibility of small text by eliminating thin serifs.

Titles

Titles should be as descriptive as possible to give users a sense of what the chart will be about. This not only provides users a framework of what they are looking at, but also helps with 508 accessibility and decreases the amount of text necessary in alt tags.

Labeled display of the titles on a chart.

Labels and keys

Wherever possible, charts should not include a key, and data should be directly labeled. This reduces the cognitive burden for the user so they are not hunting for labels and trying to connect colors to the data.

Labeled display of the titles on a chart.

Labeled display of the titles on a chart.

Reports

Figure number

  • Uses the Figure number style (all caps)

Title

  • Gives an overview of what the graph is about
  • Uses the h3 heading style
  • 2 lines of text maximum

Subtitle

  • Explains the general trends of the graph and what that means, including why it is important
  • Uses the h4 heading style
  • 3 lines of text maximum

Notes

  • Describes any caveats or inconsistencies with the data such as explaining why numbers do not add up to 100% or the specific dates that the data is pulled from

Data source information

  • Provides a link to the URL of a spreadsheet or to the source of the data
  • Important to include for trustworthiness and validity
  • Allows people to dive deeper into the data and explore the nuances for themselves or to replicate the visualization

Blog posts

Title

  • Gives an overview of what the graph is about
  • Uses the h3 heading style
  • 2 lines of text maximum

Subtitle

  • Explains the general trends of the graph and what that means, including why it is important
  • Uses the h4 heading style
  • 3 lines of text maximum

Notes

  • Describes any caveats or inconsistencies with the data such as explaining why numbers do not add up to 100% or the specific dates that the data is pulled from

Date

  • Include a date to at least the month and year of when the data was collected to provide context and accuracy over time.

Data source information

  • Provides a link to the URL of a spreadsheet or to the source of the data
  • Important to include for trustworthiness and validity
  • Allows people to dive deeper into the data and explore the nuances for themselves or to replicate the visualization

Social media

Title

  • Gives an overview of what the graph is about
  • Uses the h3 heading style
  • 2 lines of text maximum

Subtitle

  • Explains the general trends of the graph and what that means, including why it is important
  • Uses the h4 heading style
  • 3 lines of text maximum

Notes

  • Describes any caveats or inconsistencies with the data such as explaining why numbers do not add up to 100% or the specific dates that the data is pulled from

Date

  • Include a date to at least the month and year of when the data was collected to provide context and accuracy over time.

Data source information

  • Provides a link to the URL of a spreadsheet or to the source of the data
  • Important to include for trustworthiness and validity
  • Allows people to dive deeper into the data and explore the nuances for themselves or to replicate the visualization
  • Include the CFPB logo; helps with identification and determining origin if the graphic gets re-used