Fonts and Accessibility

A couple of days ago I stumbled across Atkinson Hyperlegible. Wikipedia describes this as a font “intended to be optimally legible for readers who are partially visually impaired, with all characters easily distinguishable from one another.”

I was curious to see how this font would look on my blog and I’m all for making my ramblings more accessible. So, putting aside my terrible css skills, I set about a quick update.

I use PaperMod (like half the internet it seems) and this theme makes customisation easy.

Changing Fonts in PaperMod

First copy extend-head.html from the theme layouts\partials folder to the layouts\partials folder in the root of the site. Copy reset.css from the theme assets\css\core folder to the site assets\css\extended folder.

Next, head over to Google fonts and select Atkinson Hyperlegible.

Copy the link tags and add to the top of the extend-head.html file.

<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:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Modify the font-family in the assets\css\extended\reset.css

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Atkinson Hyperlegible', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 18px;
   line-height: 1.6;
   word-break: break-word;
   background: var(--theme);
}

Updating Code Blocks

While I was at it I decided to update the font for code blocks as well. Just add a monospaced font to the collection in Google fonts

<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Then add the following to the assets\css\extended\reset.css file.

code {
    font-family: 'Fira Code', monospace;
}

Easy. And hopefully a little more accessible.