Text and data overview

Text and data components help reduce cognitive load, allow users to locate information quickly and keep them interacting with your website. They provide different ways to:

  • Organize and highlight the information hierarchy on a page
  • Make information readable, scannable and easy to identify

Considerations and cautions

  • Use a single or pairing of typefaces for all headings, subtitles, body, label and captions for a cohesive experience.
  • Use larger font weight (Light, Medium, Regular), size, letter spacing and case to communicate hierarchy.
  • Use natural, clear and succinct language to help users complete their task on the page.

Text and data components

  • Blockquote

    Highlights and differentiates content from the rest of the copy.

  • Connected scatter plot

    A connected scatter plot, also known as a path graph or line-plot, is a type of data visualization that combines elements of both scatter plots and line graphs.

  • Data display

    Allows users to easily sift through large amounts of data.

  • Duration block

    Shows the progress of an event or a project in time.

  • Headings

    Use a consistent font style to label sections of content.

  • Interactive bar chart

    Breaks down complex concepts for the users.

  • List

    Visually separate items to make content easier to scan.

  • Line graph

    A line graph is a type of data visualization that displays information as a series of data points, or markers, connected by straight lines.

  • Map

    Displays multiple location pins with additional site data.

  • Paragraph

    Allows for consistent looking detailed and supporting information.

  • Table

    Add and format text content.

  • Data refresh indicator

    Show page updates

  • Questionnaire

    Progressive disclosure

  • Range slider

    Allows users to adjust a value by moving an indicator, or slider, along a visualized track.