Install FontSwap
Geist
About Geist
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 →Geist is a neo-grotesque sans-serif typeface created by Vercel in collaboration with Basement Studio. Designed specifically for developer tools and modern web interfaces, it balances technical precision with clean, readable letterforms.
History and Design
Vercel commissioned Geist as part of their commitment to developer experience. The design draws from the neo-grotesque tradition while optimizing for screen rendering at all sizes. Its uniform stroke widths and open apertures ensure excellent legibility in UI contexts, code documentation, and web applications.
Best Use Cases
Geist excels in:
- Developer tools: IDE interfaces, documentation sites, dashboards
- Tech branding: SaaS products, startup identities, tech portfolios
- Web applications: Clean UI text, navigation, form labels
- Documentation: Technical writing, API references, readmes
Usage Tips
Geist's variable weight axis (100-900) provides full typographic flexibility. Use weights 400-500 for body text and 600-700 for headings. The font lacks italics, so use weight contrast for emphasis instead. Pairs naturally with Geist Mono for code blocks in technical documentation.
Is Geist on Google Fonts?
Yes, Geist is available for free on Google Fonts. Get Geist on Google Fonts ↗
Alternative For (5)
Geist is a free alternative to the following premium fonts:
Compare Geist
See how Geist compares to other fonts side by side.
Variable Font Axes
Geist 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 Geist based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Geist in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Geist.
@font-face {
font-family: 'Geist Fallback';
src: local('Arial');
ascent-override: 100.5%;
descent-override: 29.5%;
line-gap-override: 0%;
size-adjust: 102.21%;
}How to Use Geist
Copy these code snippets to quickly add Geist to your project.
CSS code for Geist
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');HTML code for Geist
<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=Geist:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Geist
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'geist': ['Geist', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-geist">Your text here</p>Next.js code for Geist
// Using next/font (Next.js 13+)
import { Geist } from 'next/font/google';
const geist = Geist({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={geist.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Geist'" }}>Your text</p>Expo and React Native code for Geist
// Install: npx expo install @expo-google-fonts/geist expo-font
import { useFonts, Geist_400Regular } from '@expo-google-fonts/geist';
export default function App() {
const [fontsLoaded] = useFonts({
Geist_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Geist_400Regular' }}>
Your text here
</Text>
);
}