Install FontSwap
Raleway
About Raleway
- 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 →Raleway is an elegant geometric sans-serif typeface designed by Matt McInerney, Pablo Impallari, and Rodrigo Fuenzalida. Originally a single thin weight, it has grown into a comprehensive family known for its distinctive character and sophisticated appearance.
History and Design
Matt McInerney designed Raleway as a single thin display font in 2010 for The League of Moveable Type. Its elegant, distinctive style quickly gained popularity, leading Pablo Impallari and Rodrigo Fuenzalida to expand it into a full family with nine weights and matching italics. The 2012 expansion maintained the original's character while making it practical for a wider range of uses.
Raleway's most distinctive feature is its unique letterforms, particularly the characteristic 'W' with its crossed center strokes, which give it immediate recognizability.
Why Raleway is Popular
Raleway occupies a unique space between geometric precision and elegant display character. Its thin weights have become synonymous with modern, minimal design, while heavier weights offer strong impact for headlines. The font communicates sophistication and creativity, making it popular with designers, agencies, and creative brands.
Technical Features
- Variable font: Complete weight axis from Thin to Black
- 9 weights: 100-900 with matching italics
- Extended language support: Latin, Cyrillic, and Vietnamese
- Distinctive characters: Unique W, M, and numeral designs
- OpenType features: Stylistic alternates, old-style figures, and contextual alternates
Best Use Cases
Raleway excels in:
- Creative branding: Distinctive logos and visual identity
- Editorial design: Elegant magazine and blog typography
- Portfolio websites: Sophisticated designer aesthetic
- Fashion and beauty: Refined, stylish applications
Usage Tips
Raleway's thin weights (100-300) create stunning headlines when set large, but they can become difficult to read at small sizes. For body text, use weights 400-500 and consider slightly increased line height for improved readability. The distinctive 'W' and other unique letterforms can be a feature or a distraction depending on context—consider the overall design before committing to Raleway for body text. Pair with neutral serifs like Source Serif Pro to balance its distinctive character.
Is Raleway on Google Fonts?
Yes, Raleway is available for free on Google Fonts. Get Raleway on Google Fonts ↗
Alternative For (7)
Raleway is a free alternative to the following premium fonts:
Comparable elegance with slightly more refined letterforms
Shares geometric elegance with distinctive calligraphic stroke contrast
Shares geometric foundations with elegant thin weights for display use
Elegant design with comparable letter shapes in lighter weights
Elegant geometric sans with similar sophisticated proportions
Elegant geometric sans with distinctive display qualities
Compare Raleway
See how Raleway compares to other fonts side by side.
Variable Font Axes
Raleway is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
Font Pairings
Fonts that pair well with Raleway based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Raleway in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Raleway.
@font-face {
font-family: 'Raleway Fallback';
src: local('Arial');
ascent-override: 94%;
descent-override: 23.4%;
line-gap-override: 0%;
size-adjust: 100.09%;
}How to Use Raleway
Copy these code snippets to quickly add Raleway to your project.
CSS code for Raleway
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap');HTML code for Raleway
<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=Raleway:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Raleway
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'raleway': ['Raleway', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-raleway">Your text here</p>Next.js code for Raleway
// Using next/font (Next.js 13+)
import { Raleway } from 'next/font/google';
const raleway = Raleway({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={raleway.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Raleway'" }}>Your text</p>Expo and React Native code for Raleway
// Install: npx expo install @expo-google-fonts/raleway expo-font
import { useFonts, Raleway_400Regular } from '@expo-google-fonts/raleway';
export default function App() {
const [fontsLoaded] = useFonts({
Raleway_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Raleway_400Regular' }}>
Your text here
</Text>
);
}