3

The general consensus on legibility is that black text on a white background is superior to white text on a black background. (See: White text on black background) But there are some cases where white text on a black background is preferred.

While the question linked above question does provide some answers, I'm still left with other questions regarding the white text on black scenario. Especially considering that nearly all information regarding text legibility assumes black on white.


Questions

Keep in mind that the questions below all refer to the white text on a black background scenario.

  1. Have any studies been done regarding this topic? Especially where the conclusion doesn't boil down to "Don't use white on black".
  2. What do I look for when picking a font? Maybe provide some examples of good fonts to use.
  3. Does the optimal line length change?
  4. Does the optimal line height change?
  5. Does the optimal character spacing change?
  6. What is the optimal "black-space" for inbetween paragraphs or content?
  7. Is there any benefit to adding a subtle text-shadow?
  8. Is there an optimal contrast ratio between the "white" and "black"?

Black-Space

And in regards to the "black-space" questions, I've read conflicting opinions. One being that white on black needs more space to improve legibility, and the other saying that it needs less space.


In Short

What can be done to optimize legibility for white text on black backgrounds?

7
  • 1
    Possible duplicate of White text on black background Sep 13, 2017 at 13:24
  • Swen, do the answers at the linked question help to answer your question? If not, please clarify what additional questions you have so we might be able to answer in a different way. Sep 13, 2017 at 13:28
  • @maxathousand Yes, I've seen that question and have read it's answers, however, I think my question and the one you provided are inherently different in nature. "Are there any reasons to avoid using white text on a black background?" To which the answers are mainly why you should avoid it. While my question covers the topic of how to make it work.
    – Swen
    Sep 13, 2017 at 13:38
  • Maybe increase the font-width, make it slightly bolder? There are some fonts that might increase the visibility also. Try a few google fonts.
    – Varun Nair
    Sep 13, 2017 at 13:47
  • @maxathousand I have expanded my question to differentiate from the possible duplicate.
    – Swen
    Sep 13, 2017 at 14:03

1 Answer 1

2

The usage of dark-themed websites have increased over the ages. And to many, including me, a dark themed website keeps me interested rather than a light or white background website. But this is a matter of personal choices and preferences.

These are some pointer you could use while deploying a dark background theme.

  • Although it may seem soothing to the eye, continues reading of white lines on dark background increases the strain on the eyes. White color requires the reciprocation of all three color cones of our eye, and that too, with maximum strain. So avoid writing paragraphs and paragraphs of contents with white text color.

  • Use slightly bigger fonts and increased font width and boldness. This doesn't mean your white text should burst of your screen with monstrous fonts and super-thick boldness. Keeping it a little more highlighted will reduce the strain on the eyes.

  • Unlike white background, a dark theme does not look awkward with plenty of blank spaces. Use spaces between white-colored contents. You can separate white block contents with a significant blank space. You can also increase the line height and ensure spacing between white-colored lines of text.

  • Use shades of gray. One might argue that '50 Shades of Grey' isn't very pleasing for the eyes, but jokes apart, grey or gray is very relaxing for the eye. Try lighter shades of grey instead of pure white.

  • Try to use moderately dark backgrounds instead of Solid black.

  • Use images to keep the view interested in the content. Too much black may dampen the mood of the viewer/ user and you do not want that.

  • Use creative fonts. By creative, I don't mean flashy font, but try curvy fonts, continues fonts and informal fonts. This should keep the viewer interested on the content. There are tons of fonts available in Google Fonts. Try a few.

Although 7/10 users will prefer a white background that a dark theme, there is nothing wrong in doing it. But you have to be careful while you play on inverse colors of standard norm for UI/ UX.

Go through the following links. They should give you insights on your queries. http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/ https://www.webdesignerdepot.com/2009/08/the-dos-and-donts-of-dark-web-design/

UPDATE

As for the specific measurements you were asking, nobody can answer that but you. Try and keep trying. Only your design can give you the optimum spacing requirements for all that.

Hope this helps.

2
  • This answer is a good resource, but does not seem to take body-content into account. For example, you suggest not writing paragraphs, which is not an acceptable solution. Also, your suggestion of using bolder fonts directly contradicts one of the answers in the linked question, which states that a "thin" or "light" (not "narrow") font or font-weight will reduce the effect of the letter body bleed.
    – Swen
    Sep 13, 2017 at 14:31
  • It's not forbidden to write white-lined paragraphs. But it will not be pleasing to the viewers eyes. Just try doing it and have someone read it. If the paragraphs is not too big, it won't be an issue.
    – Varun Nair
    Sep 14, 2017 at 5:28

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