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.

Display One

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

Display Two

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

Display Three

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

Display Four

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

Display Five

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

Display Six

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

Display Seven

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

Body One

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

Body Two

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

Body Three

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

Body Four

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