Typography

Our font family

We use the open source typeface, Overpass, inspired by Highway Gothic.

DOWNLOAD OVERPASS

Usage guidelines

Use our typographic styles to communicate visual hierarchy. A consistent and logical hierarchy provides a clear pattern for users, making it easier to quickly scan and understand information on a page.

Hero title*

Font Family:Overpass (Regular/400)
Font Size:36px
Line Height:1.3
Global CSS variable:--pf-global--FontSize--4xl
Design is where science and art break even.
*Not to be used in content block (Landing pages, login, etc.)

Main title

Font Family:Overpass (Regular/400)
Font Size:28px
Line Height:1.3
Global CSS variable:--pf-global--FontSize--3xl
Design is where science and art break even.

Secondary title

Font Family:Overpass (Regular/400)
Font Size:24px
Line Height:1.3
Global CSS variable:--pf-global--FontSize--2xl
Design is where science and art break even.

Subtitle

Font Family:Overpass (Regular/400)
Font Size:21px
Line Height:1.5
Global CSS variable:--pf-global--FontSize--xl
Design is where science and art break even.

Fourth level title

Font Family:Overpass (Semibold/500)
Font Size:18px
Line Height:1.5
Global CSS variable:--pf-global--FontSize--lg
Design is where science and art break even.

Fifth level title

Font Family:Overpass (Semibold/500)
Font Size:16px
Line Height:1.5
Global CSS variable:--pf-global--FontSize--md
Design is where science and art break even.

Body

Font Family:Overpass (Regular/400)
Font Size:16px
Line Height:1.5
Global CSS variable:--pf-global--FontSize--md
Design is where science and art break even.

Small text

Font Family:Overpass (Regular/400)
Font Size:14px
Line Height:1.3
Global CSS variable:--pf-global--FontSize--sm
Design is where science and art break even.

Tiny text*

Font Family:Overpass (Regular/400)
Font Size:12px
Line Height:1.3
Global CSS variable:--pf-global--FontSize--xs
Design is where science and art break even.
*Not to be used in content block (Only used with data visualizations when 14px is not small enough.)

Line height

When laying out text-based content, you need to factor in line-height when measuring spacing. Line height is a relative number used in CSS that represents a ratio to the text size. For example, body text uses a line height of 1.5. Body text size is 16px. 16*1.5 = 24px line height. So, when creating designs in design software, you must include the 24px line height as a part of the text.
Correct
Note how the line height space is included when laying out with spacer elements.
Incorrect
Do not use the text itself to align with spacing elements when designing. Remember to always include the line height space.

Spacing

The spacing of the content comes into play with line height too. It represents the margins that are padded on top and bottom of the text itself. When creating specs, it is important to use these spacers to communicate the appropriate spacing for each type of text.
8px
16px
24px
Line Height
Hero title
Design is a journey of discovery
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
Main title
Design is a journey of discovery
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
Secondary title
Design is a journey of discovery
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
1. Lists should use body text style with 8px between items.
2. This is the second item in the list.
    a. Secondary items in the list should use 8px spacing.
    b. They still use the same text styling, however.
Subtitle
Design is a journey of discovery
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
Fourth level title
Design is a journey of discovery
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
Fifth level title
Design is a journey of discovery
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
Small text style should be Overpass Regular at 14px.