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 and new techniques become available all the time. Type needs to be tailored for the different screen sizes and 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 and web is key to developing the foundation for making information accessible, legible and 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, whereas ems are based on their parent’s value.

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

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

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