Design & UX
Article

Use Contrasting Fonts for Maximum Impact

By Jennifer Farley

typeThere’s a lot more to typography that just picking a font. It is the ability to choose an arrangement of type that is legible and attractive. There are four fundamentals that can help you maximize the readability and improve the look of your website:

  1. Contrast
  2. Hierarchy
  3. Space
  4. Size

Here, we’ll look at contrast.

When we talk about contrast in typography, it can mean several things:

  • The contrast between large and small type.
  • The contrast between different typefaces, for example a script font used for a heading and a sans-serif font used for body copy.
  • The contrast between the font colour and the background it appears on.

In a nutshell, contrast is an important factor in how easy it is to read text. You want to avoid making your web visitors squint, or feel the need to put on sunglasses when they visit your site and you can do that by choosing suitable foreground and background colors.

Let’s look at a very simple example of good contrast. Black text on a white background. It’s very easy to read.

image0022

Reversing that out, with white text on black background.

image0041

Again, easy to read. However, things would be a little dull on the web if EVERYONE used black and white. Dark colored text with an off-white background color, or vice versa, still provides excellent contrast while bringing a bit of color harmony to your site. Here are some examples of contrast between text color and background color that work well.

image0061

Obviously this is only a small list, but the key point to remember is you want to avoid making it difficult for readers. Always ensure that there is sufficient contrast between text and its background.

image008

The above are examples of contrast from the wrong side of the tracks — they’re bad! As you can see, some of these color schemes actually hurt your eyes and should definitely be avoided if you want to keep your readers. The top three are also nearly impossible to read.

Let’s take a look at some working examples of good contrast. I’ve picked out 5 sites that have a color scheme which uses good contrast, none of which are black and white.

ArtDesign

image010

Sans Ink

image012

Mr Vector

image014

Blue Bonnet Cafe
image016

Lee Munroe

image018

Have you come across any nice or unusual color contrasts on a website that you’d like to share?

More:
  • Onjegolders

    Is there any way of calculating the maximum contrast in relation to a background colour? Ie: if I have a claret red background is the only way to find a good font colour by trial and error?

    • http://klepas.org Simon Pascal Klein

      Well, you could define programmatically what is good and bad contrast (it would be an arbitrary definition) and then write a complex program that computes whether or not something matches either definition… so essentially impractical. A good eye, and testing (i.e. reading, and asking multiple people to read it, on various OSes, browsers, and screens) is your best bet.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.