Skip to main content Red Hat Design System logo Contribute on Github

Typography

Overview

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

Get started

To get started using our fonts, visit our GitHub repo.

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.

Red Hat Mono

The Mono typeface is our monospaced font that distinguishes code from natural-language text. It should only be used for code snippets or as a stylistic approach for a more technical audience.

Text options

Headline

Headlines create various levels of content hierarchies.

Red Hat Enterprise Linux

Conquer complexity with Red Hat Enterprise Linux 8

Blockquote

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

The moment we have an idea, we can start building the product

John Smith Senior Director, Dev Ops, Acme Corporation

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--) {
  console.log('Hello World');
}

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
Headline, 2xl --- ---
Headline, xl --- ---
Headline, lg --- ---
Headline, md --- ---
Headline, sm --- ---
Headline, xs --- ---
Blockquote, lg --- ---
Blockquote, sm --- ---
Layout title --- ---
Card title --- ---
Body copy, 2xl --- ---
Body copy, xl --- ---
Body copy, lg --- ---
Body copy, md --- ---
Body copy, sm --- ---
Body copy, xs --- ---

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, 2xl --- ---
Headline, xl --- ---
Headline, lg --- ---
Headline, md --- ---
Headline, sm --- ---
Headline, xs --- ---
Blockquote, lg --- ---
Blockquote, sm --- ---
Layout title --- ---
Card title --- ---
Body copy, 2xl --- ---
Body copy, xl --- ---
Body copy, lg --- ---
Body copy, md --- ---
Body copy, sm --- ---
Body copy, xs --- ---

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, 2xl

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.

Blockquote, lg

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

Blockquote, sm

The smaller style for all blockquotes. 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, 2xl

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, 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.

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, xl

Headline, lg

Headline, min-width

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

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.
© 2021-2024 Red Hat, Inc. Deploys by Netlify