Any problems with light text on dark background?


My high school journalism teacher always said putting light text on a dark background is hard on readers' eyes and is a bad thing to do. But in my experience making spreads, there are many instances where light text on dark background looks awesome and definitely enhances the appeal of a spread.

Is this "no light text on dark background" a good rule of thumb?

1/12/2015 3:22:00 AM

"No light text on dark background" is a good guideline, but not a rule.

Like all design decisions, the correct answer is dependent on the situation at hand. Certain people prefer darker background with lighter text, others prefer the opposite. The medium you're using also has an effect, as does the situation in which the design is read (for example when I'm programming all day I can't work in a black on white context - I need a darker background with lighter text because of staring at a screen with high luminescence all day will kill my eyes). Think critically about the end user and have people test the result you create regardless of how you decide.

With that being said, light colored text on a dark background is harder to read in bulk than dark on a white background. When you expect readers to read a lot of text, you should avoid dark backgrounds. As InfluenceJamie talks about in his answer, it can have some accessibility issues for large sections of text.

However, dark backgrounds can be particularly good for content that features lots of images or does not contain lots of text. But there are some guidelines to follow when doing so:

When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines. --- Mark Boulton in Five simple steps to better typography

Sometimes adding a subtle text shadow for light text on dark backgrounds can help improve readability as well.

I think a good example of white text on a dark background is my current splash page. There is not too much content to read and both the font used and background color are clean, not using any gradient or something that may hinder readability. For my blog on the other hand, I chose black on a light background because of the amount of text that will be read.

My splash page and blog

Some of this answer was pulled from this very related question

4/13/2017 12:46:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow

Website under construction!!!