Cabin
About Cabin
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
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.
Alternative For (1)
Cabin is a free alternative to the following premium fonts:
How to Use Cabin
Copy these code snippets to quickly add Cabin to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Cabin: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=Cabin:wght@100..900&display=swap" rel="stylesheet">Tailwind CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'cabin': ['Cabin', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-cabin">Your text here</p>React / Next.js
// 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>