Choosing the righ text color is paramount to an attractive, readable design.
From the dawn of movable type 1,000 years ago, typography has involved the artful selection of fonts, sizes, weights, line length and spacing. As for colors, the choices were black, black and black.
The four-color process technique emerged just over 100 years ago, making full-color printing available, if only to those who could afford it.
A mere 25 years ago, digital technology brought us widely affordable color printing. Not only that, but a whole new world opened up for sharing text and images in color: the World Wide Web.
In the hands of professional designers, color has amplified the power of good typography. In the hands of unskilled amateurs, there have been unintended consequences, from merely unreadable text color to some eye-crossing, stomach-churning designs.
To guide you in the effective and aesthetically pleasing combination of typography and color, here are some DOs & DON’Ts.
DO make black your default for text. Body text is your most important typography decision because interested readers will consume a lot of it. On a white or light background, you can never go wrong with classic black text. It presents the sharpest contrast, making it the easiest to read. If you’re going for a softer look, try using a medium-dark gray.
DO use color for display type. Color adds emphasis in headlines, subheads and callouts/quotes. It is a great way to express the hierarchy of information in your design and to break up large blocks of black body text. Used sparingly, color will make display text pop, helping readers quickly scan the text on a page and guiding the readers’ eyes through the content in a logical way.
DO use color backgrounds to grab attention. Assuming most of the background in your design is white, color backgrounds behind small areas of text are visually arresting. This is great for prompting reader response to actionable content such as clickable buttons and call-to-action boxes. Black text on a light color background or white text on a dark background works best.
DON’T layer color type over a color background. Actually, this can be done effectively. But it is so often done poorly that we feel safer saying don’t do it at all. The worst combinations of typography and color feature light/bright text on a light/bright background, or text and background in dark colors of the same hue.
DON’T overload a page with color. When everything is emphasized, nothing is emphasized. The viewer can’t tell how to navigate the page or figure out what is important. You know what viewers do in those situations? They turn the page or click away.