logo
Using light gray fonts on white background - Why? Writings index       Home

Here we have a paragraph from an article about teaching mathematics from the Arizona State University website.

(This is not to single them out - LOTS of websites do this in one form or another - but it's a good example.)

Original version:

By changing the font color and weight, I produced this Modified version:

Since I find the second one much easier to read than the first ...

My question is this:

Why do websites go out of their way to make text harder to read
by using a light gray, lightweight, font on a white background?

It makes no sense to me to reduce the contrast that way.

If someone can explain the reasoning behind this design fad,
I would appreciate it very much!

For the technically minded,
the original specifies: font-weight of 200 and color of #2a2a2a.
My simple change is to: font-weight of 500 and color of #000 (or black).

Note: the same article also appears on LinkedIn, with somewhat better specs: a larger font, font-weight 400 and color #000000b3,
although why the reduced opacity is added I'll never know.
That works better (unless, like me, your default background is gray).