Patternfly Logo

Typography

Our font family

We use Red Hat Display and Red Hat Text.

DOWNLOAD

Usage guidelines

Use typography to create visual hierarchy. A consistent and logical hierarchy makes it easier for users to quickly scan and understand information on a page.

First level title*

Design is where science and art break even.
Font family:RedHatDisplay
Font weight:400 (medium)
Line height:1.3
Font size:24px
Font size CSS variable:--pf-global--FontSize--2xl
*Not to be used in content block (such as landing pages and login screens)

Second level title

Design is where science and art break even.
Font family:RedHatDisplay
Font weight:400 (medium)
Line height:1.3
Font size:20px
Font size CSS variable:--pf-global--FontSize--xl

Third level title

Design is where science and art break even.
Font family:RedHatDisplay
Font weight:400 (medium)
Line height:1.5
Font size:18px
Font size CSS variable:--pf-global--FontSize--lg

Fourth level title

Design is where science and art break even.
Font family:RedHatDisplay
Font weight:400 (medium)
Line height:1.5
Font size:16px
Font size CSS variable:--pf-global--FontSize--md

Body*

Design is where science and art break even.
Font family:RedHatText
Font weight:400 (regular)*
Line height:1.5
Font size:16px
Font size CSS variable:--pf-global--FontSize--md
*Some components use RedHatText at 700 font weight, which is RedHatText Medium (such as alerts and navigation)

Small text

Design is where science and art break even.
Font family:RedHatText
Font weight:400 (regular)
Line height:1.5
Font size:14px
Font size CSS variable:--pf-global--FontSize--sm

Tiny text*

Design is where science and art break even.
Font family:RedHatText
Font weight:400 (regular)
Line height:1.5
Font size:12px
Font size CSS variable:--pf-global--FontSize--xs
*Not to be used in content blocks (only used with data visualizations when 14px is not small enough)

Code*

Design is where science and art break even.
Font family:Liberation Mono
Font weight:400 (regular)
Line height:1.5
Font size:16px
Font size CSS variable:--pf-global--FontSize--md
*Used for code blocks

Line height

When measuring spacing in text-based content, plan for line height.

For example, if a body of text uses a line height of 1.5 and the body text size is 16px, the final line height would be 24 px (16 * 1.5 = 24). In this case, include the 24px line height as part of the text when creating designs in the design software.

Correct

Include line height space when laying text with spacer elements.

correct line height space example

Incorrect

Don't use solely text to align with spacing elements when designing. Always include the line height space.

incorrect line height space example

Spacing

Spacing represents margins above and below text. Use spacers to provide appropriate spacing for each type of text. Text leading should be 1.5 times larger than text size.

8px
16px
24px
Line Height

First level title

Design is a journey of discovery

Body text should be RedHatText at 16px. It should have 24px leading.

Second level title

Design is a journey of discovery

Body text should be RedHatText at 16px. It should have 24 px leading.

Third level title

Design is a journey of discovery

  1. Lists should use body text style with 8px between items.
  1. Lists should use body text style with 8px between items.

    a. Secondary items in the list should use 8px spacing.

    b. They use the same body text style as primary items.

Fourth level title

Design is a journey of discovery

Body text should be RedHatText at 16px. It should have a 24px leading.

Small text style should be RedHatText at 14px.


View source on GitHub