Install FontSwap
Lexend
About Lexend
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 →Lexend is an accessibility-focused sans-serif designed by Thomas Jockin, based on research into reading proficiency. Its carefully tuned letter spacing and proportions are engineered to improve reading speed and reduce visual fatigue.
Best Use Cases
Lexend shines in:
- Educational platforms: Student-facing content, learning materials
- Accessibility-first products: Apps targeting users with reading difficulties
- Healthcare interfaces: Patient portals, medical information
- Government sites: Public-facing content requiring maximum legibility
Usage Tips
Lexend's design philosophy prioritizes readability over aesthetics. Use it at 400-500 weight for body text where reading ease matters most. The full weight range (100-900) supports visual hierarchy. Pair with a display font for headlines where you want more personality.
Is Lexend on Google Fonts?
Yes, Lexend is available for free on Google Fonts. Get Lexend on Google Fonts ↗
Alternative For (2)
Lexend is a free alternative to the following premium fonts:
Accessibility-focused sans designed to improve reading speed
Readable sans designed for improved reading proficiency
Compare Lexend
See how Lexend compares to other fonts side by side.
Variable Font Axes
Lexend is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Lexend
Copy these code snippets to quickly add Lexend to your project.
CSS code for Lexend
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');HTML code for Lexend
<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=Lexend:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Lexend
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'lexend': ['Lexend', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-lexend">Your text here</p>Next.js code for Lexend
// Using next/font (Next.js 13+)
import { Lexend } from 'next/font/google';
const lexend = Lexend({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={lexend.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Lexend'" }}>Your text</p>Expo and React Native code for Lexend
// Install: npx expo install @expo-google-fonts/lexend expo-font
import { useFonts, Lexend_400Regular } from '@expo-google-fonts/lexend';
export default function App() {
const [fontsLoaded] = useFonts({
Lexend_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Lexend_400Regular' }}>
Your text here
</Text>
);
}