Install FontSwap
Urbanist
About Urbanist
- 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 →Urbanist is a low-contrast geometric sans-serif that Corey Hu launched in 2020, inspired by Modernist typography and design. It is conceived from elementary shapes, and the result is a deliberately neutral face that its Google Fonts description calls a versatile display font for print and digital media.
Because it is so neutral, the weight you choose does most of the expressive work. The variable weight axis runs from Thin (100) to Black (900), with italics, so the same family can look precise and airy at large light settings or blunt and confident in Black.
Best use cases
- Headlines and hero text for tech, real estate and design-led brands
- Logotypes and wordmarks that need a clean geometric base
- Presentation decks and posters, where its neutrality keeps the focus on content
- Short interface text such as buttons, navigation and labels
For long body copy, test 400 at your target size first. Strict geometric construction tends to favour headings and short text, and a more humanist sans may read better in dense paragraphs.
Urbanist covers Latin and Latin Extended. It is free on Google Fonts under the SIL Open Font License 1.1.
Is Urbanist on Google Fonts?
Yes, Urbanist is available for free on Google Fonts. Get Urbanist on Google Fonts ↗
Compare Urbanist
See how Urbanist compares to other fonts side by side.
Variable Font Axes
Urbanist is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Urbanist
Copy these code snippets to quickly add Urbanist to your project.
CSS code for Urbanist
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100..900&display=swap');HTML code for Urbanist
<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=Urbanist:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Urbanist
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'urbanist': ['Urbanist', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-urbanist">Your text here</p>Next.js code for Urbanist
// Using next/font (Next.js 13+)
import { Urbanist } from 'next/font/google';
const urbanist = Urbanist({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={urbanist.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Urbanist'" }}>Your text</p>Expo and React Native code for Urbanist
// Install: npx expo install @expo-google-fonts/urbanist expo-font
import { useFonts, Urbanist_400Regular } from '@expo-google-fonts/urbanist';
export default function App() {
const [fontsLoaded] = useFonts({
Urbanist_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Urbanist_400Regular' }}>
Your text here
</Text>
);
}