Typography

OverviewScaleUsage
  1. Using styles
  2. Line length
  3. Best practices
  1. Using styles
  2. Line length
  3. Best practices

Using styles

Headings

Headings are used to establish hierarchy and introduce content.

3 examples of headings: Large, medium, and small.

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.

Example of body text with an inline link.

Code text

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

Example of code text with 3 lines.

Title

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

2 examples of titles: Small and large.

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.

Example of blockquote with quote icon and attribution.

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.

2 examples of line length: The first example shows that comfortable text is between 4 and 8 columns wide. The second example shows that comfortable text is no more than 800 pixels wide.

Best practices

Using headings

Example of a heading set correctly in Red Hat Display.

Use the correct font family for the correct use case.

 Example of a heading set incorrectly in Red Hat Text.

Do not use Red Hat Text for headings.

Using body text

Example of body text set correctly in Red Hat Text.

Use the correct font family for the correct use case.

 Example of body text set incorrectly in Red Hat Display.

Do not use Red Hat Display for blocks of body text on websites.

Spacing in between text styles

Example of comfortable spacing in between various text styles which is correct.

Use comfortable spacing in between text styles.

 Example of uncomfortable spacing in between various text styles which is incorrect.

Do not space text too close together. Ensure users can read each style separately.

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.
Edit this page on GitHub