A brief guide to web typography

With over 650,000 different fonts at your disposal, picking the perfect typeface for your website may seem overwhelming.

However, it can be narrowed down so that the concept is more bitesize. This can be done by learning the basics and understanding a bit more about appropriate typeface usage.

The basics

Your typefaces and font selection may represent your brand more than the words alone, so it is important to be sure about picking the right typeface and fonts.

It may be worth considering your company brand before going off and choosing typefaces and fonts for your website. For example, using a font that is sharp and corporate looking may not represent your new online flower shop. Connect Insolvency is a great example of appropriate and correct font usage. Their website is easily communicated with a legible body text font as well as larger headings that use a narrow and condensed font that ties in with their brand seamlessly.

Font variations

Connect Insolvency’s website contains two main different typefaces but as well as this contains font variations. Usually, when downloading, buying or selecting your typeface, you will be provided with the type family. You may need to download these separately, but they usually include different weights, heights and styles that all tie into the type family package. This is important because it allows you to create tone within a design. For example, body text will most likely differ to headings and button text.

The difference between a typeface and a font

A typeface is a collection of similar and related fonts. A font refers to a specific variation of that typeface, for example, Arial is the typeface / type family and Arial Bold is the font. This is important because looking for fonts may result in only finding a single variation of that font, whereas selecting a typeface can give you a lot more variation and differentiation.

Selecting typefaces

Your brief, brand or project scope should help you narrow your search, however, there’s no rules that determine the correct typefaces and fonts for any website.

There are some common typefaces that many web deisngers use, such as Proxima Nova, Museo, Futura & Montserrat. These are popular because not only are they modern and beautiful, they can also work on any device which makes them more accessible and therefore more desirable.

There’s nothing wrong with selecting something that is widely used as long as it fits into the brand. The typefaces above are diverse so therefore can be used to fit in with a lot of different genres.

Bespoke & unique type families

A lot of studios and type foundries will lease their fonts to you for a flat fee or a monthly rate. This can be expensive but also beneficial if you really want your brand to feel more your own. Although this can be time consuming and more complicated than downloading your typeface from Google Fonts or Typekit.

More places to find typefaces and fonts

Google Fonts and Adobe Typekit are great tools for sourcing typefaces and fonts. The fonts are all free (although Typekit is included in your Adobe subscription purchase). For example, Leighs Nurseries uses a font for the body text that is on both Adobe Typekit and Google fonts- Raleway Medium. This is effective because it is legible, variable and doesn’t look too corporate.

How many typefaces does my website need?

No more than three typefaces should be used within a website. Using any more than this will risk the website lacking balance and structure, as well as it potentially clashing with your brand. Choosing the right typefaces and sticking to three will ensure your brand will be carried through the website in a coherent and balanced manner.

Using your fonts for hierarchy

The typefaces you have selected should be divided into importance so that they can be used to create hierarchy and tone. There should be a primary typeface, this is the typeface that will be most visible throughout your website. For example, your headers will be in this font. It may not even be the most commonly used typeface, but it certainly should be the most dominant, used to communicate your brand.

Your secondary typeface should cover the body text. This would mean the bulk should use this typeface, for example, the body text. Using a decorative or highly ornate typeface for a secondary typeface may not be a good idea as the purpose of the secondary typeface is to be legible and easy to read.

You may also have a tertiary typeface that could be used for call-to-actions or as an accent around the website. Although this isn’t always necessary or used, it can be useful when bringing more tone and character into the website.

Different weights and styles within your type family

You may have a variation of typefaces working together amongst your website, but as well as this, you can make full use of the font variations within that type family. These can be used to create tone and style. Using different weighted fonts can make text elements stand out and create hierarchy. For example, within a block of text, using a semi-bold or bold version of the font to separate blocks of text and highlight important information within body text.

Are your fonts web safe?

Now you’ve selected your typefaces and fonts, you need to be sure that it is web safe. This means that they are ‘supported by the majority of web browsers and operating systems’. Web safe fonts will ensure that your font won’t interfere with the responsiveness of your website, nor with its accessibility.

How to use your typefaces and fonts

Your typefaces are now free to use throughout your website. However, there are a few factors that need to be considered. Scale, font size and styling are a few things to consider when using your fonts and designing with your fonts.

Size and scale

Body text – Body text is going to be taking up a lot of your websites content so it is important that it is the correct size. This should be anywhere from 14px-16px. This will make the text easy to read and nicer on the eye.

Headings – Headings are more variable as some headings, such as Connect Insolvency uses large headings to convey importance and also establish style.

Line spacing and tracking

Using line spacing and tracking may make your body text more digestible because you are altering the amount of whitespace used.

Line spacing – Using more line space allows the text to breathe and can make the text more legible and therefore users be more likely to carry on reading.

Tracking and kerning- Adding spacing between the letters is also an effective way to ensure your body text is more pleasant on the eye. Kerning is the space between two characters mainly used for logo design and headings as it is a more precise way of altering how the font sits alongside each other. Tracking is a more standardised way of increasing the space between characters and is more likely to be used for body text.

The difference between web and print typography

Although the differences seem glaringly obvious in a lot of ways, print design is very static whereas web design has a range of access points that all require different considerations. Type will need to be legible on all screen sizes as well as look good on all screen sizes. Reading on a screen is a lot more challenging so web designers need to focus on ensuring the text is pleasant and easy to read.

To conclude

Picking your typefaces for your website can be a challenge in itself with a lot of factors to take into consideration. When using this information to your advantage, the result will be well thought out typography throughout your website. This will help when creating balance and reinforcing your brand as well as creating a legible and readable website that users will invest time into.