Typography

Overview

Typography organizes content and creates hierarchies. It brings consistency to experiences and extends the brand presence across web properties.

Typography availability

Style

The Red Hat typeface is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. These two font families can be used together seamlessly and are available to download here.

Red Hat Display

The Display typeface is low contrast and spaced tightly with a large x-height and open counters.

Red Hat Text

The Text typeface has a slightly smaller x-height, a narrower width for better legibility, and thinned joins for a better performance at small sizes.


Text options

Headline

Headlines create various levels of content hierarchies.

Red Hat Enterprise Linux

Conquer complexity with Red Hat Enterprise Linux 8

Quote

Quotes are emphasized blocks of text that include a quote icon and attribution.

An example of a quote

Title

Titles disclose extra information above headlines or other content.

Linux platforms

Red Hat Enterprise Linux

Body copy

Body copy is a block of text that can include links or lists.

We support Red Hat Enterprise Linux on multiple architectures—from IBM Power servers and IBM Z mainframes to Arm microchips that power cloud workloads—so you can choose the right hardware for the right workload. All while using a single OS with a standardized experience.

Code

Code is text that features a monospace font that can be used for coding purposes.

for (i = (numElementsReturned - 1); i >= 0; i--) {

Line length

Headline and body copy line lengths aren’t measured by the number of characters. Instead, all text styles have a minimum width of three grid columns and a maximum width of eight grid columns on all screen sizes.


Scale

The type scale features a range of text sizes and weights created to support the needs of various kinds of content. There’s a type scale for desktop and mobile breakpoints.

Desktop scale

Style Font / weight Size / Line height PatternFly Elements classname
Headline, xxl Display, Regular 48pt / 58 (1.2) .pfe-title--6xl
Headline, xl Display, Regular 40pt / 48 (1.2) .pfe-title--5xl
Headline, lg Display, Medium 36pt / 47 (1.3) .pfe-title--4xl
Headline, md Display, Medium 28pt / 37 (1.3) .pfe-title--3xl
Headline, sm Display, Medium 24pt / 31 (1.3) .pfe-title--2xl
Headline, xs Display, Medium 20pt / 30 (1.5) .pfe-title--xl
Quote, lg Display, Regular 28pt / 37 (1.3)
Quote, sm Display, Regular 20pt / 30 (1.5)
Layout title Display, Medium (Uppercase) 20pt / 30 (1.5)
Card title Text, Regular (Uppercase) 16pt / 24 (1.5)
Body copy, xl Text, Regular 20pt / 30 (1.5) .pfe-text--xl
Body copy, lg Text, Regular 18pt / 27 (1.5) .pfe-text--lg
Body copy, md Text, Regular 16pt / 24 (1.5) .pfe-text--md
Body copy, sm Text, Regular 14pt / 21 (1.5) .pfe-text--sm
Body copy, xs Text, Regular 12pt / 18 (1.5) .pfe-text--xs
Button Text, Regular 16pt / 24 (1.5)
Primary Display, Bold 16pt / 24 (1.5)
Brick Text, Regular 16pt / 24 (1.5)
Default Display, Bold 18pt / 27 (1.5)

Mobile scale

When larger text styles are used on smaller screens, they automatically decrease in size to fit smaller layouts better. The mobile type scale is applied when the Tablet, portrait breakpoint is reached or when a screen becomes less than 768px wide.

Style Font / weight Size / Line height
Headline, xxl 48pt / 58 (1.2) Decreases to 35pt / 42 (1.2)
Headline, xl 40pt / 48 (1.2) Decreases to 29pt / 35 (1.2)
Headline, lg 36pt / 47 (1.3) Decreases to 26pt / 34 (1.3)
Headline, md 28pt / 37 (1.3) Decreases to 24pt / 31 (1.3)
Headline, sm 24pt / 31 (1.5) Decreases to 20pt / 26 (1.3)
Headline, xs 20pt / 30 (1.5) Decreases to 18pt / 27 (1.5)
Quote, lg 28pt / 37 (1.3) Decreases to 24pt / 31 (1.3)
Quote, sm 20pt / 30 (1.5) Decreases to 18pt / 27 (1.5)
Layout title 20pt / 30 (1.5) Decreases to 18pt / 27 (1.5)
Card title 16pt / 24 (1.5) Stays the same size
Body copy, xl 20pt / 30 (1.5) Decreases to 18pt / 27 (1.5)
Body copy, lg 18pt / 27 (1.5) Decreases to 16pt / 24 (1.5)
Body copy, md 16pt / 24 (1.5) Stays the same size
Body copy, sm 14pt / 21 (1.5) Stays the same size
Body copy, xs 12pt / 18 (1.5) Stays the same size
Button 16pt / 24 (1.5) Stays the same size
Primary 16pt / 24 (1.5) Stays the same size
Brick 16pt / 24 (1.5) Stays the same size
Default 18pt / 27 (1.5) Stays the same size

Usage

Each text style has its own unique hierarchy and application. Text styles can be used in layouts and in components to communicate messages or entice users to take an action.

Headline, xxl

The largest headline available. Use in big hero layouts, like Summit or campaign pages. Reserved for marketing use cases only.

Headline, xl

The second largest headline available. Use in hero layouts, like the home page or a product page. Reserved for marketing use cases only.

Headline, lg

The primary headline for important layouts that aren’t the hero. Try and use only once per page, otherwise use the Headline 2 style.

Headline, md

The secondary headline for important layouts that are lower in hierarchy. Use this style multiple times per page.

Headline, sm

The tertiary headline for other layouts lower in hierarchy. Use this style in components like a Card or in multiple layouts per page.

Headline, xs

The smallest headline available. Use this style under larger headlines or in select components, like an Accordion.

Quote, lg

The larger style for adding more emphasis to quotes. Try not to use this style around other content, otherwise use the Quote, sm style.

Quote, sm

The smaller style for all quotes. Use this style around other content or in smaller layouts and components, like a Card.

Layout title

The larger style for an important title. Use this style above larger headlines or above important content in any layout.

Card title

The smaller style for less important titles. Use this style above headlines in smaller layouts only, like a Card.

Body copy, xl

The largest body copy style. Use this style for long-form content only, like Topic and Article pages. Text should not exceed 8 columns in width for optimal readability.

Body copy, lg

The base body copy style for marketing use cases only, unless an app interface calls for a larger text size. Text should not exceed 8 columns in width for optimal readability.

Body copy, md

The base body copy style for app interfaces or some smaller components, unless a marketing use case calls for a smaller text size. Text should not exceed 7 columns in width for optimal readability.

Body copy, sm

The supporting body copy style for all use cases, like under Form fields or for attribution purposes. Text should not exceed 7 columns in width for optimal readability.

Body copy, xs

The smallest body copy style for legal or footnote use cases only. Text should not exceed 7 columns in width for optimal readability.

Button

Buttons and button links repurpose the Body copy, md style

Call to action (container)

Calls to action with a container (and sometimes a play icon) use variations of the Body copy, md text style.

Call to action (arrow)

Calls to action with an arrow (or sometimes a play icon) use variations of the Body copy, lg text style.


Best practices

Don't use Red Hat Text for headlines.

Red Hat and open source

Don’t use Red Hat Display for body copy.

We believe in collaboration. We believe in choice, control, and freedom. Open source values like meritocracy, community building, and transparency are changing the way we approach business and life.

Don’t space text styles too closely together.

Linux platforms

Red Hat Enterprise Linux

Don’t stack lots of text styles too closely together.

Headline, xxl

Headline, md

Headline, xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat lorem ullamcorper a. Curabitur tempor ante vitae ultrices dignissim.

Behavior

Responsive design

Text styles decrease in size when screens become smaller. This shift helps users consume content better without additional scrolling.

Desktop

Card typography scale on desktop

Mobile

Card typography scale on mobile

Interaction states

Since typography can be used in a variety of components, refer to the specific interaction states that are assigned to each component for more information


Feedback

To give feedback about this page, contact us.

Foundations

To learn more about color, grid, typography, etc., visit the Foundations section.