kjz
kjz

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

|
Embed
pimoore
pimoore

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

|
Embed
kjz
kjz

@pimoore yes, similar to weight that. Itā€™s easy enough to check whether the contrast is accessible, so itā€™s really unforgivable.

|
Embed
pimoore
pimoore

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

|
Embed
kjz
kjz

@pimoore yep, canā€™t just design for eagle-eyed designers with excellent monitors!

|
Embed
Miraz
Miraz

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

|
Embed
pimoore
pimoore

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

|
Embed
In reply to
jayeless
jayeless

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

|
Embed
Miraz
Miraz

@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. šŸ˜€

|
Embed
kjz
kjz

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

|
Embed
kjz
kjz

@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 šŸ˜…

|
Embed
Miraz
Miraz

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

|
Embed
kjz
kjz

@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?

|
Embed
Miraz
Miraz

@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. šŸ˜€

|
Embed
pimoore
pimoore

@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

|
Embed
Miraz
Miraz

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

|
Embed
pimoore
pimoore

@Miraz Thanks, Iā€™ve been considering making the font slightly larger as I ended up increasing the column width from the original.

|
Embed