Reversed type is white text on a black background. These rules apply to any inversion of the traditional black on white contrast, in other words, light text on a dark background.
Text typefaces were designed for black text on a white background. The forms, proportions, and stroke weights of their characters were designed around the gestalt principle of figure-ground. A high contrast is needed between the foreground and background. When you set type in color, over a colored background, or reverse the contrast you are changing the usual contrast. This, combined with the limitations of both print and screen mediums, make reversed type tricky at text sizes. We will discuss this per medium in this lesson, however, there are some global rules to cover first.
In general, a sans-serif performs better in reversed setting; the sharp edges of serifs can pose a problem.
Avoid using italics, they are already more difficult to read.
Avoid using script fonts, they are too delicate.
Increasing the line-spacing can improve the legibility of reversed type.
Sometimes it also helps to increase the letter-spacing.
In print, reversed type appears lighter. Black is visually stronger than white and black ink tends to bleed into the white letterforms making them appear lighter. Typefaces were designed to account for the spread of ink. When you reverse type, the spread happens in the opposite direction than intended — into the letterform. If the text is set too light, it may fill in with ink. Additionally, when characters are set too close they may become joined.
The quality of paper can intensify this effect. For example, coarse or absorbent paper, like newsprint, can be very problematic as ink tends to bleed more.
Reversed text should be large enough to combat ink spread. Offset printers no less than 10 point and 12 point for newspapers.
Avoid using light weight faces; heavy and/or low-contrasting typefaces perform better
A semibold type for text can make reversed type more readable; the thicker stems and strokes help prevent ink spread.
Thicker hairlines reduce the potential to fill in, thin hairline strokes may clog up. In print, a general rule is to make sure that hairlines have a minimum thickness of 0.5 point.
Increasing tracking will help prevent letters from joining.
Consider using a sans-serif. The sharp or thin edges of the serifs may disappear.
On screen, similar issues come into play. On screen, black is not displayed — the white pixels around black text are illuminated whereas the pixels that make up the black text are turned off. Therefore, the text that your eyes are fixated on is glowing causing small or tightly spaced type to light-bleed together.
Small or tightly spaced type can bleed together.
A larger size and looser spacing helps prevent light bleeding.
The glowing text is spreading into the black background, the opposite of ink spread (where black ink is spreading into the letterforms). This makes the text appear heavier rather than lighter, like it does in print. With all this in mind, you should avoid using reversed type for body copy on screen. If you must, use a light gray instead of pure white or even a lighter font to minimize its negative effects.
Avoid using pure white for body text on screen.
A light gray helps prevent light bleeding.
The high contrast or reversed version of this site uses a light gray and slightly increased letter-spacing to prevent light-bleeding.
If you intend on printing this page there are a couple of things you need to know. Web browsers remove background colors and images that were set via CSS when you print a page. This site uses a separate print stylesheet that tailors the page and type for print. However, not many sites do this; so this standard has its purpose and can not be overridden. Only Chrome and Safari 6.0+ allow the designer to force the printing of background through the -webkit-print-color-adjust property. However, in other browsers such as FireFox, Internet Explorer, and Opera you have to enable background printing manually. If you are using Firefox, you can click here to see how.