typography font text metal letter press blocks

Black vs Grey Text Font on Websites

So one interesting typographical design choice on websites is the color of the font. Some people stick with the default black text color. But a new trend is to use grey font color for the text. Why is that?

Well, one reason web designers choose grey over black font color is because they consider that straight black on white makes for a contrast that is too high, and therefore harsh on the eyes. So the solution was to lower the amount of black in the font color, and reduce the contrast. Take a look at the difference:

Total black Total black vs. #333 black #333 black

I also noticed that a slightly grayed black font color makes the text feel more apart of the web page, and more elegant.

Too much gray is harder to read.

And pure black on pure white is fine; when in doubt stick to this. Just test how long it takes for you to read one of your website’s articles in pure black & white, then dark grayish-black & white. What looks better to you? What is easier to read for you?

But in the end, when you make your design decision, remember this isn’t about what you like. This is about what the majority of your visitors will like. What will look best, and be easiest to read for them?

3 thoughts to “Black vs Grey Text Font on Websites”

  1. Designers keep telling the rest of us that “grey looks better”.

    But where Users comment, the overwhelming view is “contrast is good”, “Give us black” etc.
    Some ask “Show us the site that is TOO black”.
    (AFAIK, none has been provided)

    “Looks better” should not be the test.
    Better would be “Can it be read quickly, and in one go”.

    I have a new-ish screen – and still too many sites have hard to read, grey text- some really pale.

    The body text on this site is not black – with the possible exception of the (emboldened?) “pure black on pure white is fine …etc” – but it’s just about readable.

    But this Comments input form has pale grey text – requiring extra squinting and focusing.

    So why do Designers keep ignoring Users preference for function over appearance ???

    1. Developers are mostly young, viewing large high resolution screens with 20-14 sight & are highly fashion conscious. Fashion ruleZ! Logic does not apply. Still many users buy 1366X768 screens in new laptops.
      Developers also design Chrome & Firefox to display what was intended, not to be configured to display only legible text.
      Not being a programmer, just a user & repair technician since Cromenco & Altair, I am still looking for ways to never see any colored serif text. White text on black or black text on white, in a sans serif font of 12 points is easy for me to read. Alas, developers think text has some other, unknown purpose, certainly text is not presented to be read, right?
      “So why do Designers keep ignoring Users preference for function over appearance ???” you ask. Answer is devs value only likes of other devs, not the web viewers. Women admit fashions for women are designed for other women, not men.
      Fashion ruleZ! So can you logically expect readable text on your 1K$ laptop?
      1 more point, if you are paying for a fancy web to sell products of any sort, I like many others, quickly abandon webs with gray (of pastel) mini fonts on colored pages & hate carousels & slick tracks. Some other web will sell it to me.

  2. I really dislike the grey font. FIRST it is hard to read (especially before my cataract surgery), but even now it is harder to read grey font than black. I think it show a disrespect for those with vision problems in that grey is not as accommodating. So I uses a FireFox add on called “Tranquility” which makes all the font BLACK and increases the size to 16 vice the 12.

    So web designes go back to the Black font and help others to be able to read what is on your web site. Also watch out for what background colors are used as some make it hard to read grey fonts and other color fonts.

What's Your Opinion?