A simple guide to typography

Typography has an incredible impact on the effectiveness of your designs, some say it’s the most important part of any web design. It’s also a huge topic that some people dedicate their entire career to and so can be understandably daunting for experienced and beginner designers alike. This guide is an attempt to distill a lot of the best practice advice into a very concise reference.

Font choice

The right choice of font undoubtably depends on your content and your audience, even the much hated Comic Sans might be a good choice for your website if the service offered is clowns for childrens birthday parties. If however the service being offered is a mortgage brokerage then you might not inspire the desired level of confidence.

Brand identity

Before being able to choose the right font for your website it’s vital to have a clear idea of how you want your brand to be viewed by your target audience. The kind of image that the brand should portray is fundamental to font choice. Do you want to generate trust first and foremost? Trust amongst academics or trust among investors? Do you want to appear playful or serious? Traditional or cutting-edge? Until you have the answers to these questions choosing the right font will be a shot in the dark.

Here are some adjectives that you might use to describe some of the main typefaces, this should help orient your first decision: what typeface to use for your primary font.

  • Serif: traditional, sophisticated, reliable, formal, respectable, timeless
  • Modern serif: glamorous, luxurious
  • Sans serif: modern, objective, sensible, neutral, straightforward, simple
  • Modern sans serif: forward thinking, progressive, corporate
  • Display: friendly, eccentric, quirky
  • Humanist: sociable, fun, welcoming

Intended use

Another important consideration when choosing a font is what it will be used for. For example if you are designing for a data analytics platform you probably want something compact for high information density and if you are designing for an online magazine then reader fatigue will be one the main considerations (serif fonts typically score higher in this regard for example).

Line spacing

Probably the biggest visual impact after font choice is going to come from line spacing, try and keep the line spacing between 1.3 and 1.5 for your body copy. When it comes to headers then feel free to experiment with tighter line spacing for interesting effects.

Line length

Try and keep to a rule of 50-75 characters per line.

work in progress

More articles…