News & Tips

Web Typography Tips

Good typography is the foundation for clear communication on any medium. If your project suffers from poor typography, your intended message may become confused or lack impact. 

Poor legibility, especially with large chunks of text, can turn your viewers/users away, as your text is too ‘difficult’ or ‘an effort’ to read. Your text should feel effortless to read, rather than a chore.

The web is especially difficult when it comes to typography. There are so many different things to consider & new techniques become available all the time. Type needs to be tailored for the different screens sizes & resolutions available today to give an optimum user experience. Text that reads great on a 27′ desktop in your bedroom may not be so good on an iPhone in portrait orientation in the street.

Finding the right combination of the below properties in both print & web is key to developing the foundation for making information accessible, legible & readable:

  • Typeface

  • Colour

  • Font weight

  • Font grade

  • Line spacing (leading)

  • Letter spacing (tracking)

  • Word-spacing

  • Hierarchy

  • Layout

With the web typography, there are other considerations to take into account, some are listed below:

  • Screen size

  • Screen resolution (pixel density)

  • Device orientation

  • Viewing distance

  • Viewing environment

  • OS Rendering engine

We use responsive rems or sometimes ems in my CSS for the type values. Rems are a root based system of sizing, so are easier to grasp, where as ems are based on their parents value.

The benefit of rems or ems over pixels (px) is that they are not affected by the pixel density of your users screen. They will help your type look great on on any device & allow for a better user experience.

Now days there is an amazing range of webfonts available. We usually use Google Fonts or Adobe Typekit for our web typefaces.

Web typography,  just like every other aspect of web design & development, is in a constant state of flux, with new techniques & technologies becoming available all the time. It’s an exciting time to be a web designer, but also a challenge.