The Importance of Typefaces and Fonts in Website Design

When speaking about website lettering there is an important distinction to be made between font and typeface. Font is a common term which refers to the overall styling of text including the size, the weight (light, bold, normal) and the typeface itself. Whereas the typeface refers specifically design of lettering. These terms have got more confused with the advent of desktop publishing and are often used interchangeably by everyone but graphic and type designers.

In Website Design

The most important aspect to consider when choosing a typeface for a website is readability. There are many typefaces out there which may convey a style or imagery which fits in with your company branding but when displayed on a website cannot be easily read by all users. This ‘all users’ term is important because a good website should meet certain accessibility standards. Therefore, as much as possible, a designer should take into account the different eyesight capabilities of the website users.

Once the readability issue is addressed we can start thinking about the creative aspects of typography. Typefaces can be integral in reflecting your brand imagery and promoting the website to the right clientele.

Typefaces can be divided into 2 main categories – serif and sans serif. Serif refers to typefaces that have the extra curls and decorations that are common in calligraphy. These fonts convey a more ‘classical’ message and might be suitable for more traditional businesses perhaps with an older client base; solicitors or a high-end estate agents for instance.

Times New Roman is a serif typeface that will be familiar to most users and was the original font for the majority of websites in the early days of the internet. However, it has now been superseded by more contemporary looking typefaces and there are now thousands to choose from.

Personally I tend to favour sans serif typeface in my website designs. I feel that these fonts give an impression of style and modernity. As a rule of thumb it is generally not advisable to use more than 2 typefaces on a webpage. This is because it distracts the viewer and detracts from the information that is being displayed. Commonly one typeface is used as for the headers and the other for the main body of text.

The typefaces used on a website must be able to be displayed by a web browser. This might sound like an obvious statement but has an important influence and places restrictions on the fonts and typefaces that can be used on a website.

Firstly, typefaces must be web friendly and originally this restricted the choice of typefaces to just a few basic options such as Arial, Times New Roman, Tahoma etc. However the advent of Google Fonts has facilitated over 600 open source typefaces that can now be called upon via a piece of code within the website.

It is also possible to embed fonts onto a website that have been stored on a web server using the @Font-Face rule

For me the process of choosing a font usually involves visually testing a few ideas before settling on the right combination. This can be done in the draft stage on Photoshop or on a working prototype

There are various browsers available for internet use that also work differently on different operating systems. Each browser tends to display typefaces and render font size and weights slightly differently. Therefore it is important to test out fonts on as many browsers as possible before launching a site.

Once the typeface is chosen the next consideration is the size and weight of the fonts. This will be graded to reflect the different headers (usually up to 5 standards, h1-h5) and text that needs to be highlighted but is not a header.

Again these sizes can be rendered differently on different browsers and screen sizes so it is important to test the website across all device types (mobile, tablet, laptop etc.), operating systems (Mac OS, Windows) and browsers (Chrome, Firefox, safari etc)

As you can see there are a lot of considerations when choosing the typeface and font. But a well researched font can be the difference between a user exiting your site at the homepage or bookmarking it for future use and placing an order.