Install FontSwap
Space Grotesk
About Space Grotesk
- 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 →Space Grotesk is a proportional sans-serif typeface designed by Florian Karsten, derived from Space Mono. Released in 2018, it retains the technical, futuristic character of its monospace sibling while offering the improved readability of proportional spacing.
History and Design
Florian Karsten created Space Grotesk as a proportional companion to Space Mono, which was originally designed for Google. The typeface preserves the distinctive geometric and technical aesthetic of the original while adapting the letter spacing and proportions for use in headlines and body text. Its design evokes a sense of precision and futurism without sacrificing legibility.
Why Space Grotesk is Popular
Space Grotesk has become a favorite among designers working on tech, gaming, and creative projects. It serves as an excellent free alternative to premium display grotesques like Monument Grotesk and Clash Grotesk. The font's distinctive character makes it ideal for brands wanting to stand out while maintaining professionalism.
Technical Features
- Variable font: Weight axis from Light (300) to Bold (700)
- Geometric foundations: Clean, precise letterforms
- Technical aesthetic: Futuristic without being gimmicky
- Tabular figures: Perfect for data and code displays
- Extended Latin: Support for Vietnamese and extended Latin characters
Best Use Cases
Space Grotesk excels in:
- Tech branding: Perfect for software and hardware companies
- Gaming: Futuristic aesthetic suits gaming interfaces
- Editorial headers: Strong display presence
- Data dashboards: Clear, technical appearance
- Creative agencies: Distinctive without being distracting
Usage Tips
Use Space Grotesk for headlines and display text at weight 500-700. For body text, weight 400 works well but consider pairing with a more traditional sans for long-form content. The lack of italics means you'll need to use weight changes or color for emphasis. Pairs naturally with Space Mono for a cohesive technical aesthetic.
Is Space Grotesk on Google Fonts?
Yes, Space Grotesk is available for free on Google Fonts. Get Space Grotesk on Google Fonts ↗
Alternative For (13)
Space Grotesk is a free alternative to the following premium fonts:
Geometric grotesk with distinctive character and variable weight axis
Compare Space Grotesk
See how Space Grotesk compares to other fonts side by side.
Variable Font Axes
Space Grotesk is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 700 |
Font Pairings
Fonts that pair well with Space Grotesk based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Space Grotesk in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Space Grotesk.
@font-face {
font-family: 'Space Grotesk Fallback';
src: local('Arial');
ascent-override: 98.4%;
descent-override: 29.2%;
line-gap-override: 0%;
size-adjust: 93.72%;
}How to Use Space Grotesk
Copy these code snippets to quickly add Space Grotesk to your project.
CSS code for Space Grotesk
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@100..900&display=swap');HTML code for Space Grotesk
<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=Space+Grotesk:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Space Grotesk
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'space-grotesk': ['"Space Grotesk"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-space-grotesk">Your text here</p>Next.js code for Space Grotesk
// Using next/font (Next.js 13+)
import { Space_Grotesk } from 'next/font/google';
const space_grotesk = Space_Grotesk({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={space_grotesk.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Space Grotesk"' }}>Your text</p>Expo and React Native code for Space Grotesk
// Install: npx expo install @expo-google-fonts/space-grotesk expo-font
import { useFonts, Space_Grotesk_400Regular } from '@expo-google-fonts/space-grotesk';
export default function App() {
const [fontsLoaded] = useFonts({
Space_Grotesk_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Space_Grotesk_400Regular' }}>
Your text here
</Text>
);
}