Install FontSwap
Red Hat Text
About Red Hat Text
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Red Hat Text is the small-size half of the Red Hat type system. Paula Scher of Pentagram commissioned the family for Red Hat's identity, and Jeremy Mickel of MCKL designed it as a fresh take on the geometric sans, drawing on American sans-serifs including Tempo and Highway Gothic.
The system comes in two optical sizes. Red Hat Display is spaced tightly with a large x-height, built for headlines. Red Hat Text has a slightly smaller x-height, a narrower width, more generous spacing and thinned joins, all adjustments that help at body and caption sizes. The two are designed to be used together, so the natural setup is Display for headings and Text for everything else.
Technically, Red Hat Text is a variable font with a weight axis from Light (300) to Bold (700), with italics; it became variable in June 2021. A November 2024 update adjusted the Medium and SemiBold weights for a more even distribution, so older mockups may look slightly different. Coverage is Latin and Latin Extended.
It suits product documentation, enterprise software interfaces and long reports. Red Hat Text is free under the SIL Open Font License 1.1 on Google Fonts.
Is Red Hat Text on Google Fonts?
Yes, Red Hat Text is available for free on Google Fonts. Get Red Hat Text on Google Fonts ↗
Compare Red Hat Text
See how Red Hat Text compares to other fonts side by side.
Variable Font Axes
Red Hat Text is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 700 |
How to Use Red Hat Text
Copy these code snippets to quickly add Red Hat Text to your project.
CSS code for Red Hat Text
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@100..900&display=swap');HTML code for Red Hat Text
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Red Hat Text
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'red-hat-text': ['"Red Hat Text"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-red-hat-text">Your text here</p>Next.js code for Red Hat Text
// Using next/font (Next.js 13+)
import { Red_Hat_Text } from 'next/font/google';
const red_hat_text = Red_Hat_Text({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={red_hat_text.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Red Hat Text"' }}>Your text</p>Expo and React Native code for Red Hat Text
// Install: npx expo install @expo-google-fonts/red-hat-text expo-font
import { useFonts, Red_Hat_Text_400Regular } from '@expo-google-fonts/red-hat-text';
export default function App() {
const [fontsLoaded] = useFonts({
Red_Hat_Text_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Red_Hat_Text_400Regular' }}>
Your text here
</Text>
);
}