Connor Wilson » Blog Archive » Light on Dark Considerations

Light on Dark Considerations

Posted on July 14th in Design — 4 Comments so far. Got something to say?

A design with light text on a dark background (LOD) can provide a great dramatic effect and be very interesting. Some of the best pieces of web design are in this style, and while many stray from it because of its readability, there are ways you can save that.

Fonts and Sizes

You’re probably going to want to go with a nice rendering Sans Serif font (what’s that?). Chances ar, your design is slick and modern, not calling for Serif at all. That’s not to say a nice Serif font in the headings is out of the question, however.

Though pure white (#ffffff) on pure black (#000000) does offer a great deal of contrast (perfect, in theory) when reading on the web it doesn’t turn out that way. This isn’t to say you always need 100% on the readability meter for every site. Some good font choices (sans):

Lucida Grande 12px or higher
Arial 12px or higher
Trebuchet MS 14px can work

The only thing you don’t want to do is something like a 10px Verdana. These are just examples, as well, I would hope you would be using their EM equivalents in your CSS. Oh, and yellow on black, never a good choice. Speaking of…

Colours

Make sure the background colour is dark enough and the font colours are either pure white (#ffffff) or damn close (#f1f1f1). Almost any colour in the background can work when done right, whether it be a dark blue, green, grey, red or whatever.

Sometimes when going in a really dramatic direction with the design, a really modern font or small one will work best. Keep in mind, a blog style site will have visitors that don’t appreciate the squinting, but for a site where reading isn’t the main objective, have fun. Skinny, all caps fonts in headings seem to work well in a dramatic fashion, on LOD sites.

Light on dark sites even have their own CSS gallery, aptly named Light on Dark, give it a look.