Install FontSwap
Aleo
About Aleo
- Source
- Google Fonts ↗
- Classification
- 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 →Aleo is a contemporary slab serif typeface designed by Alessio Laiso. Released in 2013, it was created as a companion to the popular Lato sans-serif, sharing similar proportions and design philosophy while offering a distinct slab serif interpretation.
Design Characteristics
Aleo features rounded terminals and semi-organic curves that give it a friendly, approachable personality uncommon in slab serifs. The typeface balances geometric structure with subtle humanist touches, making it suitable for both display and text applications.
Technical Features
- Variable font: Full weight axis from Thin (100) to Black (900)
- Comprehensive weights: Nine weights for maximum flexibility
- Italic styles: True italics for each weight
- OpenType features: Standard ligatures and contextual alternates
Best Use Cases
Aleo excels in:
- Editorial design: Friendly alternative to traditional slab serifs
- Branding: Approachable yet professional identity work
- Web content: Excellent readability at various sizes
- Pairing with Lato: Designed as a natural companion typeface
Is Aleo on Google Fonts?
Yes, Aleo is available for free on Google Fonts. Get Aleo on Google Fonts ↗
Alternative For (1)
Aleo is a free alternative to the following premium fonts:
Compare Aleo
See how Aleo compares to other fonts side by side.
Variable Font Axes
Aleo is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
Font Pairings
Fonts that pair well with Aleo based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Aleo in production.
- Score
- 57 /100 Average
- File Size
- 195.6 KB Medium
- Weights
- 9 (variable) + Italics
- Languages
- 2 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.507
- Cap Height Ratio
- 0.737
- Ascender
- 905
- Descender
- -295
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Aleo.
@font-face {
font-family: 'Aleo Fallback';
src: local('Georgia');
ascent-override: 90.5%;
descent-override: 29.5%;
line-gap-override: 0%;
size-adjust: 105.31%;
}How to Use Aleo
Copy these code snippets to quickly add Aleo to your project.
CSS code for Aleo
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@100..900&display=swap');HTML code for Aleo
<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=Aleo:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Aleo
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'aleo': ['Aleo', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-aleo">Your text here</p>Next.js code for Aleo
// Using next/font (Next.js 13+)
import { Aleo } from 'next/font/google';
const aleo = Aleo({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={aleo.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Aleo'" }}>Your text</p>Expo and React Native code for Aleo
// Install: npx expo install @expo-google-fonts/aleo expo-font
import { useFonts, Aleo_400Regular } from '@expo-google-fonts/aleo';
export default function App() {
const [fontsLoaded] = useFonts({
Aleo_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Aleo_400Regular' }}>
Your text here
</Text>
);
}