Fonts and typography

Alignment

Alignment, sometimes referred to as justification, is the way multiple lines of text are aligned to each other and the elements around them.

At Red Hat, we use flush left text most of the time, and centered text in places where the text needs to be aligned with other centered elements in a narrow space, like presentations or web cards.

Most text should be flush left.

Use centered text when necessary, like short headers or captions on a slide or web card.

Only use flush right text when the context demands it, like a narrow sidebar in collateral.

Never justify bodies of text. It leaves awkward gaps and looks outdated.

Case

Case is the capitalization of letters in text. We want our messaging to be approachable and authentic, so we designed our font to look best in sentence case. Avoid all caps text.

For guidance on capitalizing specific words, reference the corporate style guide (Red Hat credentials required).

Use sentence case, even for titles and headlines.

Avoid using title case unless you’re referring to a proper noun, like a book title or product name.

Never use all caps text, even for small labels.

Color

When applying color to text, legibility is the priority. For that reason, most body copy should be black or white. We often use Red Hat red to draw attention to large headlines or pull quotes, but long paragraphs should never be red.

To draw attention, we often use red for large text like headlines. Use black or white for the rest of the text.

In most cases, avoid using a color other than black or white for body copy.

Color contrast is measured as a ratio that describes the difference in perceived brightness between the foreground and background color. Low contrast can make text hard or impossible to read.

Text contrast is important and must be considered in all applications—even internal presentations or pages on The Source. We aim to meet WCAG 2.1 AA contrast ratio standards meaning that—with a few exceptions—text and images of text should have a 4.5:1 contrast ratio against the background.

Check the contrast of your text with a tool like Adobe Color to make sure that it’s meeting accessibility requirements.

Don’t use text that fails to meet color contrast requirements.

Emphasis

Emphasis helps important words and phrases stand out, but too much emphasis can be distracting. Emphasize text by making it bold or changing the color, but only use 1 treatment at a time.

Do not create emphasis using italics, underline, or all caps.

Use 1 treatment to create emphasis. Choose the most important word or phrase to emphasize.

Avoid overusing emphasis. If everything stands out, nothing does.

Don’t use more than 1 type of emphasis at once. It creates confusion and makes it difficult for the audience to decide what’s most important.

We emphasize hyperlinks so they clearly stand out from the rest of the text. In most cases, hyperlinks should be blue (blue-50 on light backgrounds and blue-40 on dark backgrounds) and have an underline. For web and product design, refer to the link guidance in the Red Hat digital design system (web) or PatternFly (product).

Hierarchy

Good hierarchy is key to telling a story, and there are many ways to create it—spacing, color, text size, and text weight. We use hierarchy to guide the reader through the text in the order that we want them to read it.

Make headlines big, bold, or both, to capture attention. We also often make headlines red to make them unmistakably Red Hat.

Line height

Line height—also known as leading—is the vertical space between lines of text in the same paragraph. Line heights that are too tight or too loose can make the text difficult to read. Typography at Red Hat should feel open, but we don’t want to impact legibility by overly increasing line heights.

The line height you should use depends on the application, but the Red Hat font family looks best with line height between 110% (1.1x) and 150% (1.5x) of the font size. PatternFly, the Red Hat digital design system, and our templates recommend specific line heights for their applications.

For most text, set the line height to between 120% and 150% (or 1.2x to 1.5x the font size). Prioritize legibility.

For large text over 150, decrease the line height to 110% or 1.1x the font size.

Never increase the line height to more than 150% or 1.5x times the font size.

Never use line height less than 110% or 1.1x the font size. It looks awkward.

Line length

Line length is measured by the number of characters in a single line of text, including spaces. Lines that are too long can be difficult to follow. At the same time, lines shouldn’t be so short that only a few words fit per line.

Use line lengths between 20 and 100 characters, including spaces. It’s okay—and preferable—to have white space beside the text rather than filling the entire area. This increases readability and makes our layouts feel more open.

Use line lengths between 20 and 100 characters, including spaces. It’s okay—and preferable—to have white space beside the text rather than filling the entire area. This increases readability and makes our layouts feel more open.

Appropriate line length for headlines depends on the size of the text. In general, they should be short and broken into multiple lines rather than running across the entire box or page. If a headline needs more than 3 lines, it’s too long.

