Which is More Readable? Black on White or White on Black?
Speaking as someone who's studied typography, there are truths to both sides of this argument. I'm going to get a bit technical here, feel free to ask about any terms that seem confusing.
Black text on a light background is common in print because it is high contrast and very legible, but also because it's more cost-effective to print. Printing light text reversed out of dark ink is a little more involved and may involve trapping to ensure that fine lines aren't obscured by ink spreading through the substrate.
This is more of a problem with a lower-quality or toothy substrate. Newsprint, for instance, generally requires a low line screen value because ink spreads very easily. This also makes trapping a little more tricky. A coated paper (or even a calendared paper) found in art books and the like will require a higher line screen value, and trapping is easier.
When I say line screen, I'm referring to the halftone line screens used in most professional quality presses. It's similar to the process used by inkjet printers. Resolution (measured in Dots Per Inch for print) is closely related to line screen, being 1.5 to 2 times the line screen value. For newsprint, 150 dpi is usually crisp; for art books and more high resolution printing, 300 dpi is a common value.
Screen resolution is measured in Pixels Per Inch, which is similar to DPI. 72 ppi used to be a very common screen resolution. Nowadays, users often have larger screens capable of higher resolutions. This is something that web designers need to remember when setting type size on the web. Setting type in pixels is unreliable as the physical measurement changes based on resolution. But that's a topic for another post.
For the typography enthusiasts, there are 72 postcript points per inch when measuring type for print. That doesn't mean that type is printed at 72 dpi. Type is usually treated as vector shapes (which are considered resolution independent, so they will print at the highest possible resolution based on the print settings). Again, that's not really something I want to discuss in-depth for this post.
Back to the topic at hand: if we're really going to get specific, the issue is actually about high contrast for readability. For something like a projected presentation, white text on black is actually far more readable and less straining to read, regardless of the audience. In a dark room, it's easy to focus on bright letters but straining to focus on dark letters surrounded by a bright background.
Looking at a computer screen though, it boils down to things like age, visual acuity, and personal preference. It's also a mistake to treat print and on-screen media as overly similar. There are many errors that people make when they try to transition from one to the other. Certain things work in print that don't work on screen and vice versa.
There is high contrast between the primary type and the background on my art blog. But it is not black text on a white background (at least not when you visit the site, I can't control the display in feed aggregators). I chose a dark type on a light background combination as I want to appeal to as wide an audience as possible.
However, if I were designing a site that primarily targeted teenagers, light type on a dark background could work just fine. Teenagers online are more accustomed to looking at light text on a dark background.
There also needs to be some consideration given to serif versus sans-serif typefaces as well as the weight of a typeface. A very fine weight sans-serif can be hard to read in body copy when the text is lighter than the background. On screen this can cause some readability issues if the type is too thin or too small. In print, the type would need to be trapped more carefully so that letterforms aren't obscured, meaning that there are more possible problems with this combination in print.
Many studies will tell you that a sans-serif typeface is more readable on screen, and a serif typeface is more readable in print; but that's a bit subjective. There are certainly ways to use both on screen and in print effectively.
I have a program on my computer for checking contrast for colour-blind visitors called Sim Daltonism. I use it sometimes on my sites and sites I design for clients to ensure that there is distinguishable contrast for all text. It's a simple program, but it makes it easy to double-check contrast.
I hope you found this post interesting. Feel free to comment with any of your thoughts on the subject of contrast for readability.
Black text on a light background is common in print because it is high contrast and very legible, but also because it's more cost-effective to print. Printing light text reversed out of dark ink is a little more involved and may involve trapping to ensure that fine lines aren't obscured by ink spreading through the substrate.
This is more of a problem with a lower-quality or toothy substrate. Newsprint, for instance, generally requires a low line screen value because ink spreads very easily. This also makes trapping a little more tricky. A coated paper (or even a calendared paper) found in art books and the like will require a higher line screen value, and trapping is easier.
When I say line screen, I'm referring to the halftone line screens used in most professional quality presses. It's similar to the process used by inkjet printers. Resolution (measured in Dots Per Inch for print) is closely related to line screen, being 1.5 to 2 times the line screen value. For newsprint, 150 dpi is usually crisp; for art books and more high resolution printing, 300 dpi is a common value.
Screen resolution is measured in Pixels Per Inch, which is similar to DPI. 72 ppi used to be a very common screen resolution. Nowadays, users often have larger screens capable of higher resolutions. This is something that web designers need to remember when setting type size on the web. Setting type in pixels is unreliable as the physical measurement changes based on resolution. But that's a topic for another post.
For the typography enthusiasts, there are 72 postcript points per inch when measuring type for print. That doesn't mean that type is printed at 72 dpi. Type is usually treated as vector shapes (which are considered resolution independent, so they will print at the highest possible resolution based on the print settings). Again, that's not really something I want to discuss in-depth for this post.
Back to the topic at hand: if we're really going to get specific, the issue is actually about high contrast for readability. For something like a projected presentation, white text on black is actually far more readable and less straining to read, regardless of the audience. In a dark room, it's easy to focus on bright letters but straining to focus on dark letters surrounded by a bright background.
Looking at a computer screen though, it boils down to things like age, visual acuity, and personal preference. It's also a mistake to treat print and on-screen media as overly similar. There are many errors that people make when they try to transition from one to the other. Certain things work in print that don't work on screen and vice versa.
There is high contrast between the primary type and the background on my art blog. But it is not black text on a white background (at least not when you visit the site, I can't control the display in feed aggregators). I chose a dark type on a light background combination as I want to appeal to as wide an audience as possible.
However, if I were designing a site that primarily targeted teenagers, light type on a dark background could work just fine. Teenagers online are more accustomed to looking at light text on a dark background.
There also needs to be some consideration given to serif versus sans-serif typefaces as well as the weight of a typeface. A very fine weight sans-serif can be hard to read in body copy when the text is lighter than the background. On screen this can cause some readability issues if the type is too thin or too small. In print, the type would need to be trapped more carefully so that letterforms aren't obscured, meaning that there are more possible problems with this combination in print.
Many studies will tell you that a sans-serif typeface is more readable on screen, and a serif typeface is more readable in print; but that's a bit subjective. There are certainly ways to use both on screen and in print effectively.
I have a program on my computer for checking contrast for colour-blind visitors called Sim Daltonism. I use it sometimes on my sites and sites I design for clients to ensure that there is distinguishable contrast for all text. It's a simple program, but it makes it easy to double-check contrast.
I hope you found this post interesting. Feel free to comment with any of your thoughts on the subject of contrast for readability.
Labels: theory, tips, typography
posted by Emily | 9:00 AM
|
1 Comments
Links to this post
