sigmoid.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A social space for people researching, working with, or just interested in AI!

Server stats:

579
active users

#readability

0 posts0 participants0 posts today

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 SystemThis 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.

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.)

Venting.

If I have to open the browser's dev tools, dig through the DOM to find where you've set the background colour of the page, and then change it manually, just to be able to read what you've written, you have failed utterly at web design, user experience, and accessibility simultaneously.

Yes, I'm looking at you, meditationsinanemergency.com/p .

Meditations in an Emergency · Please Shout Fire. This Theater Is BurningThe United States is being destroyed from within, and mainstream journalism isn't making that clear. When I was a kid, there was a popular phrase--"what if they had a war and no one came?" What if we were in a war and no one noticed? Obviously all the people

Perhaps I should take some bigger examples of my private programming history. Those are often similar or better than my professional projects using these languages. And then AI should rate #style, #readability and #maintainability, perhaps room for optimization without loosing these criteria. The languages here would be #pascal, #perl, #python, #java, #smalltalk, #erlang and #golang. Should be interesting. And beside the different languages I would expect a reflection of my personal experience.

“Above all, read what you are designing, and imagine reading it for the first time, like someone who just found it.”

The late Dean Allen on designing pages to be read. Includes An Entirely Incomplete List of Things a Non–Illiterate Designer Should Know Before Being a Designer. From A List Apart in November of 2001.

alistapart.com/article/reading #ReadingDesign #typesetting #readability #webdesign #WebDesignHistory

A List Apart · Reading DesignWith so many specialists working so hard at their craft, why are so many pages so hard to read? Unabashed text enthusiast Dean Allen thinks designers would benefit from approaching their work as be…

I'm once again looking for a read-it-later/article archive tool. I think I've tried them all by now and I'm amazed that for such a basic task there's no good solution. I think my demands are very reasonable:

– article content extraction (not just bookmarks) and comfortable reader
– full text search over the entire archive
– website and Android app with synchronization between them
– not a whole lot of random unrelated features like todo lists or whatever thrown in for no reason

I was using Pocket for many years and even paid for the "premium" (which basically got me a few extra fonts because the "premium" features like tag suggestions didn't work), however Pocket got worse and worse at article extraction, to the point where it just opened to website instead of showing the extracted text for more than half of the saved articles. Also no one seems to actively work on it it seems. Pretty much the same problems with Instapaper. I tried Feedly and Inoreader which kinda works I guess but they're primarily RSS readers, which I don't need. raindrop.io does extract article texts but shows them only in the Android app, in a browser it'll still open the website, also the full text search doesn't work reliability. Then there's Wallabag but that seems very Alpha and I don't want to host the service myself. Tried a bunch more which I can't remember right now.

As a temporary solution I'm now saving articles to @notesnook since I'm using that for notes anyway. Article extraction works alright but there's no way to archive notes, so it's all cluttered with articles now and I can barely find my own notes anymore.

If anyone knows of a tool that reliably does all the things mentioned above, please let me know!

📉 Did ChatGPT make scientific texts harder to read? A new study analysed over 2 million abstracts from #arXiv (2010–2024) to track changes in their readability. Using 4 classic #readability metrics, the author found a clear shift: in 2023–2024, abstracts became significantly more complex than ever before.

:doi: doi.org/10.1016/j.joi.2025.101

The author is cautious: while the rise in complexity closely aligns with the release of #ChatGPT the study doesn't claim a causal link.

"Say what you want about Trump, but he’s known to speak in simple and plain language. Does this make him dumb? I would counter that it makes him accessible.

Does this mean that Sanders and AOC should stop talking about oligarchy? Among their college-educated base, I see no reason why it’s a particularly bad idea. They understand the language and it resonates with them.

There’s also some polling out there from a progressive polling firm showing that most Americans can identify the definition of oligarchy when presented with a multiple-choice question. This isn’t the best polling design in the world, but it’s possible that Sanders and AOC have had some luck in popularizing the term.

But Democrats and progressives need to stop thinking that everyone in America has a college degree and follows every bit of minutiae in the news. Republicans tend to use simpler language, and it’s no surprise that they’ve won the working class’s votes for several elections in a row now. They speak more like ordinary people than Democrats do.

It’s not dumb to not understand every word in the English dictionary. What would be dumb is politicians insisting that we use words that people don’t understand in order to persuade them."

www.theamericansaga.com/p/do-americans-understand-what-bernie

#USA#Bernie#AOC

Two years ago at #CSUN I learned about what became my favorite browser extension, BeeLine Reader. I've been a subscriber ever since.

It's easy to set up on desktop, but has been some struggle to get working on Android. But this week I discovered it works with Microsoft's Edge Canary mobile browser, which has experimental support for extensions. Instructions are here: u.osu.edu/keck.60/2023/03/26/b

I'm currently messing with my fonts in #Obsidian. I can't decide whether I prefer Atkinson Hyperlegible Next or OpenDyslexic Nerd. (The rest of the interface is Hyperlegible Next.)

I'm sticking with JetBrainsMono Nerd for monospace text for now, but I'm considering trying Hyperlegible Mono.

I'm not diagnosed #dyslexic (my spelling and grammar are fine, and I can spot a misplaced apostrophe from 100 paces), but I might have #Irlens. And I certainly have other bouncy brain features.

Replied in thread

@ai6yr nodds in agreement whereas the "akshual coding" is "relatively simple" if one doesn't mind #readability, #maintainability or using understandable variablr names...

Testing can be automated if one builds and documebts the tests that is...

"#AI" can't do this because those #LLM|s don't learn organically but merely act as "#StochasticParrot" and not as intelligent beings that is able or even willing to transfer * exchange information freely...