Typography 101

While we are told there are no rules in typography, how can we ever learn what to do. Below is a list of thoughts for when you are setting typography for web.

 

1/ Using more than 1 or 2 typefaces can weaken your design

Having a variety of typefaces can create a cacophony of mixed styles and messages. When working from a smaller pool of options it allows typographic attributes like size and colour to come to the fore. Type elements  will feel like they belong together, because they come from the same place.

 

2/ Leave caps for headlines only

Most of us aren’t accustomed to reading lots of text in all caps. That’s because the capital letters are blocky and don’t create much contrast between them and the space

around them. 

 

3/ When designing a website that has articles, look for typefaces that work with running text

Most of the appropriate typefaces will fall in the serif and sans serif classifications, as typefaces in other groupings will be too distracting for long stretches.

 

4/ Try word association to choose an appropriate typeface

Ask yourself: what do I want my design to convey? Think of words that describe the feelings or moods you’d like to impart.

 

5/ Be careful with free fonts

A great typeface requires significant research, time and investment. There is risk of incomplete character sets and less technical or aesthetic cohesion (the typeface feels uneven)

Some free can be ok, just be cautious and do your research. 

 

6/ Whitespace is not just for print

Space frames the content and provides structure to the page.  If your web pages are cluttered, it can push the user to leave the space.

 

7/ Try a partnership of opposites

Pair a serif and a sans serif typeface. This will provide effective contrast and enough options for variation.

 

8/ If in doubt make it bigger

This has been a no-no in print design but web space is sympathetic to larger typesetting. 

 

9/ Create hierarchy

Type creates and supports a website’s structure. Use contrast, size, colour, and placement to create a design system that prioritises content to guide the user.

 

10/ Think about grids

Grids can provide consistency, support organisation of content and reinforce typographic hierarchy.

Source: On Web Typography; by Jason Santa Maria, 2014