Install FontSwap
Atkinson Hyperlegible
About Atkinson Hyperlegible
- Source
- Google Fonts ↗
- Classification
- sans-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 →Atkinson Hyperlegible was created by the Braille Institute to improve character recognition and reading ease for people with low vision. Each letterform is designed to be maximally distinguishable, with exaggerated features that prevent common letter confusion.
Best Use Cases
Atkinson Hyperlegible excels in:
- Accessibility-first products: Any interface prioritizing inclusive design
- Healthcare: Patient-facing apps, medication labels, medical forms
- Government services: Public-facing websites, forms, signage
- Education: Materials for readers of all abilities
Usage Tips
The font's design choices — asymmetric letterforms, open counters, exaggerated distinctions between similar characters (I, l, 1) — make it ideal anywhere legibility is critical. Use 400 for body text and 600-700 for headings. Italics are available for emphasis. At small sizes, the hyperlegibility features provide genuine readability advantages over conventional sans-serifs.
Is Atkinson Hyperlegible on Google Fonts?
Yes, Atkinson Hyperlegible is available for free on Google Fonts. Get Atkinson Hyperlegible on Google Fonts ↗
Alternative For (2)
Atkinson Hyperlegible is a free alternative to the following premium fonts:
Accessibility-focused sans from Braille Institute
Compare Atkinson Hyperlegible
See how Atkinson Hyperlegible compares to other fonts side by side.
Variable Font Axes
Atkinson Hyperlegible is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 800 |
How to Use Atkinson Hyperlegible
Copy these code snippets to quickly add Atkinson Hyperlegible to your project.
CSS code for Atkinson Hyperlegible
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@100..900&display=swap');HTML code for Atkinson Hyperlegible
<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=Atkinson+Hyperlegible:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Atkinson Hyperlegible
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'atkinson-hyperlegible': ['"Atkinson Hyperlegible"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-atkinson-hyperlegible">Your text here</p>Next.js code for Atkinson Hyperlegible
// Using next/font (Next.js 13+)
import { Atkinson_Hyperlegible } from 'next/font/google';
const atkinson_hyperlegible = Atkinson_Hyperlegible({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={atkinson_hyperlegible.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Atkinson Hyperlegible"' }}>Your text</p>Expo and React Native code for Atkinson Hyperlegible
// Install: npx expo install @expo-google-fonts/atkinson-hyperlegible expo-font
import { useFonts, Atkinson_Hyperlegible_400Regular } from '@expo-google-fonts/atkinson-hyperlegible';
export default function App() {
const [fontsLoaded] = useFonts({
Atkinson_Hyperlegible_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Atkinson_Hyperlegible_400Regular' }}>
Your text here
</Text>
);
}