1

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?

2

"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

  • 1
    I'd kind of disagree about the splash, even more so due to the contrasting angle background. It's very hard on the eyes, or at least my eyes. – Scott Jan 12 '15 at 3:51
2

Simple answer, yes. Dark text on a light background is generally preferable to light text on a dark background and whilst there maybe plenty of times where a design purpose overrides this default (maybe you're creating a flyer for a Halloween party or a poster for a heavy metal band so a dark background makes more sense), it's generally not a bad rule of thumb.

There are many great reasons for this and a lot of research has already been done so rather than writing a novel here I'm going to suggest you google it if you want to understand more, however here's one of the big reasons:

About half the population suffer some sort of astigmatism and light text on a dark background exacerbates the effects of such impairments. Understand that all colour is created by light or the lack thereof - When referring to an additive spectrum (RGB) or screen displays, true black is the absence of light and true white is saturation of light - so when looking at a white background your iris does't need to open very wide to draw in enough light for you to see. Conversely, when looking at a dark background, the iris expands to draw in more light, further deforming the lens and increasing the effects of the astigmatism, making text appear blurry.

0

There's an important distinction which is being overlooked....

Print or web???

In print design, while reversed type is harder to read and isn't preferred, it is okay in some instance. It's not something to always avoid, but rather use wisely and sparingly and consciously. Reversed type can wisely be used to call attention to specific areas or detract from areas within print design. While you wouldn't create an entire magazine article using reversed type, you may create an advertisement or poster where all the type is lighter than it's background. In fact look at movie posters -- a great deal of them are lighter text on darker background.

This works in print design because the user is general farther away from the materials, is only view it momentarily, and is not always focused on retaining all the text's information.

Now, web design is a different animal entirely. Reversed text is generally a poor choice for web design. While there is no "rule" about using it, you should realize that reversed text on the web means literally the light emanating from the text creates visual patterns on the eyes' retinas. Ever read a reversed text web site for 15 minutes then go to a different site without reversed text? (or simply close your eyes) -- you see horizontal stripes in your eyes. This visual pattern exists when you're still looking at reversed text on the web, making it increasingly more and more and more difficult to read reversed text.

Using low contrast reversed text may help a bit, for example an orange background with a yellow headline. However, because the reader is literally 3 feet away from the content you don't want to set too much text as reversed for web design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.