12 Days of ADHD 6: Readability
Friday 22nd October, 2021
October is ADHD Awareness Month. I've decided that I'm going to use that as a writing prompt, and to set myself a challenge. For the next twelve days, I'm going to write something about my experiences learning about ADHD as a very recently diagnosed adult.
After yesterday's mammoth post, I thought I'd do a brief one today about how I've been thinking about the design of my blog and how it affects the readability of long articles like that - and one experiment attempting to improve on that.
I have no idea if this is an ADHD Thing specifically or an Everyone Thing, but I do find it difficult to read long passages of text with a high contrast, sometimes. It seems to correlate with how tired, stressed or caffeinated I am. But generally, black text on a bright white background, or bright white text on a black background creates too much of an after-image for me, which makes it quite difficult to scan lines of text.
On bad days I even get that effect with paperback books - although generally books (and e-ink displays!) fare better than white A4 print-outs, as they tend to be off-white. Doing literature reviews for my dissertations was pretty painful, but at least academic literature tends to follow the convention of having the text split across two columns going down the page. Nonetheless, I had to arm myself with every colour of highlighter pen in order to actually make it through a paper and take the information in without constantly losing my place.
It intrigues me that I have much less trouble reading syntax-highlighted code - I'm staring at large chunks of text all the time in my job, but it never strains my eyes or hurts my brain nearly as much as reading grayscale articles designed for print. Syntax-highlighted code just feels a lot easier to read for me.
I think there's a few things going on here:
- Syntax highlighting is colourful; structure is demarcated using lots of different, highly-contrasting colours.
- (Unless you're a sociopath*) convention is bright coloured text on dark backgrounds - the opposite of print media. Which makes sense when it's a backlit screen. Brightness causes glare and glow, so bright text benefits from looking "fatter", whereas black text gets washed out in the bright glow of its background.
- Code generally has lots of white-space; different levels of indentation used a lot to show a heierarchy of ideas.
- Paradoxically, although monospace fonts are supposed to be worse for readability, a good monospace font tries to remove any ambiguity between similar-looking letters: 1, l, L, i, O, 0.
- Line lengths: I develop predominantly using Python, and I really like PEP-8's maximum line length of 79 characters rule. They suggest 72 characters for comment blocks - the parts of code that are intended to be the most human-readable. Minus the left-hand indentation, that's about the same as the rule of 50-60 characters per line suggested by typographers.
*I obviously have Strong Opinions about programming colour schemes here, but I'd be interested to hear if anyone genuinely finds dark text on bright background more comfortable and preferable for code stuff.
I gave my homepage that stylistic software-engineer hacks-a-lot-in-the-terminal look as a signal to Other Nerds that This Nerd is fairly good at Nerding. But inadvertently in the process, I feel like I've also made it easier to read for people like me.
The use of rotating colours for headers, unambiguous monospaced font, off-white text on a black background, and maximum 60 character width pages is a combination I find very easy to read, both on a big screen and on my phone. The lines are also essentially doublespaced (line-height: 3ch;), which stops characters with dangly bits from interfering with the letters below them (I'm sure there's a typographical term for that).
One additional readability trick I've added to the blog, as you will have noticed, is a gradual change in the brightness of the text, going from mid-gray to white. This is my attempt at copying BeeLine Reader (or the free and open-source implementation WaspLine Reader), which use a gradual change in colour or shade across paragraphs to make it easier for you to scan over. The toggle text gradient link in the header of this blog switches the effect on and off. You can steal my implementation of it if you'd like.
My homepage was never intended to be place in which I'd write long form text for a general audience; it's just my digital business card / contact details / CV, after all. But now I have a few people reading these posts as I share them - so I'd be interested to hear whether I've made it a comfortable reading experience for everyone else - or not! Especially the gradually changing text colour. Like, I'd like to know whether I'm helping or hindering anyone who'd dyslexic, or has other visual processing foibles like the ones I've described for myself. Also, whether the font makes things better or worse.