So, a couple of body typeface donāts to start with: i) donāt use a condensed font and ii) donāt use light/300 weight (surprisingly common and a prime example of designing for looking at rather than reading a text).
So, a couple of body typeface donāts to start with: i) donāt use a condensed font and ii) donāt use light/300 weight (surprisingly common and a prime example of designing for looking at rather than reading a text).
@leonp this reminds of the one site I saw recently with a grey light style font on a white background. I literally couldnāt read it to the point it started making my eyes hurt.
@pimoore yes, similar to weight that. Itās easy enough to check whether the contrast is accessible, so itās really unforgivable.
@leonp Itās too bad, as it wouldāve been a good article to read otherwise. I know you can enable reader mode but a person shouldnāt have to just to use a site properly.
@pimoore @leonp I use Reader Mode on almost every site almost every time. I've chosen a font and size that work for me and like it that way. It also helps get around dark mode, which I really dislike.
@Miraz @leonp I donāt mind a website dark mode if itās done well, but I rarely encounter them as I donāt use dark mode on my devices. I should learn to like it better as itās far easier on your eyes in the evening, but I just canāt do it.
@pimoore @Miraz @leonp I can endure dark mode for short things, but not for anything longer than about one paragraph. I feel like most sites make the contrast too high, and the lines of light text "burn" into my retinas and then even when I look away from the screen I get these greenish lines over whatever I'm now trying to look at šµāš« In contrast, #000 text on an #fff background never goes wrong for me. I do turn brightness right down on every screen I own though (and use redshift at night), or else the glare does get to me.
@jayeless @pimoore @leonp From memory I tried dark mode for a couple of weeks when it was introduced, then came to my senses, realising I didn't like it, it hurt my eyes to read, and that I like black(ish) on white(ish). I'm glad others find dark mode useful, but it's just not for me. I also like larger text than almost anyone gives me. š
@Miraz for me thatās a really good test of whether a site has got its typography right. You shouldnāt need to use reader mode.
@jayeless @pimoore @Miraz I use #CCC (a fairly light gray) on #2C3437 (a very dark blue) for my website dark mode.
The key with dark mode I think is to make the contrast as low as possible while keeping it within an accessible range (I actually pass WCAG AAA with that combi). White on black burns your eyes.
Itās fairly easy to set up two colour schemes on your website and only display dark mode if the user has set it in the operating system (which is what my site does). That way if you havenāt set it, you wonāt see it.
As for black on white versus a less extreme contrast (say dark gray on white, or black on cream) I generally go #333 or #222 on #FFF. There are some mixed conclusions on how it relates to ease of reading and dyslexia, for example.
I note @jayeless has got a post in about dark mode before me š
@leonp Well, maybe. Reader mode also allows me to make the text larger and it tends to reduce page width too, meaning shorter lines. One of the glories of digital text though is that the reader reigns supreme, able to change text size, colour etc to suit themselves and dozens (or millions) of readers will all want different things.
@Miraz absolutely. Thatās the key to designing text for reading on a website ā unlike in print, the reader rules!
Out of interest, how do you find the text on my site?
@leonp Pretty good for me thanks. Also: good article which I'll return to to read properly in the morning when my brain's not on its way to sleeping. š
@Miraz Since weāre on the subject ā and Iām still tweaking typography and other things on my site ā may I please ask your opinion of mine for readability as well? pimoore.ca // @leonp
@pimoore Happy to look, but it's just the random view of a random personā¦ š
For me, this morning, tired and with tired eyes, a p {font-size: 17px; line-height: 1.9;} worked better.