HOME / BLOG /

Trying Atkinson Hyperlegible font on OpenScholar

I recently heard about Atkinson Hyperlegible, a free font created for the Braille Institute. There are a number of "accessibility" fonts meant to make text more readable by people with learning disabilities like dyslexia but this was the first I had heard of designed to be more readable by those with low vision. Some features of this font may also help with learning disabilities but in other ways it may be no better than more commonly used fonts.

Some characters in some fonts can be difficult for everyone to tell apart. Others are only difficult for people experiencing low vision (permanently, temporarily, or situationally).

  • Capital I, lowercase l, pipe |, numeral 1: I l | 1
  • Capital O, zero: O 0
  • Capital B, numeral 8: B 8

Trying a font on an OpenScholar Blog

I wanted to try the font but only on the blog, not the whole site. OpenScholar doesn't allow you to upload font files and this font isn't available through hosting platforms like Google Fonts*. I was already using GitHub Pages to host alternate CSS stylesheets so I uploaded the Atkinson Hyperlegible fonts there along with a CSS file containing @font-face rules referencing the files (the Braille Institute provides the font in a number of Print and Web file formats but WOFF2 and WOFF seem sufficient (covers browsers as old as IE11 and newer).

Sample: 

/* Regular */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    src: url('https://extra808.github.io/fonts/woff2/Atkinson-Hyperlegible-Regular-102a.woff2'), url('https://extra808.github.io/fonts/woff/Atkinson-Hyperlegible-Regular-102.woff');
}

The next matter was to override the site's existing CSS font selections with this font but only on blog posts. It was straightforward to find that each post was within an article element with the .node-blog class and I preceded it with #content, an id present on every page, just to increase the selector's specificity. Ideally, that would be sufficient, the font-family property would cascade to the elements within the article. On OpenScholar, there are many selectors that target more specific elements, like paragraphs and headings, so those rules' properties take precedence over inherited properties. A quick workaround would be to add the universal selector to my rule, #content article.node-blog *, but then it would override the fonts that I want to retain, particularly 'monospace' for the preformatted and code content in blog posts.

:is() pseudo-class

Instead of overriding all the fonts within blog posts, I made a list of elements that should use the font. I could have made a comma-separated list of selectors that matched the ones OpenScholar used but I decided to use the more succinct :is() pseudo-class instead. Browser adoption of the pseudo-class is relatively recent but vendor prefixed pseudo-classes have been serving the same purpose for a long time. Internet Explorer and pre-Chromium Edge have no support for such a pseudo-class but I decided that for this design choice, those browsers can get the site's usual font. This is the code in an Embed Media widget added to the Blog section of this site: 

<link rel="stylesheet" href="https://extra808.github.io/fonts/atkinson-hyperlegible.css">
<style>
    #content article.node-blog :-moz-any(p, h2, h3, h4, h5, li, td) {
        font-family: 'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
    }

    #content article.node-blog,
    #content article.node-blog :-webkit-any(p, h2, h3, h4, h5, li, td),
    #content article.node-blog :is(p, h2, h3, h4, h5, li, td) {
        font-family: 'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
    }
</style>

The list of elements within the :is() pseudo-class may be missing some elements but getting the right font is not so critical. The list of elements that shouldn't get the font is a lot shorter but while support for the :not() pseudo-class goes way back (IE9 had it), it would have required separate selectors for each because there isn't broad support for a comma-separated list within the parentheses.

I made a separate rule just for Firefox's vendor prefix because I found when I included it in the list of other selectors, none of them worked, even in Firefox.

Update October 18, 2021

As of August, Atkinson Hyperlegible is on Google Fonts, making it easier to add to a site.