Jessica Kriklewicz Team : Design Tags : Web Design

Typographic Contrast

Jessica Kriklewicz Team : Design Tags : Web Design

As you may know the majority of online readers scan content for relevant information rather than reading line by line. This is why typographic contrast and flow are essential in web design.

You can create typographic contrast by emphasising certain text by size, value, position etc. By creating this difference you divert a readers attention to areas of importance.

Here are 6 factors worth considering when placing your text in your next design:

  • Font choices: Web safe fonts are limited and so are classified in two main categories: serif and sans-serif. To create contrast it's not hard to see why designers will often use a sans-serif font for their headings and a serif font for body copy or vice versa 
  • Size: A common method to indicate higher importance is choosing a larger font size for headings.
  • Colour: You can use colour in many different ways to create contrast, two common methods are to determine a hyerlink or emphasise a problem somewhere in the site eg. warning message.
  • Case: If you are using the same font for your header and body copy, a way to create contrast is by CAPITALIZING. Capitalizing headers is more common than body copy, body copy is easier read in lower case.
  • Weight: making text a heaver wight is a good way to attract attention and emphasize an important area.
  • Space: This is arguably one of the most important feature of your design. Space in your design will let the reader know when to start, where to pause, what to read, what to click on and where to stop.