What is the reason for small, lightly coloured text?

Question

We are all familiar with the concept of fine print for text that is to be discouraged from being read. However, lately I've been finding many websites whose main content is in tiny, lightly-coloured text on a slightly pastel background. It is so difficult to read that I have to switch off CSS rendering on these sites. Here is one example. Here is another and another and another and another another another.

Is there a name for this design pattern? I fear that it is becoming too common and if I knew the name of it then I could at least write to these companies and tell them why I don't use their products or services.

Is there a UX reason for doing this design? I feel that these companies may be trying to avoid wall of text but that they are going about it the wrong way. Am I missing something?

Answer 1

The way that I have seen color variations in text (black to grey) used on sites has been primarily to help the end-user visually sort the Information Architecture of the content they are trying to digest.

This is commonly seen on forum boards where the post text is of a dark nature (usually from around rgb 0,0,0 to 70,70,70) as a means of saying "this is what you should be looking at". Then you have secondary information, sometimes user quotes, sometimes control options, all designed to be 'visually' on a 2nd level where if you were to want to "do" something, you could then focus in on this information. So basically, it's designed to help the user discard the information that they don't need right now (or quiet the interface's clutter/noise, lessen cognitive loads), and focus in on it when they do need it.

Here on Stack Exchange you'll see common engagement options on questions, for example share/edit/flag, or post time, or a control to add comments, or other actionable items all lighter shades of grey than the primary text color.

As for Patreon, I do think that their usage is a mistake as when structuring a Q/A section, Q&A are undoubtedly a primary piece of information in that content structure. Based on their usage I think they are trying to separate larger-scaled categories (common questions, privacy, etc...), but ultimately a margin change would do exactly what they need and would be less problematic. I say problematic because one drawback I see on a first glance is that the twitter feed draws my attention more than the questions do solely on the saturation of color/darker text.

One last tidbit to gnaw on, another somewhat common usage for lighter greyed text is when user controls have been disabled, but as you would quickly ask, how and what level of hues/s differentiate secondary actions and disabled controls? Well, yes this could become tricky and confusing to the end-user if not handled correctly.

Answer 2

In my experience, I've noticed that this is something used mostly by younger designers. In all honesty, I was guilty of it too in my youth (ha). When I've talked to younger designers about it, and reflecting on my own thinking, the reason seems to be two-fold: when we're younger, it's easier to read text that doesn't have as high of a contrast than it is when we're older. As a younger designer, it doesn't even occur that this text could be difficult to read to someone else as it's easy for them to read, and no one is looking at it and correcting them on it (or someone who has great sight is).

Also, there's a thought among designers I've worked with who think it's cleaner and more modern. Personally, I think readable text is more modern.

Answer 3

This frustrates me too. I think its proliferation stems from multiple sources.

One of them is this idea that one should "never use black." This is an old concept in the world of art history but Ian Storm recently wrote an article about it as a "design tip" that has circulated widely on the web (there's also a lively discussion on Hacker News). He makes some good points but I find that many designers are taking this as a given rather than a jumping-off point from which to consider readability, color saturation, etc.

I also find that super-light text is often used as a "white-space" cheat when a designer is trying to get an airy feeling while still packing in a ton of info (usually because of inadequate content prioritization).

Answer 4

I absolutely agree with the other answers, that grey to black can help distinguish the importance of information. Nevertheless, In my experience: an unreadable grey usually comes from (definitely not best in class) graphic-designers who think that light-grey looks better than black. Simple as that. It's about the aesthetic in photoshop and not the end user.

Answer 5

OP here. I've actually written to the maintainers of several of these sites and one thing that they all seem to have in common is that the websites were designed on Retina displays.

Here is a sample email reply from one of the website maintainers:

I think the tweak to very dark grey vs black was due to antialiasing making it look almost like there was a shadow on the text when it is black (or it could be to do with this dang retina display) - either way there wasn’t a hugely scientific process to it - our design guy tweaked it around a bit and we just nodded to say it looked good.

Desktop application developers know not to test their software on hardware that is considerably more powerful than that of their clients, perhaps website UX designers need to test on standard-resolution displays as well.