Skip to content
This day’s portion

Font choice don’ts

| Comments

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

Add a comment

Required fields marked *. I won’t publish or share your email address.

Comments

Anna

It surprises and infuriates me that so many professionals make this obvious mistake. I wonder, do they never attempt to read the text in their designs?

Mentions

Comments and replies to this post from other sites and services, such as micro.blog and Twitter.

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.

leonp

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

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.

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.

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.

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.

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

leonp

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

leonp

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

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.

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

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.

pimoore

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