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

by Swen   Last Updated September 13, 2017 14:16 PM

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?

Tags : text typography


Answers 1


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.

Varun KN
Varun KN
September 13, 2017 14:08 PM

Related Questions


How to convince a client to use responsive typography

Updated September 08, 2016 08:07 AM


All capital titles: good or bad?

Updated March 16, 2016 08:06 AM

What is the optimal vertical margin between paragraphs?

Updated November 09, 2017 04:16 AM