Atkinson Hyperlegible Font
I discovered the Atkinson Hyperlegible font a few years ago, and I've been using it for for all my projects since; you're reading it now! It's "designed to improve legibility and readability for individuals with low vision", and as a person with normal vision I like it too. It's provided by the Braille Institute for free with the SIL open font license. I just noticed that they released a new version on 2025-02-10 updating the sans-serif face and adding a monospace face, and provided as a variable font with weight and italic variables.
If you're OK linking to Google Fonts (or have to, such as this Bear Blog platform which doesn't support arbitrary static files), add the following HTML or CSS import (not both).
<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+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');
This makes the "Atkinson Hyperlegible Next" and "Atkinson Hyperlegible Mono" names available for use in the CSS font-family property.
To get this, I searched "atkinson" in Google Fonts, clicked the "Next" and "Mono" fonts, and clicked the "Get font" button. After clicking "Get font" for the second time, I clicked the "Get embed code" button.
I wanted to use it as a static file without linking to Google Fonts. Their own site doesn't provide technical docs on how to use this in CSS, and Google Fonts is also pretty opaque. You can open the link above that Google Fonts generates to get an idea of what to do, although I found it can be simplified.
First, get the font and license files. The Google Fonts site seems to give you separate files for normal and italic variants, rather than a single variable file, so I didn't use that. Instead, download the font directly from the Braille Institute, halfway down the page. The "End-User License Agreement" link is actually the SIL license file. Then submit the form with an email address to get the download link, although they don't seem to send any email. Download the Next and Mono fonts, not the Original font. Within each of these zip files, you want the .woff2 file under the For Professional Use Only/Variable directory.
In Flask, I now had the following files in the static folder:
static
├── atkinson
│  ├── AtkinsonHyperlegibleMonoVF-Variable.woff2
│  ├── AtkinsonHyperlegibleNextVF-Variable.woff2
│  └── LICENSE.txt
└── site.css
In site.css, use the @font-face rule to define the "Atkinson Hyperlegible Next" and "Atkinson Hyperlegible Mono" fonts for use in the font-family property.
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: url("atkinson/AtkinsonHyperlegibleNextVF-Variable.woff2") format("woff2");
font-display: block;
font-weight: 200 800;
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("atkinson/AtkinsonHyperlegibleMonoVF-Variable.woff2") format("woff2");
font-display: block;
font-weight: 200 800;
}
Unlike the Google Fonts code, this doesn't have separate blocks for font-style normal and italic or for different character ranges. I found that the single variable font handles all that automatically. This CSS-Tricks article describes how font-display affects the initial flash that happens before the font is loaded and cached by the user's browser. I thought block looked better than swap or other options.
I like using Pico CSS lately, which makes great use of CSS variables for global and local customization. I added the following to site.css to set the fonts globally and fall back to the browser defaults. I can also override the variables in more specific blocks to change the font locally.
:root {
--pico-font-family-sans-serif: "Atkinson Hyperlegible Next", sans-serif;
--pico-font-family-monospace: "Atkinson Hyperlegible Mono", monospace;
}
Bootstrap, Bulma, and other CSS frameworks are starting to use CSS variables for customization too, so you would do something similar for those. Otherwise, you can set the font-family property on body, code, and pre:
body {
font-family: "Atkinson Hyperlegible Next", sans-serif;
}
code, pre {
font-family: "Atkinson Hyperlegible Mono", monospace;
}