Josefin Slab
About Josefin Slab
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Josefin Slab is an elegant geometric slab serif typeface designed by Santiago Orozco. Inspired by 1930s typeface designs, it combines vintage charm with clean modern construction, offering a distinctive alternative to contemporary geometric slabs like Museo Slab.
History and Design
Santiago Orozco designed Josefin Slab as part of the Josefin family, which also includes Josefin Sans. The design draws inspiration from the geometric experimentation of the 1920s and 1930s—particularly Swedish designs of that era—while maintaining functionality for contemporary use.
The typeface features elegant proportions with a relatively high x-height and slightly condensed letterforms. Its geometric construction creates clean lines, while subtle curves and quirky details (like the distinctive lowercase 'g') add personality and warmth.
Why Josefin Slab Excels
Josefin Slab occupies a unique space between vintage and modern. Its 1930s-inspired character provides distinctive personality without feeling dated, making it suitable for brands and projects wanting classic elegance with contemporary functionality.
Technical Features
- Variable font: Continuous weight axis for precise control
- Seven static weights: Thin through Bold
- True italics: Distinct italic designs
- Vintage-modern aesthetic: Distinctive character
- Extended Latin: Good character coverage
Best Use Cases
Josefin Slab excels in:
- Fashion and lifestyle: Elegant, distinctive branding
- Editorial design: Magazine headlines and feature typography
- Wedding and events: Sophisticated invitations and materials
- Vintage-inspired projects: Period authenticity with modern function
Usage Tips
Josefin Slab's distinctive character shines at display sizes (20px+) where its elegant proportions are visible. Lighter weights (100-300) create delicate, refined headlines; Regular (400) works for short text passages. Pair with Josefin Sans for cohesive typography, or complement with clean sans-serifs like Open Sans or Lato. The variable font version enables precise weight fine-tuning for optimal visual hierarchy.
Alternative For (1)
Josefin Slab is a free alternative to the following premium fonts:
Elegant geometric slab with vintage character and clean modern feel
How to Use Josefin Slab
Copy these code snippets to quickly add Josefin Slab to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab: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=Josefin+Slab:wght@100..900&display=swap" rel="stylesheet">Tailwind CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'josefin-slab': ['"Josefin Slab"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-josefin-slab">Your text here</p>React / Next.js
// Using next/font (Next.js 13+)
import { Josefin_Slab } from 'next/font/google';
const josefin_slab = Josefin_Slab({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={josefin_slab.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Josefin Slab"' }}>Your text</p>