Web Typography for Designers & Front-End Developers

Web Typography for Designers & Front-End Developers

Creative, Digital, General

I’ll be honest with you, my secret (until now) passion is web typography. If you’re a fellow front-end developer or a designer, then hear me out, this article is for you.

I remember when I first started learning how to build websites, there were restrictions on what typefaces could be used based on what was installed on our browser/operating system. These are known as web safe fonts as they ensured compatibility between browsers/operating systems.

If the browser doesn’t support the first font, it will try the next font until it finds one that’s supported by the browser.

Now using just web safe fonts is a thing of the past …

We can now implement @font-face, a CSS property that allows us to link to a font file and pull it into the browser. This means there are many options available ranging from font end-user license agreements, to hosted third party solutions such as Google Fonts, Typekit, and Fonts.

We have so many choices available that it can become even harder deciding which font to pick. Even if a font you pick looks beautiful on your Chrome browser, it might be aesthetically unsuitable or illegible in another browser.

Web type is technical. Fonts render differently and inconsistently across all browsers, which can prove to be a headache. Even just serving a font file can increase a page file size meaning sometimes a fall back font loads first, before you see the actual font.

Why does web typography matter?

Good typography is one of the key factors when it comes to building beautiful websites. A lot of web design is based on the text, so selecting the right typography is important to making the site successful. Below are a few rules I like to follow when choosing web fonts:

The type should mean something.

You could just choose any font purely because it looks nice, but does it give the site the appropriate character you are trying to portray. There are only really two classes of fonts in the web; serif and sans-serif. If you are not sure what they are, serif basically is the additional edges on the letters and, sans serif means without the edges.

It is possible for both font classes to work well together within a mixture of paragraphs and headings, however if you get this wrong it can negatively impact the whole feel of the site. Look at some examples below where the typefaces used bring the right feel.

Feels pretty good right?

Keep fonts to a minimum.

In the past, when you were restricted to just the web safe fonts, a general rule was to stick to one font. But now you can add several fonts to make things more visually pleasing. Be sure to carefully pick the combinations appropriately so that they are consistent throughout the site.

As you can see they are using more than one typeface appropriately and consistently. There is nothing stopping you from using lots of fonts if you are going for a design approach, but you will have potential issues (as mentioned earlier) with illegibility and readability. Again as a general rule keep fonts down to a minimum.

If on your website you have both versions of the serif and sans-serif including weights and styles, using a ‘superfamily’ typeface is a good way of keeping fonts to a minimum

Examples of ‘superfamily’ typefaces include:

Line Spacing.

Line spacing is an area that I can’t consider enough when it comes to good web typography. The spacing of the lines of text is an important aspect, it allows the content to breathe and is easier for the user to read. As a general rule, line spacing should be at least 8/10px larger than the font, but that depends on the design of the site and font typeface you have selected.

Weight.

The weight of a font is basically how thick it is. You have different levels of weights from Ultra Thin to Heavy. The idea of using weight is to add some subtle importance to the text, such as highlighting an open paragraph or word.

Also by using font weight, you don’t need to use multiple fonts that again cause bad readability.

Conclusion.

Web typography should be an important part of the thought process when designing a site.

Deciding on your primary typeface is key to how the site flows and sets the tone. Mix and keep the typefaces to a minimum ensuring that they are consistent and, are following the style of the site. Allow the site to breathe, providing good line spacing so the audience can read with ease. Use subtle font weights to highlight importance without making it illegible.

Let us know what you think. And if you’ve built a site with lovingly crafted typography tweet us the link – @designbythrive.

Advertising May 30, 2017

Guest Blog – ‘Work Experience At Thrive’

by James Gingell

Development May 16, 2017

The Importance of Wireframes

by Rich Wilcock

Advertising May 9, 2017

The Power of Print in a Digital Landscape

by Lucy Sherratt