Break headlines into multiple lines when necessary.

Whenever possible, avoid breaking a single word in a headline onto its own line and creating a widow.

Whenever possible, avoid headlines that run the entire length of the text box or width of the page.

Avoid headlines that are too short. Ideally, headlines should be around 3/4ths of the length of the text below (depending on font size).

Margins

The margin is the space between text and the edge of the container or nearby objects. We use generous margins for open, approachable layouts. Don’t crowd or fill an entire space with text—find a more concise way to get your point across instead.

The exact size of the margin depends on the design system and size of the layout. Refer to the appropriate template or design system guidelines for specifics.

Use a large margin with lots of white space (even if it's not the color white) for maximum impact.

Never decrease or remove margins to fit more text—it looks awkward and can be hard to read. Be more concise instead.

Pull/block quotes

We use several different quote styles. Which style you choose depends on the context and layout, but in general, make sure that a quote looks like a quote.

In marketing materials 

In places like social media posts or presentation slides, we stylize quotes using the talk bubble icon. Use a hanging indent for the opening quotation mark.

On the web

Web applications use the blockquote style built into the digital design system, which combines the quote icon and large text. The style is determined by the website code.

There are other ways that quotes can be stylized, plus some things we should avoid. Learn more.

Punctuation

Quotation marks, apostrophes, and primes look similar but mean different things. The Red Hat font family uses slanted marks for quotation marks and apostrophes. Straight vertical marks should be used only to designate feet and inches, and not used interchangeably with quotation marks and apostrophes.

Quotation marks

Apostrophe

Primes (foot and inch marks)

Hyphens, en dashes, and em dashes also look similar. Hyphens are short dashes that join words together, like “log-in.” En dashes are slightly wider and separate numbers, like “2023–2024.” Em dashes—the widest dashes—are used to indicate a pause or break in a sentence. At Red Hat, we don’t place spaces before or after dashes.

Hyphen

En dash

Em dash

Always use the word “and” when there’s space. When space is constrained—in places like UI labels or headlines—replace “and” with an ampersand rather than a plus sign.

Replace “and” with an ampersand when space is constrained.

Don’t replace “and” with a plus sign or any other symbol.

For more details on punctuation at Red Hat, review the corporate style guide.

Rags, widows, and orphans

The rag is the alignment (or lack of alignment) of words along the edge of a body of text. When random lines in a paragraph stick out much farther than others, it can make the text difficult to follow. The rag will never be perfectly straight but we avoid big gaps by adjusting the width of the text box or manually moving words to the next line when needed.

Adjust the width of the text box (when possible) or manually move words to create a rag that's neat, without random lines that stick out.

Avoid rags where random lines stick out much farther than other lines. This is difficult (and annoying) to read.

Widows are single words that appear on their own line at the end of a body of text. Avoid widows by adjusting the width of the text box or by editing the copy.

Make sure that the last line of every paragraph has at least 2 words. Manually adjust the position of words if needed.

Don’t leave a widow in a paragraph.

Orphans are single lines of text that are separated from the rest of their paragraph. They’re most common when text is split across multiple columns or pages in a document, making it easy to miss the last line of text. Avoid orphans by moving another line to the next column or page.

When paragraphs split across columns or pages, make sure at least 2 lines appear after the split.

Don’t leave an orphan at the top of a column or page. The reader might miss it.

Tracking

Tracking, also known as letter or character spacing, is the horizontal space between all of the letters in a line of text. Tracking that’s too tight or too loose can impact legibility.

While we want typography at Red Hat to feel open, we don’t want to change the tracking in text for no reason. Our fonts have wide letterforms with open details, so the auto tracking is set to an optimal visual density for legibility.

Use the auto tracking built into the Red Hat fonts.

Never increase the tracking. Our typeface has appropriate tracking built in.

Don’t decrease it either.

In rare cases where text is used at less than 6px—like a boilerplate or in a dashboard—we can increase the tracking to 10 or 20 to maximize legibility.

Variable fonts

The variable version of our fonts include weight as a variable option, and are best used on web properties to decrease load times. If your desktop app doesn’t support variable fonts, use the traditional version instead.

Variable weight are sometimes adjusted via number instead of name. When using variable fonts, stick to the named weights (regular, bold, etc.) for consistency across applications. Don't use weights that aren't part of this set: