Typography in Web Design: Part 2 How to choose a typeface for your website
Welcome to part 2 of our Typography in Web Design series. If you missed it, part 1 – an introduction to typefaces – was your classic origin story. We introduced all the main categories of typeface — serif, sans serif, script and display — and discussed how they came to be. We looked at the qualities they possess and how they lend themselves to different brands and businesses.
So now we know what is on offer on the typeface market. But how to choose? What typeface should play a leading role within your business’s brand story? For part 2 of our series, we thought we would curate a list of things to think about when making your decision. Beyond pure aesthetics, there are many practical pointers to take into account too. So let’s dilly-dally no more, crack on with this list and help you find the perfect typeface match for your business!
Define the Scope
The title of this blog is “how to choose a typeface for your website.” However, it should probably read “how to choose a typeface for your brand.” On very rare occasions would a website be a business’s only brand presence. More often than not, a business’s branding will feature elsewhere.
It is important that your business presents a unified image across platforms. Consistent design helps to build brand recognition, cultivate trust with clients, save time and money, removes any confusion and is visually pleasing. All beneficial things to businesses, right? Some of you may be thinking “why does that matter now? At the moment, the focus is the website, we will think about matching the other stuff later.” The thing is, consistent design requires planning.
Not all typefaces translate well from print to digital and vice versa. For example, the typeface Verdana was specifically designed for on-screen reading. Its wide spacing and generous x-height (the height between the baseline and mean line of the lowercase letters or the top of the x) lends itself to monitors. However, in print it can look oddly large and way too spaced out. Therefore, when you are choosing a typeface for your website, it is imperative that you make sure it will work across all the mediums you require.
Before even browsing a typeface catalogue, we recommend making a comprehensive list of every touchpoint where your branding will feature. Will you be investing in printed media? Do you need shop signage? Will you have branded packaging and uniform? By doing this, you set yourself up for a smooth ride. You can make an informed decision and choose a typeface that will definitely work for every situation.
Convey Brand Personality
Your choice of typeface needs to reflect your brand’s personality. What is brand personality? Well, if your brand was a person, what five words would you use to describe them? Those five words are your brand personality.
How do you convey brand personality via a typeface? Every typeface has a character of its own and it is just a case of finding one that aligns with that of your business. In part 1, we discussed how each category of typeface evokes certain feelings and ideas and is associated with different periods within history. We went on to say how these connotations lend the typefaces to different sectors and businesses. Here are some examples:
A law firm’s brand personality could be described as trustworthy, professional, strategic and highly competent. It would make sense then to use a serif typeface. Why? Serifs have been around a long time, dating as far back as Roman antiquity. Using a serif typeface is one way of letting your prospective clients know that you have been around a long time and know what you are doing. Music to the ears of someone looking for legal representation!
A luxury wedding supplier’s brand personality could be described as elegant, personable or exclusive. A script typeface works really well in this scenario. Inspired by cursive handwriting, they give that personal touch. Couples are paying a premium for these services and so they want and expect a unique result. Depending on your style of offering – from the highly elaborate and decorative to a minimalist contemporary vibe – you can find a handwriting style to match.
We suggest making a shortlist of potential typefaces. Trial and test them out! Ask friends, family and people you trust for their opinion. What feeling does each typeface evoke? Is that the same feeling you want your customers to experience? If so, you hit the jackpot!
Number of Typefaces
When designing a website, the general rule of thumb is to stick to a maximum of 3 typefaces or font families. Exceed that number and your website can start to look unprofessional and not particularly well thought out. It can also overstimulate, confuse and make it hard to focus. This image by Medium illustrates the point perfectly.
Many designers will advise opting for large font families or even superfamilies. A font family is made up of a singular typeface which is available in various line weights, widths and styles. An example is the Arial font family which includes Arial, Arial Bold, Arial Italic.
A superfamily goes a step further. Beyond variations in line weight, width and style, it also consists of various typefaces – serif, sans serif or script – which have been designed specifically to complement one another. An example is the Lucida superfamily which includes Lucida Sans, Lucida Bright and Lucida Handwriting. Opting for a font family or superfamily, is a sure fire way to maintain consistency, whilst also having room to be creative.
You might be thinking of utilising a combination of typefaces to bring different facets of your brand’s personality to life. To give you an example, the combination below would work really well for a rowing club.
Rowing became a competitive sport in England back in 1716. Its vast heritage can be alluded to with a historical serif font such as Libre Baskerville, which incidentally was designed in 1757 (41 years later).
On the other hand, the strong structure and geometric form of the League Spartan typeface suggests strength: the physical strength of the athletes and the club's strength in terms of its ranking. Being a sans serif typeface – which has ties to modernity and looking to the future – it also speaks of the sport's continued relevance.
When pairing typefaces, it is important that they complement one another. Combinations that work well, tend to be fonts with similar proportions and x-heights. It is visually pleasing to the eye, creating a sense of harmony and balance.
Combinations that work well are ones that don’t compete with one another. Think of famous pairings. From peanut butter and jelly to Morecambe and Wise, in every successful partnership each individual or component brings something different to the table, serves a purpose and complements the other. The same goes for typefaces.
One typeface should be more visually dominant than the other. Their role? To be the attention seeker! They are great for headlines and leading visitors' eyes down the page. The other typeface will be more unassuming. But don’t underestimate the quiet ones! No, these fonts have a lot of substance. They will be used for a vast proportion of the text, making it legible and communicating a message. This is essentially visual hierarchy in a nutshell. We shall be discussing it in more depth in part 4.
If you feel completely clueless on how to pair up fonts, don’t worry. There are a lot of font pairing tools out there that you can use to help you make your decision. Check out:
Web Font Standards
It is time to get technical! Web font standards are a series of guidelines and technologies that ensure that fonts are consistently and correctly displayed across different web browsers and devices. Adhering to them enhances readability and improves the overall online user experience (UX).
Web safe fonts are a set of fonts that are widely installed across most operating systems and devices. This means they are automatically recognised by most web browsers – Chrome, Firefox and Safari – as well as devices from mobile to desktop, without the need for any additional downloads.
If web safe fonts don’t quite work for your business, the next place to look is web fonts. They are not pre-installed on devices but can be downloaded fairly quickly by a browser and have proven to be fairly unproblematic on the whole. Reliable resources for web fonts are Google Fonts, Adobe Fonts and MyFonts.
If you go for a font which is neither a web safe font or web font, you run the risk of browsers not recognising it. The browser will replace that font with something else which may not be representative of your brand image. Alternatively, it may download, but take forever and an age to do so. Slow loading times are not conducive to a great user experience.
If you have your heart set on one of these fonts, you can always include a font stack in your website’s CSS code. For those who don’t know, CSS (cascading style sheets) are style guide documents included within a website’s code that dictate how elements on the web page should look.
A font stack is basically a list of backup font options that the browser can default to if your first choice fails to upload or be recognised. Even if it isn’t your exact branding, at least this way you can be rest assured that whatever does load in its stead, will pass your brand’s vibe check!
Check Languages
If you are looking to service a local market then this isn’t really an issue. However, if you are a global brand, the typeface you choose needs to include all the special characters that are required to translate your website into the relevant languages. So before you even start your search for a typeface, it is worthwhile making a list of all the languages your website needs to be available in.
The reason being is that not all typefaces support every special character found in every single language. By special character, we are referring to diacritics such as acutes, accents and umlauts. If a special character is not supported in a typeface, an unsubtle, white, vertical rectangle called “tofu” will be uploaded in its place. This looks unprofessional and can make your international audience feel like second rate customers.
If you are immovable and have your heart set on using a typeface which works in a majority of languages, but not all, there is a way around it. You could add a rule in the CSS code of your website, specifying that any unsupported languages should be loaded up in a fallback font which does support it.
Weglot is a website translation tool that has direct integration with website builders such as Squarespace, Wix and Wordpress. It not only translates websites in minutes, it also has a built-in visual editor, which “lets you preview how your text – including translations of it – will appear on your website.” That way you can check if your chosen “font can display all the text on your website with no issues.” Weglot has also written a blog on the 17 Best Multilingual Web Fonts.
Costs and Licences
Another factor to consider is cost. There are a lot of great typeface options out there that are free to use. They are ideal for businesses starting out or who are operating on a tight budget. However, you need to be choice with your selection, as there is a downside.
Free typefaces tend to have limitations. They may only be available in a regular line weight or can only be used for personal projects and not commercial ones. Technical support may be lacking. Being free, the typefaces may not be a priority and therefore not updated on the regular. On the opposite extreme, they could be tweaked or deleted on a whim! The likelihood is that there will be many others using the typeface and so your business can start to blend in with the crowd.
If budget permits, purchasing a typeface is the advisable way to go. In general, quality comes at a price. These fonts will have been perfected with better kerning, more extensive character sets and perhaps additional features such as ligatures. You are more likely to get professional support and regular updates. Plus, you get something that is more unique!
If you want to purchase a typeface, it will involve buying a licence. Why are licences involved? Typefaces are an artistic creation. Drawn by the human hand, some are the cumulation of months or even years of painstaking effort. Therefore, as with any artistic creation – if they meet certain criteria – typefaces have the right to be IP protected or copyrighted.
In order to use any copyrighted material, one must get permission from the creator, otherwise they may find themselves tangled up in a lawsuit. A licence in this scenario is a legal agreement between the typographer and customer. It grants permission to use the typeface in a specific way and also ensures that the typographer gets compensated accordingly for all their hard graft.
You may have noticed we said “use the typeface in a specific way.” A licence agreement will come with a list of terms and conditions on how you can use the typeface. It is incredibly important that you study the terms of a licence before purchase to ensure it works for you and your business needs. Licence agreements can stipulate the number of users who can use it or devices a typeface can be installed on, through to what platforms it can be used on and for how long.
Getting your head around licences and terms of agreement can be a very time-consuming and complex task. Approach it with a fresh head and maybe a brew in hand! Here is a comprehensive Font Licensing Guide from Monotype, which goes into a lot more depth to get you started.
Avoid Trends
When in the throes of a design process, it can be tempting to get swept up with the trends of the here and now. However, not all trends are here to stay. With typefaces, it is best to go with something that will stand the test of time. Going for something that is popular now but could be dated in a couple of years is costly. Rebranding is an expensive and timely process. Choose typefaces with the future in mind!
Conclusion
There you have it, some things to consider when choosing a typeface for your website. It is important to establish the scope of where you will use the typeface beyond your website. Think about your brand’s personality and nail down 1-3 typefaces that bring it to life.
Ensure the typefaces you pick are web browser friendly and available in the languages you require. Weigh up the cost and always make sure you read the fine print of the licence agreement. Finally, don’t jump on the bandwagon and choose something current if it will look dated in a few years time. Always think ahead!
We hope this list makes the prospect of choosing typefaces a little less daunting! However, if you would like help choosing a typeface for your brand, Made by Dave provides a branding service. Have a browse of our portfolio and if you like what you see, please do not hesitate to get in touch.
Otherwise, stick around for the next instalment of our blog series here. We will be talking about all things styling!
