Install FontSwap
Slabo 27px
About Slabo 27px
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400
- Features
- Standard
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 →Slabo 27px is a slab serif typeface designed by John Hudson specifically for use at a single size: 27 pixels. Part of the Slabo project, which includes variants optimized for different sizes, Slabo 27px features bracketed serifs and sturdy construction optimized for digital display at its target size.
History and Design
John Hudson of Tiro Typeworks designed the Slabo series as an experiment in size-specific type design. Rather than creating a single typeface that compromises across all sizes, Hudson designed separate fonts optimized for specific pixel dimensions—13px and 27px being the two released variants.
Slabo 27px features the characteristic bracketed slab serifs of the Clarendon style, with proportions and details tuned specifically for 27-pixel rendering. This size-specific approach ensures optimal clarity and readability at the intended display size.
Why Slabo 27px Excels
Size-specific optimization means Slabo 27px looks exceptionally crisp at its intended size. The bracketed serifs appear smooth and well-defined rather than fuzzy or indistinct. This precision makes it ideal for web headings, navigation, and any typography intended for 27-pixel display.
Technical Features
- Size optimized: Designed specifically for 27px rendering
- Bracketed serifs: Clarendon-style curved serif connections
- Web focused: Optimized for screen display
- Single weight: Focused optimization over variety
Best Use Cases
Slabo 27px excels in:
- Web headings: Crisp display at 27px
- Navigation menus: Clear, readable labels
- Section titles: Strong presence with readable detail
- Call-to-action buttons: Authoritative text treatment
Usage Tips
Use Slabo 27px at or near its designed size (27px) for optimal results. Slight variations (24-30px) can work, but significant departures may not render as intended. For other sizes, consider Slabo 13px or alternative slab serifs. Pair with clean sans-serifs like Open Sans or Source Sans Pro for body text to create professional, readable layouts.
Is Slabo 27px on Google Fonts?
Yes, Slabo 27px is available for free on Google Fonts. Get Slabo 27px on Google Fonts ↗
Alternative For (1)
Slabo 27px is a free alternative to the following premium fonts:
Web-optimized slab with bracketed serifs for excellent screen readability
Compare Slabo 27px
See how Slabo 27px compares to other fonts side by side.
Font Pairings
Fonts that pair well with Slabo 27px based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Slabo 27px in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Slabo 27px.
@font-face {
font-family: 'Slabo 27px Fallback';
src: local('Georgia');
ascent-override: 92.59%;
descent-override: 29.63%;
line-gap-override: 0%;
size-adjust: 100.01%;
}How to Use Slabo 27px
Copy these code snippets to quickly add Slabo 27px to your project.
CSS code for Slabo 27px
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px:wght@400&display=swap');HTML code for Slabo 27px
<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=Slabo+27px:wght@400&display=swap" rel="stylesheet">Tailwind code for Slabo 27px
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'slabo-27px': ['"Slabo 27px"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-slabo-27px">Your text here</p>Next.js code for Slabo 27px
// Using next/font (Next.js 13+)
import { Slabo_27px } from 'next/font/google';
const slabo_27px = Slabo_27px({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={slabo_27px.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Slabo 27px"' }}>Your text</p>Expo and React Native code for Slabo 27px
// Install: npx expo install @expo-google-fonts/slabo-27px expo-font
import { useFonts, Slabo_27px_400Regular } from '@expo-google-fonts/slabo-27px';
export default function App() {
const [fontsLoaded] = useFonts({
Slabo_27px_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Slabo_27px_400Regular' }}>
Your text here
</Text>
);
}