Pat Drummond :: life & technology: Web designers

Why do website designers use gray text?

I'm puzzled by the large number of websites and blogs now using gray text colour - especially since blogs often use themes designed by people who should know better. Text in any shade of gray is hard to read for most people. In the last few years I have been wearing glasses to read so maybe I notice it more than those who don't need them. I guess web designers just can't seem to stop themselves from copying the latest thing - but gray text?! (I also find black backgrounds horrible to read with any colour text, but I digress.)
Easy Color Contrast Ratios | Font Contrast addon for Firefox (toggles text to black)

Why do website designers use small font sizes?

In addition to odd colours, web designers have a love affair with "fixed" font sizes like this that they force on the poor visitors trying to read their websites. Most people don't even know they can change the font size used in their browser, so website designers force these small fonts so their (badly designed) websites will fit in the designer's screen. The designer should be forced to view their work on a 3-inch phone screen for a real-life test of their font choices. This crime is #5 on the Top 10 Mistakes in Web Design. They should use 1em (100%) for general text to respect the reader's chosen viewing size in their browser. Read what the W3C says about fonts.

I assume even beginner courses in web design teach the basics of CSS styles, but students should also be taught the benefit of using relative (smaller, larger) or percentage (90%) font sizes. They should also be taught to resist the temptation to reduce sizes without a really good reason.

Since styles are normally contained in separate style sheets it should make it easier to change sizes - or even remove them. It might impress the customer looking at tiny text on a 24-inch monitor, but everyone else has to learn to enlarge the text to be able to read it at all. Those who don't know how to do this just leave - less than impressed by your website.

Small and gray text

If you combine gray colour and small size text styles together, the text becomes hard to read for many people. The only thing that helps me to read some sites without grinding my teeth is a little toolbar button that toggles between website colours and my colours: black on white - like this text you are reading right now.

The fact is, every person who visits your website has a different screen resolution, different system display options, different browsers with different settings. Each person will see a slightly different website from the one you are looking at. If you don't understand the effects of all these, then you should do some cross-platform testing. You will be surprised. Then you will start using styles that will work for everyone. Problems for people with real sight problems are the subject of another post (which I have not yet written).

2013-Jan-31:
Recently I reset my browser to "normal" font size. Even then, I have to change the font size on websites just to view them properly. The style they use actually works against a "normal" size. Or maybe designers assume that what they see is what everyone sees. It's a real problem because different browsers use a different "normal" font size and designers set their own defaults in CSS.

Examples on news sites:

Update 2013-Jun: This topic is mirrored in the PDQ Library: Web Design Pet Peeves.