Our font family
We use Red Hat Display and Red Hat Text. Red Hat Display should be used for larger text headlines, while Red Hat text should be used for smaller subheaders and body text, for better long-form readability.
DOWNLOADUsage 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.
Incorrect
Don't use solely text to align with spacing elements when designing. Always include the line height space.
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
- Lists should use body text style with 8px between items.
- 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
