Click above and type to preview your own text

sans-serifStaticOFL

Atkinson Hyperlegible

Humanist sans engineered for low-vision readability (differentiated B/8, I/l/1, open counters).

WebsiteGoogle FontsAtkinson Hyperlegible Next

Font settings

Weight
These settings in CSS
.atkinson-hyperlegible {
  font-family: "Atkinson Hyperlegible", sans-serif;
}

Waterfall

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Character set

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%&*()[]{}<>,.;:'"?/—–-+=

Paragraph

Typography is the craft of endowing human language with a durable visual form. It shapes how words are read, felt and remembered — from wayfinding on a station platform to the small print of a contract. Good type disappears into reading; great type gives a voice to the text.

Install

Google Fonts

Embed in the <head> of your HTML
<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@400;700&display=swap" rel="stylesheet">
Use Atkinson Hyperlegible in CSS
/* <weight>: one of 400, 700 */

.atkinson-hyperlegible {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: <weight>;
}

Fontsource

Install from npm
npm install @fontsource/atkinson-hyperlegible
Import once in your app entry
// Loads weight 400 — other weights: "@fontsource/atkinson-hyperlegible/<weight>.css"
import "@fontsource/atkinson-hyperlegible";
Use in CSS
body {
  font-family: "Atkinson Hyperlegible", sans-serif;
}

Self-host

Google Fonts and Fontsource serve stripped builds — most OpenType features are removed. Self-hosting the original files is the only way to get the full feature set.

Download the font files from the website and serve them yourself:

Declare with @font-face
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible.woff2") format("woff2");
  font-display: swap;
}

Details

Designer
Applied Design Works
Foundry
Braille Institute of America
Licence
OFL
Format
Static