Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

Typography

Typography is the physical appearance of written text. It includes the sizes, line heights, colors, and fonts that are used.

Usage

Typography settings are foundational to Spark components and will also be foundational to your application. See each variant below for specific usage.

Variants

Page Title

The Page Title is used on primary pages that contain multiple jumping off points as well as core product features and flows. It should only be used once at the top of the main content of a page. Page Title should only be used with Display One and Display Two.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display One

This display size is intended to be used for primary headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display Two

This display size is intended to be used for secondary headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display Three

This display size is intended to be used for third-level headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display Four

This display size is intended to be used for fourth-level headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display Five

This display size is intended to be used for fifth-level headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display Six

This display size is intended to be used for sixth-level headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Display Seven

This display size is intended to be used for seventh-level headings.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Body One

This body type is intended for sub-labels and any copy within a paragraph that needs to be emphasized.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Body Two

This is the default sizing for all non-display text.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Body Three

This body type has a larger line height and is intended for long sections of text that need greater readability.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Body Four

This body type is intended for legal text and other de-emphasized text.

Developer Documentation

Information on how to implement this component is available for the following technologies.