Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Komal Komal

Styling white text on black background for comfortable reading

Hello everyone! This is my first post in this great community. I am working on a project where I need to keep text white on black background. It is a content heavy web application like community or forum. I am using white text with 80-90% opacity. 

To me reading white text on black screen is too tiring. I would simply skip it. 

So I am looking for ways to make it easy and comfortable to read for end user by adjusting font sizes, letter spacing, text color, opacity, line height etc...

I couldn't get any relevant article dealing with this problem specially. So if you have anything related, do share.

Thanks in advance.

 

0

comments

sort by


Lala Galindo
InVision ambassador Lala Galindo , ambassador
Comment actions Permalink

Welcome to the community, Komal!

There's no best pattern for white on black typography, depends on the goals, demographic and business goals. I found the following articles, let me know if this helps!

 

Why You Should Never Use Pure Black for Text or Backgrounds

https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/

 

Dark UIs. The Good and the Bad. Dos and Don’ts.

https://www.toptal.com/designers/ui/dark-ui

 

Best Practices to Improve Text Readability for Optimal User Experience 

https://www.intechnic.com/blog/best-practices-to-improve-text-readability-for-optimal-user-experience/

 

Hope this helps!

Lala

0

Rob Whiting
InVision ambassador Rob Whiting , ambassador
Comment actions Permalink

Hi Komal, you mention that you are;

      “working on a project where I need to keep text white on black background”

Out of interest, is this a design decision that is fixed based on the projects brand/etc.? There is some useful research (https://tecfa.unige.ch/tecfa/maltt/cosys-2/textes/hall04.pdf) that indicates light text on a dark background reduces readability, retention and æsthetic appeal so might be worth review as to what this would provide your users.

0

join the conversation

to comment, sign up or sign in.