Slabo 27px
About Slabo 27px
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400
- Features
- Standard
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.
Alternative For (1)
Slabo 27px is a free alternative to the following premium fonts:
Web-optimized slab with bracketed serifs for excellent screen readability
How to Use Slabo 27px
Copy these code snippets to quickly add Slabo 27px to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px:wght@400&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=Slabo+27px:wght@400&display=swap" rel="stylesheet">Tailwind CSS
// 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>React / Next.js
// 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>