Grey in web design

by electron** | Tuesday, October 28 2008 @ 17:00:45 GMT        

I've always felt I forget about text colour when doing a web design. Usually I use one colour for the content text, one colour for the headers and one for the links. To emphasise text, I've forever used <strong> or the font-weight:bold property - alternatively italicised or underlined text. Recently, I took some time to analyse why I like the boxes in my sidebar here on Shinyshell so much. It turns out, font colour can give you just the emphasis you need (I can almost imagine people smacking their palms to their foreheads in collective exasperation at a "revelation" of this calibre), allowing you to calibrate just how emphasised you wish a piece of text to appear.

Shinyshell Sidebar
My sidebar - perfection in design

This may not emphasise stuff semantically because in the code it's decisively a pure display property, so you might want to set a default style for the strong tag - set the font-weight to normal and add a colour for emphasis - that way screen readers or whatever other applications will know you're emphasising something. For example, you may do something like this:

strong 
{
font-weight: normal;

/* a stronger colour */
color: #0d0c0b;

/* maybe a larger font */
font-size: 0.9 em;
}

Am I mentioning this for any specific reason? Yes, there must be people like me who accept font colour as something you set soon after starting a design, and don't change in very many places. I have no idea how many other expressive techniques I am ignoring in the process, but some are starting to catch my attention after receiving little to none of it (heh, the blockquote tag for instance).

In most contemporary web design, I see that web designers really like the colour grey. On a white background it doesn't have that biting quality like black, by having less contrast with the background, it gives a smooth, slightly pastel-like feel, like something soft smeared artistically in just the right amount. Choosing the right shade can take time, as it's interesting how even small changes in the colour value have quite visible effects. Naturally, lessening the contrast dramatically by using a very pale grey won't be good due to differences in displays on which the text could be displayed. Still, that's no reason for not using some colour other than black when the background is white.

The psychology of white backgrounds
Let me sidetrack for just a minute. Why are white backgrounds so popular? Well apart from obviously being a good way to combat non-transparent images, and white being a colour that goes well with whatever other colour, there's also a reason why white is a primary choice for many. White has been thought of as a colour of paper and innocence, something fresh and just starting out (for artists and writers, the purity of a white piece of paper is frequently intimidating). With text on it, it evokes powerful associations with books and structured information, a piece of material you hold in your hand and read. This feeling of proximity and belonging makes it more personal and "closer", in turn meaning the information on it also is more easily and better accepted by the mind. On the web and with computers in general, where documents are just bits of information being transferred over a wire, it helps a lot to display the content in a way that humans will associate with something physical - a white background, reminiscent of paper (a tangible, real object) is a good way of acting psychologically on the reader, making the context more familiar for him or her, and thus making the information easier to digest. Also, this improves readability because most physical textual documents are written on white paper - this could also help improve the attention and interest of the reader.

To sum up, use and experiment with various font colours! I don't mean pink and yellow (save it for MySpace), I meant that different shades of colours for emphasis can be used while still maintaining a formal look for the document.