Install FontSwap
Orbitron
About Orbitron
- Source
- Google Fonts ↗
- Classification
- display
- 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 →Orbitron is a geometric sans-serif display typeface designed by Matt McInerney. Released in 2009, it features a futuristic, space-age aesthetic with strictly geometric construction and distinctive letterforms.
History and Design
Matt McInerney designed Orbitron as a tribute to the geometric typography of the space age and science fiction. The design features perfectly circular bowls, straight lines, and sharp angles that create a distinctly futuristic appearance. Every letter adheres to strict geometric principles, giving the typeface a mechanical, technological character.
Why Orbitron is Popular
Orbitron has become the go-to free font for sci-fi and technology themes. It serves as a free alternative to premium futuristic display fonts used in gaming, space-themed projects, and tech branding. Its distinctive character makes an immediate visual statement without requiring custom lettering.
Technical Features
- Variable font: Weight axis from Regular (400) to Black (900)
- Strict geometry: Perfectly circular and linear forms
- All caps design: Optimized for uppercase with lowercase available
- No italics: Geometric forms don't lend to slanting
- Extended Latin: Support for European languages
Best Use Cases
Orbitron excels in:
- Sci-fi projects: Movie titles, game interfaces, book covers
- Tech branding: Futuristic technology companies
- Space themes: Astronomy, aerospace, NASA-style projects
- Gaming: HUD elements, score displays, menus
- Event branding: Tech conferences and futuristic events
Usage Tips
Use Orbitron for headlines and display text at 24px+. The geometric forms work best in all caps for maximum impact. Avoid for body text—the strict geometry creates reading fatigue. Pairs well with neutral sans-serifs like Roboto for supporting text. Weight 700-900 creates dramatic headlines while 400-500 works for smaller labels. Add letter-spacing for improved readability in UI contexts.
Is Orbitron on Google Fonts?
Yes, Orbitron is available for free on Google Fonts. Get Orbitron on Google Fonts ↗
Alternative For (1)
Orbitron is a free alternative to the following premium fonts:
Compare Orbitron
See how Orbitron compares to other fonts side by side.
Variable Font Axes
Orbitron is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 900 |
Font Pairings
Fonts that pair well with Orbitron based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Orbitron in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Orbitron.
@font-face {
font-family: 'Orbitron Fallback';
src: local('Arial');
ascent-override: 101.1%;
descent-override: 24.3%;
line-gap-override: 0%;
size-adjust: 111.85%;
}How to Use Orbitron
Copy these code snippets to quickly add Orbitron to your project.
CSS code for Orbitron
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@100..900&display=swap');HTML code for Orbitron
<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=Orbitron:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Orbitron
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'orbitron': ['Orbitron', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-orbitron">Your text here</p>Next.js code for Orbitron
// Using next/font (Next.js 13+)
import { Orbitron } from 'next/font/google';
const orbitron = Orbitron({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={orbitron.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Orbitron'" }}>Your text</p>Expo and React Native code for Orbitron
// Install: npx expo install @expo-google-fonts/orbitron expo-font
import { useFonts, Orbitron_400Regular } from '@expo-google-fonts/orbitron';
export default function App() {
const [fontsLoaded] = useFonts({
Orbitron_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Orbitron_400Regular' }}>
Your text here
</Text>
);
}