When designing a site, the one part I sometimes find the hardest, and ultimately most crucial, is the font choice. For me, this can completely change the way the site looks, even if the structure and content doesn’t change at all. In this blog, I want to explore the various different aspects of fonts and what a subtle font change can do for your presentation and accessibility. The topics I will discuss are:
- Font choice
- Letter spacing
- Line height
- Font weights
- Things to avoid!
- Font resources
Font choice
Choosing the best fonts for websites may seem like a trivial matter in some cases, but following simple typography guidelines can make a huge difference in the readability and feel of your site. In web design, under the fonts umbrella you have two choices. A serif font and a sans-serif font, sans meaning ‘without‘ in french. The serif refers to the small lines or curves that you find at the start/end of letters, which is there to make the text read as one continuous word.
The rule of thumb is to apply serif fonts to content and sans-serif fonts to headings and titles. This isn’t always applicable, as some sans-serif fonts have been designed to be more readable without the serifs, but be careful about which of these that you choose.
Once you’ve decided which elements will receive the serif/sans-serif treatment, it’s then down to choosing which fonts to use. As you may have noticed on my home page, roughly 50% of websites on the web are using Helvetica or Arial fonts. These are two great, traditional fonts and their generic use across the web makes them immediately familiar to people. However strange it may sound though, for that very reason I would recommend not using them in their default form. Even if purely subconscious, you want people to feel like your site has a uniqueness to it. The user may not be able to put their finger on the fact that they recognise an all too familiar font, but it could still work against you.
If you do want to use a familiar font, then play about with it’s properties (as will be discussed later, letter spacing, line height and font weight). If done properly, it can almost transform it into a “new” font. For example, i’ll use an arial font:
The quick brown fox jumps over the lazy dog (regular)
The quick brown fox jumps over the lazy dog (-2px letter spacing)
The quick brown fox jumps over the lazy dog (+3px letter spacing)
These three examples are all using the exact same font family, but by simply altering the letter spacing they’ve been transformed to look quite drastically different from the original. If using Helvetica in particular, there are now so many options of weights and derivatives that you can drag your site away from the norm (albeit, continue to avoid using out-the-box Helvetica).
If by this point you’ve made your font accessible, as well as diverse, you still may not have picked a good font. Take this site for example and see how it looks by changing the font to (the dreaded!) Comic Sans. Absolutely nothing has changed except the font, and yet it has now drastically changed the presentation. I would hope readers are in agreement that it looks very poor.
Ultimately, font choice is a hard one to know when it’s right but quite easy to know when it’s wrong. To an extent, content will dictate what looks right (which is why it’s important to get the content first) and each design will obviously be different. Depending on how you design, you may prefer to choose your fonts first and then go with what works, or you may prefer to layout the structure and content and then pick an appropriate typeface.
Letter spacing
As touched on in the previous section, this is a good way of customising a font and make it stand out from the preset version. Letter spacing basically refers to the space between each letter in a word. Using the body text from this site, the examples below show the way the font can change, using letter spacing ranging from -3 pixels up to +3 pixels.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Line height
Line height is a good way to make body text more readable. It has a few options, in that you can define it as a specific pixel height, or you can define it as a height relative to the size of your font i.e. if your font size is 14 pixels and your line height is set to 1.5, it would make the real pixel line height 21 pixels. Using a relative line-height throughout your site can be a good way of ensuring that your text is consistently spaced. If you use an actual pixel height throughout the site, this can become an issue when using bigger fonts i.e. if you used the above example of 21 pixels as a line height, fonts that are bigger than 21 pixels in size would then end up having the space between lines reduced and in some cases, may overlap.
Below is an example of various different line heights:
Relative line height of 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Relative line height of 1.4
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Relative line height of 2
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Picking the right line height is important for accessibility and as is evident from the above, it’s the difference between making text more spaced and readable, and making it almost appear as if each line is unrelated.
Font weights
Using font weights is a great way to change emphasis between different parts of your site. I personally prefer to use lighter weights for body text and heavy weights for titles, as demonstrated on this blog. One of the main reasons behind using a lighter weight for body text, is it really highlights the difference between titles and any bold text that may be within the body in order to stand out. If the body text was simply a medium weight, the difference becomes less subtle and the emphasis can then be lost.
As per with letter spacing, font weights can completely change the look of a font to the point that it can appear as if it’s a completely different family.
Things to avoid
There are two pet peeves of mine when it comes to font styling. The first is excessive use of colours. When picking a theme for a site, I tend to try and not have too many base colours (5 or 6 at most tends to be appropriate) but in particular, I look to stick to the same colour of body text throughout. Sometimes a secondary colour is perfectly appropriate (such as for links, or emphasis), although I prefer to use the method described above using font weights to differentiate.
However, using multiple colours for body text looks so unprofessional and nostalgic for all the wrong reasons. There’s nothing worse than seeing a nicely designed site that has been ruined by lines of text that are coloured in different ways. See. It’s difficult to read and it doesn’t add emphasis to the text. Please don’t do it.
The other thing to avoid has already been touched on. Comic Sans is a horrible font that should not be used in any professional environment. Just stay well clear of it, as it’s not going to help you in any way.
Font Resources
In terms of places to look to find fonts to use on your site, my main preference is Google Web Fonts. It offers a great variety of fonts as well as an in-browser preview of how the font will look on your site. The fonts are also loaded via a Content Delivery Network, so theoretically it should download faster regardless of location.
If you have desktop fonts that aren’t on Google, some alternatives are:
https://typekit.com
http://www.fontsquirrel.com (allows you to upload desktop fonts to be converted into a web font)
http://www.dafont.com
and for icons in a font format
http://fortawesome.github.io/Font-Awesome/
https://icomoon.io
