Clarity First

Hyperlegible design for everyone

Atkinson Hyperlegible was designed to maximize character distinction, preventing confusion between similar letterforms. Combined with Inter's interface clarity, it creates truly accessible typography.

Maximum legibility by design. Atkinson Hyperlegible's distinct letterforms prevent character confusion while Inter handles UI.

corporateblogdashboard

Typefaces Used

Primarysans

Atkinson Hyperlegible

Designed for maximum legibility. Each letterform is uniquely distinct.

Released 2020

Available weights: 400, 700

Secondarysans

Inter

The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Released 2016

Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900

Recommended Scale

Headline One

Inter · 700 · 44px · 1.15

Headline Two

Inter · 600 · 28px · 1.2

Headline Three

Inter · 600 · 20px · 1.3

Body

Body text for paragraphs and long-form content.

Atkinson Hyperlegible · 400 · 17px · 1.75

Caption

Caption and metadata text

Atkinson Hyperlegible · 400 · 14px · 1.6

In Context

Design Essay · 12 min read

Clarity First

Hyperlegible design for everyone

“Design for all or design for none.”
Accessibility Principle

Developer Exports

Google Fonts

<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=Inter:wght@600;700&family=Atkinson+Hyperlegible:wght@400&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Inter", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.body-text {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
}

.caption {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

Tailwind Config

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        inter: [""Inter"", "sans-serif"],
        atkinsonhyperlegible: [""Atkinson Hyperlegible"", "sans-serif"],
      },
      fontSize: {
        "h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
        "h2": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
        "h3": ["20px", { lineHeight: "1.3", fontWeight: "600" }],
        "body": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
        "caption": ["14px", { lineHeight: "1.6", fontWeight: "400" }],
      },
    },
  },
};

export default config;

AI-Ready Exports

Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.

System Description

Explain this type system to an AI

Use this typographic system:

Headings:
  Inter, 700 weight
  Used for H1–H3
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Body:
  Atkinson Hyperlegible, 400 weight
  Used for paragraphs and UI
  Designed for maximum legibility. Each letterform is uniquely distinct.

Tone:
  accessible, readable, professional
  Maximum legibility by design. Atkinson Hyperlegible's distinct letterforms prevent character confusion while Inter handles UI.

Use this scale:
  H1 — 44px / 1.15 / -0.02em
  H2 — 28px / 1.2
  H3 — 20px / 1.3
  Body — 17px / 1.75
  Caption — 14px / 1.6

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Inter — 700 — 44px — line-height 1.15 — letter-spacing -0.02em
H2 — Inter — 600 — 28px — line-height 1.2
H3 — Inter — 600 — 20px — line-height 1.3
Body — Atkinson Hyperlegible — 400 — 17px — line-height 1.75
Caption — Atkinson Hyperlegible — 400 — 14px — line-height 1.6

Headings should feel accessible and readable.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.