Choosing the right fonts for your website
Choosing
the right fonts to represent your business is a key part of your
branding, both online and offline. For leaflets, business cards, posters
or any other offline material, it's easy — pick a font, print it and
you are done. Online, things can be more complex, and it is worth
ensuring your fonts will work online before you finalise your font
choices.
It is also important to choose fonts that match the feel
of your business — are you aiming to portray a fresh and modern persona,
a well established and formal look or something else? Picking the right
fonts is a large part of how your business is perceived by others.
Most
websites use two to three fonts — one for body (i.e. normal paragraph
text), one for headings, and one for the logo. Sometimes the headings
and logo are the same, and sometimes the headings and body are the same.
It works best if these fonts are picked to work together, and are used
on all documents produced by the business — the website, any other
advertising including posters and leaflets, business cards and any
formal documentation or letters that are written. The body text is
usually a clear easy to read relatively boring font, whereas headers and
logos can be more fancy. Often very fancy fonts are matched with
simpler ones in order to keep things easy to read.
Choosing cross platform fonts
There
are only a small number of fonts that are available on Windows, Apple's
OS X, iOS (running on iPhones, iPads and iPods), Android and Linux.
Microsoft released a core set of web fonts between 1996 and 2002 which
can be assumed to be on any system. If they aren't, there are usually
some very similar fonts to be used instead — many Linux installations
don't include these, but do include similar open source clones. These
core web fonts are:
| Font name | A sample using fonts on your computer/device |
| Andale Mono | “The quick & brown fox jumped over the lazy dog!” |
| Arial | “The quick & brown fox jumped over the lazy dog!” |
| Arial Black | “The quick & brown fox jumped over the lazy dog!” |
| Comic Sans MS | “The quick & brown fox jumped over the lazy dog” |
| Courier New | “The quick & brown fox jumped over the lazy dog!” |
| Georgia | “The quick & brown fox jumped over the lazy dog!” |
| Impact | “The quick & brown fox jumped over the lazy dog!” |
| Times New Roman | “The quick & brown fox jumped over the lazy dog” |
| Trebuchet MS | “The quick & brown fox jumped over the lazy dog!” |
| Verdana | “The quick & brown fox jumped over the lazy dog!” |
| Webdings | “The quick & brown fox jumped over the lazy dog!” |
You'll likely notice a few things straight away — of these fonts, the monospaced ones (
Andale Mono and
Courier New) aren't really appropriate for logos or body text.
Comic Sans MS is very pixelly at small sizes, and is very over used (see the Ban Comic Sans
web site!). Webdings is designed to provide symbols for signs and
things, so isn't that useful either. Impact looks really horrible at
small sizes, leaving us with only 6 versatile fonts that we can rely on.
These are the two serif fonts,
Georgia and
Times New Roman, and the four sans-serif fonts,
Arial,
Arial Black,
Trebuchet MS and
Verdana.
In 2007, Microsoft released their "C" fonts —
Calibri,
Cambria,
Candara,
Consolas,
Constantia,
Corbel.
Though these are quite common on Windows computers (they shipped with
Windows Vista and Windows 7, and are included in Windows 8), elsewhere
they are unusual. They aren't included on iOS or Android, are only on
Macs that have bought Microsoft Office 2011 and are only on Linux
machines where the user has copied them from a Windows installation.
Hence we can't really use those fonts either.
Coming from the other side, many well known fonts that are installed on Macs and iOS are very rarely available on Windows:
Helvetica,
Futura,
Gill Sans,
Optima,
Baskerville and many others are on a negligible number of Windows machines.
This
means that if you have picked any font other than the six above,
without using the techniques below, your website won't look the same on
different operating systems.
Fallback fonts
For areas of
the website where it isn't critical that the font is the same across
different computers (most body text falls into this category), fallback
fonts can be used. For instance,
Helvetica and
Arial are very similar, so the site can be built so that if the user doesn't have
Helvetica the text is drawn using
Arial instead.
Calibri could be used, with a fallback to
Trebuchet MS.
This works well, but can cause problems as each typeface isn't exactly
the same size — the letters can be higher as well as wider, so text
might not flow in the same way. For longer sections of text this can
mean the text takes up a significantly different area. This does let us
use fonts such as
Adobe Garamond Pro
that are expensive and only come bundled with high end software if the
user has them, while dropping down to more common fonts for users
without.
This is usually referred to as a font stack. The web
designer simply provides a list of fonts with their preferences first.
This font stack can contain as many fonts are as required, so it is
possible to use a fallback for a fallback for a fallback if needed!
For
headers and logos, this often isn't ideal as most businesses don't
expect that their logo will look different across different computers,
which leads us onto the two ways to get unusual fonts to work online…
Ensuring Consistency - Option 1: Using images of text
The
traditional way to do this is to simply make an image of the text.
Although this is quick and easy, and guarantees it looks the same
everywhere, there are a number of problems with this method, making it
only really appropriate for logos. In no particular order, the problems
with using images of text are:
- The text can't easily be
changed afterwards, and is hence unsuitable for text that can be edited,
for instance titles of blog posts or product names on a database driven
site.
- When the user zooms in, the image will look pixelly and
grainy - this isn't good for touch screen devices where people
frequently zoom in, or for people with poor vision who may zoom in to
help them read the text.
- The image can have a much larger file
size than the font - particularly if the text is big. This causes the
website to load more slowly.
- People can't select the text,
meaning they can't easily look words up in a dictionary (double tap with
three fingers on most Macs), or easily quote your text on Facebook or
Twitter. Some users also highlight text to help them keep their place
while reading longer sections. Safari also offers a "Reader" feature
that extracts the text and lays it out in an easy to read fashion -
features like this can only work on real text.
- Google and other
search engines can't read this text, meaning that any thing it says
won't be indexed and searchable. This is very bad for SEO. There are a
variety of techniques to try to get Google to index this text, but they
all involve typing the text, hence making the user download it twice -
once as an image and once as text!
Ensuring Consistency - Option 2: Embedding fonts
Thankfully,
within the last few years every browser now supports a technology known
as @font-face. This allows us to embed fonts into the webpage, allowing
us to use a much wider range. The downside is that when a font is
embedded any user can download the font and use it. This means that only
fonts that have an open license can be embedded. Fortunately, there are
many font foundries producing free fonts that are often of very high
quality. Picking a font that allows embedding is very sensible as we can
then guarantee that it will look the same on all computers, making sure
your online text matches your offline text. Because less people are
using these fonts (though that is starting to change!) it also means
your business will be able to have a unique look, which can often add a
subtle professional feel to your design.
Google have helpfully provided a website that catalogues many of the best fonts that can be used in this way. It can be found at Google's webfont directory,
and is definitely worth looking through before settling on a logo
design. There are over 500 fonts available here, and the number is
increasing all the time. We would recommend that you use a font from
this website where ever possible to guarantee things can look the same
across all of your marketing.
A
selection of different ways to style the same text — all have a very
different feel. The fonts come from Google's font directory, and have
been embedded in this page. Click on the text and type to change it.
Embedding
fonts allows you to get the best of both worlds - consistency across
different platforms, whilst also using interesting and defining fonts.
We have used font embedding in almost every website we have designed -
here are some interesting examples where we feel that the design would
not have worked without using this technology.
Case studies
Alison Philps
For
Alison's site, we wanted to create a welcoming, feminine classy
feeling, reminiscent of the design of glossy wedding magazines. To do
this, we picked a very readable, yet distinct font for the body -
Droid Sans,
produced by Google for their Android range of phones. This font was
designed to be read on screen, and is hence heavily optimised for this
use case. It is modern and clean without being distracting.
For the headings and the logo at the top we picked
Prata, an interesting serif font. Rather than opting for either
Times New Roman (too reminiscent of writing essays at college!) or
Georgia,
Prata provides a clear identity, particularly with it's calligraphic ampersand (
&).
It's lowercase letters are nice and high, giving the rounded letters
lots of open space which makes it clear and easy to read.
Waterside Network Group
The Waterside Network Group use the
Screengem
font in their existing leaflets - it's a fun and quirky font that we
wanted to incorporate into the design. We used it for the text on the
sliders, as well as their phone number and the speech bubble from the
bee. We paired this with
Ubuntu a
font designed for all the menus and dialog boxes for the popular Linux
distribution with the same name. This font was commissioned to provide
Ubuntu with a modern, clean and easy to read interface, so it seems clear that it would work for the body text on a website.
Hi-Q Building Services
When
we designed the website for Hi-Q Building Services we wanted to ensure
that the keywords describing what they do were very clear. The text in
the top left is real text, styled using
Crimson Text. This means that those keywords are readable by search engines, as well as giving visitors a quick idea of what they do.
For
this website, their logo on the right is also using real text, again,
helping to ensure the words "Building Services" and "Plumbing &
Heating Specialists" are both in the first few phrases on the page.
Summary
Without
embedding fonts, there are only six fonts that you can guarantee will
be available. While you can provide fallback fonts so that things can
look as good as possible, this often isn't an ideal solution. Choosing a
font that allows embedding in websites (often referred to as
@font-face) before getting anything printed is a great idea to ensure
consistency.
At Focal Strategy, we always think carefully about
which fonts to use, whilst ensuring that the site loads quickly and has
its content available to search engines.
Do you have an example
of a site that has particularly good font usage? Perhaps you know of
other sources of fonts that can be embedded? Feel free to share in the
comments below!
(http://www.focalstrategy.com/blog/1288/Choosing-the-right-fonts-for-your-website)
