Typography
On this page
General guidelines
Do these things
Use our fonts: Red Hat Display, Text, and Mono.
Use generous margins and a lot of white space.
Use sentence case (yes, even for headings).
Make sure text is readable and legible.
Let the words speak for themselves.
Grab attention by making important headings big and red.
Avoid these things
Do not use random fonts.
Do not fill an entire space with text; it can be overwhelming.
Never use all caps; it is too aggressive.
Avoid text that lacks appropriate color contrast.
Avoid unnecessary ornamentation.
Never increase or decrease text tracking.
Specific guidelines
Choosing text styles
Choose the correct text style and color for the correct use case.
Do not choose text styles and colors randomly.
Headings and body text
Choose the correct font families for the correct use cases.
Do not use Red Hat Text for headings or Red Hat Display for body text on websites.
Linked text in paragraphs
In paragraphs, linked text must use our blue link color and an underline emphasis.
Using color only without other visual affordances causes barriers to access for some readers. Learn more in the Accessibility section.
Font weights
Use font weights to create emphasis.
The Bold weight will always have more emphasis than lighter weights even if the font size is the same.
Size pairings
Create balanced text size pairings for better visual harmony.
Do not pair huge and tiny text sizes; it creates tension.
Line length
Use a comfortable line length so body text is easy to read.
Do not stretch body text beyond 120 characters per line.
Number of text styles
Use an appropriate amount of text styles in the same block so readers are not overwhelmed by too much content.
Do not use more than 3 text styles at the same time in the same block. Add padding or use components to organize text instead.
Space between text styles
Follow spacing best practices when stacking text styles.
Do not stack text too tightly. A user should be able to read each style independently of the others.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other foundations in your designs, visit the foundations section.
