General note: This site’s appearance, configuration, hosting, and other basic considerations will change over time. As a result, certain content on this page could be at variance with what you’re currently seeing on the site, but the two were consistent when this post originally appeared.
As I suggested in a recent post, I’m more than a little hung up on on-screen type; so I thought I’d do a little two-part series on website typography and share some appropriate insights and tips. They come from two decades as a web designer and three-and-a-half decades as a writer and formatter — oh, and nearly six decades of reading. Perhaps you’ll find them useful.
Readability . . . ! Do you speak it?
One would hope the following statement wouldn’t be too terribly controversial but, given the appearance of many pages on the web these days, I fear it may be:
At a minimum, body type on web pages should be easily readable by anyone with reasonably normal vision and a reasonably functional and reasonably sized display.
(Note that I said, “body type.” That’s an important distinction. There should be a little more leeway for headlines, especially large ones.)
By “easily readable,” I mean:
- It should have decent contrast. — In other words, there should be enough difference between the color of the type and the color of the background.
I don’t mean stark black on stark white, or vice versa, because that’s too much contrast on a display — especially on a super-high-contrast OLED display such as is becoming de rigueur for smartphones. UI experts have told me they suggest a combination of
#333(really dark gray) on#fff(white). That’s what I have on this site, except for headlines and the nav menu.
So, no, having a substantial part of your page’s body text appear as light-to-medium gray on white (or, worse, dark gray on black) isn’t a good idea. By the way, the same is true for link text, particularly if you don’t underline links (which I formerly didn’t because I thought it was too 1990s-ish, but changed my mind after learning about the difficulty that non-underlined links can cause, especially for the visually impaired). Link text should be a different color from your body text and not some color that melts into the background. Don’t make me come over there and lecture you about “mystery meat” navigation.
However, there’s more to this. - It should have sufficient width. — With the ready availability of web fonts (a separate subject which I’ll address in Part 2), many website designers want to use some of the slick, ultra-thin type they’ve seen, or implemented, in video or print. And, again, that’s fine in sufficiently large headline text. But I draw the line on body text for a web page; that’s no place for super-thin type. Indeed, it’s yet another barrier to sufficient contrast.
Now that’s (not) what I’m talkin’ about
But, rather than rant aimlessly, let me show you some examples of sins against either or both of these principles of web typography. They were current as of when I originally posted this.
We can do better, friends.
I close with these comments, by blogger Kevin Marks, taken from a 2016 article in The Telegraph:
To arbitrarily throw away contrast based on a fashion that looks good on my perfect screen in my perfectly lit office is abdicating [designers’] responsibilities to the very people for whom they are designing. My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic.
In Part 2, I’ll cover why this site’s typography looks the way it does, including why it doesn’t look the same on different platforms — and why that’s not only on purpose but also just fine and dandy. (Heresy!)
Latest commit (a884c349) for page file:
2023-07-18 at 1:39:56 PM CDT.
Page history