MENU

Share this article:

When we design a website or make a start on any web project an essential consideration for us as designers is typography. It is vital that we build from this foundation as ultimately a user is visiting your site to digest information through your content and having strong, well considered typography is a first step in allowing this to be achieved efficiently.

 

Typeface / Font

Before we dive into the world of web fonts let’s clear up some terminology. When discussing typography you may hear a designer mention or talk you through a typeface or particular font but what do we mean by these two terms? Are they the same thing? A typeface refers to a set of characters of the same design, these include letters, numbers, punctuation marks and symbols. Common typefaces include Helvetica, Times and Arial.

When discussing a font we are going the next level deep and specifying particular characteristics of a typeface for example Helvetica with a point size of 12 and set to bold. So although very similar we do use them in different contexts and just to throw in some further confusion during this article although we use the term web font we are in fact referring to the term typeface.

 

Desktop / Webfont Comparison

When embarking on a web project, a designer may request, should you already have one under your brand, that you provide the files of the typeface. A common confusion is that many think they have the right files however these will be what is known as the desktop version. So what is the difference? The desktop version is designed to be installed locally on your computer for use with applications such as Microsoft Office or the Adobe suite.

In comparison a web font is a version of the typeface specifically tuned for use on a website, they allow us as designers to use a typeface that is not installed on every user’s system, as it is an impossible task to rely on every user having the required font on their device. Instead these fonts come from a specified source which are, through a CSS rule, downloaded by your chosen browser and displayed as the web page loads.

 

What is a Webfont?

Web-Safe Typography and its History

For many years designers had to stick to what we call web-safe fonts which made designing for a brand very limiting. When we use the term ‘web-safe’ we are referring to fonts that ultimately every user would have on their system, common examples include Helvetica, Times New Roman, Arial and Georgia therefore as a web designer it was best practice to stick to these.

 

The Technical Bit

As developments have been made though we are now able to make use of web fonts using the CSS rule @font-face within our stylesheet allowing us to determine the typeface name, location and weight, and with 94% of today’s internet users viewing a website using a browser that supports this rule, @font-face allows us to render any remote font file meaning our creative options for a typeface have increased!

And with Google all the way back in 2010 releasing a free collaborative open source font library that continues to be updated, they removed many of the hurdles such as licensing and hosting allowing the implementation to run a lot more smooth and simple.

However we must remember and not completely drop our trusty web-safe fonts as they still play an important part today. We are able to add a font stack to our stylesheet also which renders a fall back font should a users system fail to download the specified web font or the web font has certain characters missing from its collection.

 

Rounding Up and The Benefits

Making use of a web font enables us to create designs better reflective of your brand, they allow us to style the text in many unique ways outside of the standard options and although your exact typeface may not be available as a web font, the creation of open source font libraries have meant that more and more choices continue to be created and shared that house many similar characteristics to popular and well known typefaces therefore you can rest easy knowing there are enough options out there that will fit with the style or design of your brand and or message.

Share this article:

Our Work

rodericks-project-bg

Rodericks Dental

aden-and-anais-background

aden + anais

bsb-stack-1

British School of Brussels

pal-mockup

Pal International

hermes-brochure

Hermes

images of a simmer kitchen mockup

Simmer Kitchens

hb-architects-mac-screen

HB Architects

a-d-themis-desktop

A D Themis & Partners

unps-home

UnPS

X