Everything I have learned about good typsetting on websites and blogs

This post is an example of “blog your homework”, the idea that when you research something, you should write about it. I’ve been looking at making blogs and indie personal websites nice and readable.

Why am I writing this?

This all started a few days ago when I realised how hard this blog was to read. I updated my CSS for larger font sizing. According to one source, 20px font sits nicely in the overlap for good readability on desktop and mobile. Thus, I went with size 20px.

Am I qualified to write this?

No, not remotely. That’s why I am writing this as a homework notebook. Expect lots of links and cited sources. After all, you should not take what I say on faith. You should trust but verify. Or distrust and verify. Whichever works for you.

Legibility vs Readability

Alyssa Clarke has 12 Typography Guidelines For Good Website Usability for Usability Geek. One of her points is that there is a distinct difference between legible and readable. My old website design was legible – you could perceive all the words, but, with its long word-to-line ratio, it was not so readable.

With websites, we should aim for readable, not just legible.

Be aware of ideal line lengths

There is an optimal line length. I tend to think of it as “roughly 12 words”, but there is some far more accurate guidance out there.

The ideal line length for readable text is 50–75 characters per line (CPL), with 66 CPL being the sweet spot. This range helps reduce eye strain, improves comprehension, and ensures a smooth reading experience. Lines that are too long or too short disrupt reading flow, making content harder to follow.

Optimal Line Length for Readability, Andrew Martin, uxpin.com

Filippos Protogeridis cites research from the Baymard Institute, The Elements of Typographic Style Applied to the Web, as well as the book Typographie by E. Ruder. for giving 50-75 characters per line on desktops, and 30-50 CPL on mobile. There is a single goodish-for-both value of 50 CPL. Although one might want to do mobile-first responsive design and optimise hard for each screen size.

Yet when text is difficult to read due to the length of the lines, users are much less willing to engage with the text, or struggle to read efficiently.

Readability: The Optimal Line Length, Edward Scott (Research Lead), Baymard Institiute

Do better writing

Marieke van de Rakt, writing for Yoast in “5 tips for writing readable blog posts“, suggests short sentences, clear paragraphs, and more transition words.

I can testify that some blogs and indie sites are easier to read because they were written by someone who has a lot of practice writing. I have a few hacky tips that can make your writing seem easier to read.

• After three sentences strongly consider a new paragraph
• Use a few one-sentence paragraphs.
• Throw in the odd one-word sentence.
• Any time you write “and” or place a comma, ask yourself if you could replace it with a full stop.
• Read it out loud before you publish.

Anyone who feels they know what they are doing should ignore these rules. They are nothing more than training wheels.

Use headings based on hierarchy, says Yale University

Yale says, not only should you use headings you should also avoid using bold and mark up as actual headings. This makes it easier for idiots like me to keep place in the post, scan for the bit that interests me, refer back to that one nice bit I want to cite but have to reread the whole thing for because now I can’t find it.

More than that, actual header tags are good SEO and most importantly, good for visitors that need special tools to help them read and enjoy your content.

Better writing tips from Yale include:

• Write at a high school grade level,
• Limit paragraphs to around ~80 words if possible
• Avoid jargon and difficult language where possible

My own advice for engaging idiots like me

Pictures!

No, seriously, images relevant to the article (like diagrams and infographics) help people like me to stay engaged. Sometimes a funny meme that reinforces a point or a decorative image that looks nice with the content can help my easily distracted brain stay on task for reading your lovely and informative words.

Use all the tricks to keep those eyeballs where you want them.

Font choice matters

On the A11y Collective blog, Andrée Lange addresses the problems with poor font choice in “How to Pick the Perfect Font Size: A Guide to WCAG Accessibility”.

Choosing a font size that’s too small or too large can decrease readability, especially for users who may be experiencing conditions such as myopia, hyperopia, or astigmatism. This could make it harder for them to absorb your web content and navigate your site, leading to many unwanted consequences, such as poor user experience, increased bounce rates, bad Search Engine Optimization (SEO) performance, and reduced conversions.

How to Pick the Perfect Font Size: A Guide to WCAG Accessibility, Andrée Lange, A11y Collective

The A11y Collective article has a lot of best practice technical and design details. For those wanting further reading and insights, this might be the one for you.

Jordan DeVos explains in “Designing for Readability: A Guide to Web Typography (With Infographic)” the importance of typography (font selection) on the web. Here’s the infographic (might not work on federated copies).

Infographic by Toptal

