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.
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 |
| Blockquote, lg | Display, Regular | 28pt / 37 (1.3) | |
| Blockquote, 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 |
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) |
| Blockquote, lg | 28pt / 37 (1.3) | Decreases to 24pt / 31 (1.3) |
| Blockquote, 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 |
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.
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, 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, 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
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.
Feedback
To give feedback about anything on this page, contact us.
