Red Hat Display + Atkinson Hyperlegible

Grumpy wizards make toxic brew

A standfirst set in Atkinson Hyperlegible, one size up — where a pairing starts earning trust.

The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.

“Type is a beautiful group of letters, not a group of beautiful letters.”

— Matthew Carter

Fig. 1 — Red Hat Display over Atkinson Hyperlegible, in the wild.

Red Hat Display 700 / Atkinson Hyperlegible 400 — click any section and type your own copy.

Why it works

Red Hat Display's engineered geometric headline sets a confident, product-grade tone, and Atkinson Hyperlegible carries the body with letterforms drawn specifically to keep confusable characters apart. Pairing a structured display sans with a legibility-first text face makes a page that looks polished and reads with unusual clarity — a considerate default for onboarding flows, docs and anything data-dense.

More about each face: Red Hat Display · Atkinson Hyperlegible

Use this pairing

HTML — Google Fonts embed
<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=Red+Hat+Display:wght@700&family=Atkinson+Hyperlegible:wght@400;700&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Red Hat Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
}
Next.js — next/font
import { Red_Hat_Display, Atkinson_Hyperlegible } from "next/font/google";

const heading = Red_Hat_Display({
  subsets: ["latin"],
  weight: "700",
  variable: "--font-heading",
});

const body = Atkinson_Hyperlegible({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});

Related pairings