Do some testing – find your goldilocks zone

If you have the know-how or are willing to learn it, some testing may be of great value. Edward Scott’s article talks about testing (in an e-commerce setting) and verifying that there is a goldilocks zone for line length, not too long and not too short.

It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently; see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).

During our e-commerce testing, we’ve verified these basic readability precepts for users who are navigating e-commerce sites.

Readability: The Optimal Line Length, Edward Scott, Baymard Institute

Accessibility of writing

Nick Awad talks about website readability as an accessibility factor. He says that good formatting (which we have talked about a lot) is important but so too is accessible language.

A key component of readability is the language chosen for written content. Opt for simple language that resonates with a wide array of readers. Clear communication often outweighs complex vocabulary. For example, use simpler words like “use” instead of “utilize.”

Website Readability, Nick Awad, accessibility.com, 2024

Nick Awad also lists some tools that can be used to check accessibility in terms of reading ease, contrast, and simplicity.

• Web FX Readability Test- This tool evaluates readability based on a provided URL.
• Readability Formulas Scoring System– This tool uses various formulas to measure the readability of input text. These formulas account for sentence length and word complexity to estimate the text’s readability. 
• Hemingway Editor– Beyond traditional readability scores, the Hemingway Editor identifies complex sentences, passive voice, and other potential content issues. It suggests ways to make the text more straightforward. 
• WebAIM Color Contrast Checker– Readability extends beyond text complexity to presentation. This tool ensures the text has appropriate contrast against its background, essential for users with visual impairments and overall readability. 

Website Readability, Nick Awad, accessibility.com, 2024

I’d maybe add The Gunning Fog Index (or FOG) Readability Formula.

Harvard University stresses the importance of white space and resizing options

Harvard University’s website has a presentation on accessibility titled “Design for readability“. The unnamed writer talks about the use of visual and semantic space.

In arty terms, you need to give the text room to breathe. In terms of me, please keep distractions away from my focus so I can give my attention to the text I am reading.

For good accessibility support, you should support resizing, says Harvard.

Support text resizing. Check how your content responds to enlarged text. Avoid using narrow columns of content because they will not respond well to scaling.

Design for readability, https://accessibility.huit.harvard.edu/design-readability

Digital Accessibility, Willamette University

I’ve included this link mostly to provide a plurality of authoritative sources. Williamette covers a lot of ground mentioned already. They do provide a good summary of all the points, along with best practices for content organisation and visual display.

Like any good expert, they cite their courses. I’ve included those citations as further reading for anyone interested.

• WebAIM: Typefaces and Fonts
• CSUN, Readability
• WebAIM: Evaluating Cognitive Web Accessibility
• WebAIM: Writing Clearly and Simply
• Harvard University, Design for Readability
• Yale University, Readability

Digital Accessibility, Willamette University

Responsive design and font choices

Erik D. Kennedy writes in “The Responsive Website Font Size Guidelines“, going into depth about ideal sizes for different screen types. To get his point across (very well IMHO), Erik uses all the tricks of good writing – bullet points, headings, graphics, tables…

Talking of tables, here’s the one Erik opens with.

ElementMobileDesktopPage title28-40px35-50pxDefault/body text16-20px for text-heavy pages*,
16-18px for interaction-heavy pages*18-24px for text-heavy pages*,
14-20px for interaction-heavy pages*Secondary text, captions2px smaller than default2px smaller than default

Read The Responsive Website Font Size Guidelines for the full deep dive.

Conclusion(s)

I felt that I learned a lot during this research session. I’m pretty sure that I have yet to implement all the recommendations I have found here. Feel free to criticise me for that. It is a fair comment after all.

There are a lot of factors, from accessibility to optimal reading ease, to consider. Some parts are design aspects, others are a skill issue. That is okay, I think. If on each revision of our sites and blogs we factor in one more accessibility or good design aspect, our content will be better and easier to engage with.

Good font choice, layout, design, colour, and language use all contribute to an accessible and engaging web page. The more of these factors you get at least somewhat right, the better your content will be and the easier to engage with the content therein. In other words, if we want more readers, we (especially I) must work to improve accessibility and design within many factors.

Any improvement is, I think, a good thing. If each of us walks away from these articles with one nugget of truth and uses it, the web will be that much better for it.

Please comment, reply, or mention anything I have missed, misunderstood, or got wrong. Are there any design and content issues that you would add? How well do you think your blog or website meets this advice and best practice? (Mine could use work, I can see that.)