Typography: A Primer For Web Designers

For many designers – both online and off – the world of typography is something of a closed book. In part, the issue owes a little to the fact that in the early days of the Internet, designers were more or less limited to a small selection of ubiquitous web-safe fonts (and the only meaningful decisions that could be made about web typography were whether it was better to use Verdana or Tahoma for body text).

Today, web designers have the ability to use anything they like by loading in custom font files, either from their own hosting or from the enormous typeface repository that is Google Fonts. Now, the typography issues facing designers have transformed from “which of these ten or fifteen web-safe fonts is the most appropriate for this project?” to the much broader problem of deciding – faced with all the choice in the world – what to actually pick.

What makes for good typography – and what are some particular considerations for the Internet as opposed to the history of printed type? Let’s take a look…

#1 – Readability is king

If a beginning typographer had the time to learn one single maxim, it should be that “readability is king.” It doesn’t matter how ‘cool’ or stylish a typeface is – if the viewer can’t immediately understand it, it’s no good. All other considerations are secondary to this.

Especially for the small screens of smartphones, if your text requires that the viewer squint their eyes and hold the device closer to their face it probably needs some work. As with all areas of design, form follows function – and the function of text is to be read.

There are a number of factors that can sometimes contribute to poor readability:

  • A muddled, unclear typeface.
  • Text rendered at too small a size (especially on mobile devices).
  • A lack of contrast – eg., light text on a light background.
  • Unoptimised line lengths – text lines that are too long or too short can be exhausting to read, and many experts cite a target of 60 characters per line as being the magic number.
  • Accessibility – did you know that approximately 1 in 12 men have red-green colourblindness? If you’re counting on the colour of your text to distinguish it from the background, some of your users might run into problems.

Of course, there’s rather more to good typography than this – but making sure your text can actually be read is a great place to start.

#2 – Get to grips with classic fundamentals

Typography has been an established field with its own concepts and terminology for hundreds of years before the Internet came into existence, and learning some of the classic theories can help put your mind on the right wavelength to understanding the world of online fonts.

Learning some of the jargon can help a web designer to think more specifically about what is right or wrong with a given typeface – a vague notion that a header “looks a bit too bunched up” is a less helpful thought than identifying that you may need to increase the leading.

A full glossary of the dozens of typography terms such as beaks, bowls, tittles and arcs is probably beyond the scope of this introductory piece, but there are a few bits of jargon that everybody who works regularly with fonts should really know:

  • Serif and sans-serif fonts – serifs are the little projections found at the ends of the strokes of some fonts, such as Times New Roman and Georgia. Serif fonts are those that have these projections; sans-serif are those that don’t (like Arial).

  • Tracking – tracking is the uniform spacing between letters (often confused with – but distinct from – another concept known as kerning, which can be disabled but not actually customised via stylesheets). For web designers, tracking can be controlled with the CSS property letter-spacing.
  • Leading – the spacing between lines. This can be modified with the line-height CSS property.
  • Word spacing – self explanatory, and controllable via word-spacing in CSS.

 

It can also be invaluable to learn some of the classic “typeface categories”, and a little familiarity with the Vox system – a type classification system first established in the 1950s – can help to be clear about whether you might be needing a geometric sans or a transitional serif for a given project.

#3 – Don’t use too many fonts

 When it comes to the question of how many different typefaces should be used for a web page, the golden rule is really to use as few as possible – perhaps no more than two (one for headers and another for body text). A page featuring an erratic selection of fifteen fonts will be confusing and will lack consistency for the reader – not to mention being highly distracting.

The typefaces you use for your projects are important for setting the tone of the page – an old-style serif font might imply old-fashioned traditional values, say, whereas a slab-serif face could invoke a sense of intellectualism. By ping-ponging from one style to another, a website can show a confused sense of identity – and if you find that you really need to use more than two or three, you might consider using a different weight variant of one of your existing fonts rather than adding a fourth, entirely new typeface.

Of course, even when using just two fonts for a project, you still need make sure they are carefully paired to complement one another – and if they are too similar the minor differences will appear as annoying inconsistencies to the viewer. Pairing fonts is an art, but by paying attention to widths and weights you can select two or three that will play nicely together without too much difficulty.

As a bonus tip, a good way to test the suitability of typefaces is via the use of ‘pangrams’ – those phrases that include every letter of the English language at least once, as in the famous sentence “the quick brown fox jumps over the lazy dog”.

#4 – Watch for common mistakes

 Designers inexperienced with typography tend to overlook some of the same small details in their work – here are some miscellaneous observations of things that should be remembered.

  • When laying out your text, be careful not to leave orphans and widows – single words left on their own line at the start or end of the passage respectively. For web designers, the responsiveness of text fields for different screens might make this challenging (but it’s good to avoid the effect wherever possible).

  • Watch out for font licensing – it’s true that you can use CSS to load any font file off your server that you happen to like, but don’t assume that every “free font” you got off the Internet is necessarily available for commercial use. Usually, the website where you found it will make clear the licensing information; at other times, the font download itself may come with a text file laying out the rules.
  • When scaling fonts that will be viewed on mobile devices, use em or % as your units of measurement rather than pt or px – this will allow the text to resize in a manner relative to the document’s settings rather than staying at a static scale.

 

At the end of the day, typography is a powerful tool in the designer’s arsenal and can transform the tone and ‘vibe’ of any website. By understanding the individual merits of different typefaces (and how their display might be customised) a web designer can ensure that the finished page communicates in the manner intended.

Now that we have the capabilities of modern CSS, the possibilities for elegantly presented text on the Internet are almost endless – and with a good understanding of tried-and-tested typography techniques, a site designer can be sure to always find the perfect font for any project.

Leave a Reply

Your email address will not be published. Required fields are marked *