Typography

Typography tokens help keep visual consistency for text formatting across themes.

These tokens (in the form of CSS classes) should be applied to any text appearing in the app. This allows for easy text formatting changes in the future as well as consistent cross app / brand formatting.

Web developers have two options to apply Typography Tokens:

• Use Typography components Display, Heading, and Body. (These are no different from manually applying CSS classes, it's just a component that applies the same CSS classes with other convenient helper functionality)
• Use Typography CSS Classes. These are tied to each theme, and each theme might have different typography definitions for the classes. An example of a CSS class would be .display-3xl-bold.

Your Figma specs will reference which typography token to use when inspecting text. In figma it might be represented as body/xl, or heading/sm. Replace the / character with a - character for the CSS class.

// Display component example:
<Display size="xl-bold">This would be text formatted by .display-xl-bold</Display>

// or you can apply the CSS Class to your own element
<div className="display-xl-bold">This text would be formatted the same as above.</div>

Body

Heading

Display