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.
Alternative For (10)
Space Grotesk is a free alternative to the following premium fonts:
How to Use Space Grotesk
Copy these code snippets to quickly add Space Grotesk to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@100..900&display=swap');HTML Link Tags
<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 CSS
// 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>React / Next.js
// 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>