Install FontSwap
Cabin
About Cabin
- 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 →Cabin is a humanist sans-serif typeface designed by Pablo Impallari, inspired by Edward Johnston's typeface for the London Underground and Eric Gill's subsequent designs. It balances modernist proportions with humanist warmth, creating a friendly yet professional typeface.
History and Design
Pablo Impallari began Cabin as a study of geometric and humanist type design traditions. The typeface takes cues from early 20th century British sans-serifs while maintaining contemporary sensibilities. The subtle angles in the stems and the slightly rounded terminals give Cabin a distinctive warmth without compromising its geometric foundations.
The 2020 update added variable font support, making the family more flexible for modern responsive design. The italic version features true cursive forms rather than slanted romans, adding expressiveness for emphasis and display use.
Why Cabin Works
Cabin occupies a sweet spot between geometric precision and humanist warmth. It feels more approachable than Helvetica or Univers while remaining more professional than casual rounded typefaces. This balance makes it suitable for brands that want to appear friendly and trustworthy simultaneously.
The condensed width variations in the original release have since been separated into Cabin Condensed, giving designers more flexibility in their typographic palette.
Technical Features
- Variable font: Weight axis from Regular to Bold
- True italics: Cursive forms with distinct character
- Condensed variant: Available as Cabin Condensed
- OpenType features: Kerning, ligatures, stylistic alternates
Best Use Cases
Cabin excels in:
- Brand identity: Friendly yet professional logos and communications
- Editorial design: Warm headlines with readable body text
- Apps and websites: Modern, approachable interface typography
- Print materials: Versatile for both headings and body copy
Usage Tips
Use Regular (400) for body text at 16px or above. Medium (500) and SemiBold (600) work well for UI elements and subheadings. Bold (700) creates strong headlines without overwhelming the page. Pair Cabin with old-style serifs like EB Garamond for classic contrast, or use throughout a design for cohesive branding.
Is Cabin on Google Fonts?
Yes, Cabin is available for free on Google Fonts. Get Cabin on Google Fonts ↗
Alternative For (3)
Cabin is a free alternative to the following premium fonts:
Compare Cabin
See how Cabin compares to other fonts side by side.
Variable Font Axes
Cabin is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 700 |
Font Pairings
Fonts that pair well with Cabin based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Cabin in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Cabin.
@font-face {
font-family: 'Cabin Fallback';
src: local('Arial');
ascent-override: 96.5%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 94.49%;
}How to Use Cabin
Copy these code snippets to quickly add Cabin to your project.
CSS code for Cabin
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@100..900&display=swap');HTML code for Cabin
<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=Cabin:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Cabin
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'cabin': ['Cabin', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-cabin">Your text here</p>Next.js code for Cabin
// Using next/font (Next.js 13+)
import { Cabin } from 'next/font/google';
const cabin = Cabin({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={cabin.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Cabin'" }}>Your text</p>Expo and React Native code for Cabin
// Install: npx expo install @expo-google-fonts/cabin expo-font
import { useFonts, Cabin_400Regular } from '@expo-google-fonts/cabin';
export default function App() {
const [fontsLoaded] = useFonts({
Cabin_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Cabin_400Regular' }}>
Your text here
</Text>
);
}