Typography

Using styles

Headings

Headings are used to establish hierarchy and introduce content.

Body text

Body text is used for blocks of text including inline links and lists. Do not center align too many lines of body text.

Code text

Code text is used for code snippets or to style text for technical audiences. Do not center align code text.

Title

Titles are used above content to explain what can be expected underneath. Titles should always be sentence case and never uppercase.

Blockquote

A blockquote is a combination of a quote icon and text styles used to add emphasis to quotes. A blockquote should always include attribution. The name is always medium weight and the company name is always italic.

Line length

Shorter lines of text tend to be more comfortable to read. As line length increases, the eye has to travel further from the end of one line to the beginning of the next line, making it difficult to focus and keep track of progress.

If you are placing text by itself on a grid, a comfortable line length is between 6 and 8 columns. When text is in a fluid layout, set the max-width to 50rem (800px). When text is in a component like a card, the line length is determined by the width of the component.

Best practices

Using headings

Using body text

Spacing in between text styles

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.