Advice
By Media
By Stage

Introduction to Fonts and Typefaces

Comments (0)

This advice document provides an introductory guide to fonts. It shows you where you can find legitimate free fonts and defines some of the terminology used in typography. It is aimed at readers with little or no prior typographic knowledge who are interested in using fonts other than those supplied with their computer. It also looks at the recent developments in the use of non-standard fonts on the web.

Introduction
Type terminology
Why would I want any more fonts?
Where should I look for font software?
Where can I find free fonts?
Font formats
Fonts on the web
Conclusion

Introduction

It's easy to take the written word for granted. When we read, we don't usually notice the individual letters - and we're even less likely to look at the particular shapes that make up those letters. And for most written communication that's how it should be - what you're reading (the message) is more important than the form it takes.

However, that's not to say the form is not important - as we will see it can be crucial in getting the right message across - but it should not get in the way of the message. Getting the form right often boils down to the choice of typeface - it can of course be handwriting too, but we will not be looking at hand written text here.

A typeface is a collection of letters, numbers, symbols and punctuation marks with its own distinct design. Typeface designers spend many years perfecting their designs in order to create type that is not only visually distinctive but will also enhance the reading experience. A well designed typeface will often go unnoticed by the reader, while a bad one will stand out like a sore thumb. Using the wrong typeface for a particular message can also be problematic.

These days digital typefaces are displayed using font software, but in the past each character in a typeface would be printed using an individual wooden or metal block. Because font software has become ubiquitous - every computer system comes pre-loaded with a number of 'default' fonts - it's easy to not fully appreciate the time and effort that goes into creating them. It's also easy to forget that there are other typefaces in addition to those made available via the default system fonts.

Type terminology

Some - but by no means all - of the typographic terms you are likely to come across.

Font/Typeface

The two terms are often confused or used interchangeably. A typeface is a collection of characters with its own distinct design - letters, numbers, symbols and punctuation marks. A font is what is used to physically create the typeface. In the past, fonts were the metal or wooden print blocks that formed each character; today fonts are classified as software. You use a font to display a typeface.

Glyph

A typeface is made up of many characters: letters, numerals, punctuation marks and other symbols. Each character is represented by one or more glyphs - e.g. the character 'G' can be represented by several glyphs: uppercase G, lowercase g, small caps and other alternate shapes. Separate glyphs exist for foreign characters, accents, ligatures and swashes.

Kerning

The horizontal space between two characters

Leading

The vertical space between each line of text

Ligature

Pairs of characters sometimes work better when they are joined together - such as fi or fl. These are known as ligatures:

OpenType

Font format developed by Adobe and Microsoft as a successor to the PostScript and TrueType formats. See Font formats below.

PostScript

PostScript is a programming language for graphics and printing developed by Adobe. There are various PostScript font formats - the main one you will come across is variously referred to as PostScript, Type 1, PostScript Type 1 or Adobe Type 1. See Font formats below.

Serif/Sans serif

Serif fonts are those which include a fine line (serif) at the ends of some characters. Examples include Times New Roman and Georgia:
H
Sans serif fonts are those without serifs. Examples include Arial and Helvetica:
H

TrueType

Font format developed by Apple as an alternative to PostScript Type 1. See Font formats below.

For more terminology see FontShop's Typeface Anatomy and Glossary.

Why would I want any more fonts?

The default fonts you have on your computer will often be all you require - it is usually only designers who seek out different fonts, but you may find situations where you want your type to help convey a different message. Using the right type for the job is not always easy, but the more fonts you have to choose from the easier it can become.

There are hundreds of thousands of different typefaces available - some are suited to paragraphs of printed text, some are better suited for reading onscreen. Others are intended for larger display such as headlines or posters, while some mimic handwriting or script styles.

If you have software applications for image editing, desktop publishing, illustration or other creative tasks, you may find they come with further pre-bundled fonts, but there may still be occasions where you need something more unique.

Be careful not to use a font just because it's your favourite or you think it looks cool - choosing the wrong typeface could affect the message:

Stencil Std Bold font used for wedding invitation
Wedding invitation set in Stencil Std Bold (font bundled with Adobe CS3)

John Boardley's I Love Typography blog includes many useful articles including one On Choosing Type.

Where should I look for font software?

There are many sites where you can buy fonts - individual type designers often have their own sites, or you can go to larger suppliers who have thousands of fonts and represent countless smaller designers and font foundries. Examples include FontShop, Monotype Imaging, Adobe Type Library, MyFonts and Veer. Before buying your first font, have a look at our Basic Guide to Font Licensing.

As mentioned, typeface design is a skilled craft that can take years to perfect so it's to be expected that font software for well designed typefaces comes at a price. The cost varies considerably - some fonts come with a basic 'character set', not much more than A-Z and 0-9, while others include hundreds of glyphs (individual characters - see our Type terminology box above) with small caps versions, alternate character shapes, ligatures and so on. See for example the character map (or glyph map) for the Affair font which has 753 glyphs.

Some typefaces are available as single fonts, while others come as type families - a family being a collection of related typefaces (i.e. different styles and weights such as regular, italic, bold). For more on these differences see the FontFeed's Styles, Weights, Widths - It’s All in the (Type) Family. Buying a family will often work out cheaper than buying all the individual fonts within that family. Conversely, if you only need one style it doesn't make sense to buy the whole family. Sometimes you may find one style within a family is free of charge (see below for more on free fonts).

Where can I find free fonts?

A search on 'free fonts' will throw up thousands of hits, but it's important to be able to distinguish between those sites that provide legitimate and reliable font software, and those that are either passing on illegal copies or providing inferior quality fonts.

Unfortunately, there are countless websites offering 'free' or extremely low cost fonts that have either been stolen or copied from legitimate designs. Using such fonts is illegal and an infringement of the designer's copyright. Additionally, the font software will often be inferior to a legitimate copy - it may not have all the characters, or otherwise not function correctly. Be aware too of sites offering low cost deals on bundles of hundreds of fonts (e.g. $20 for 10,000 fonts).

Even if a font is legitimate, it may have been created by an amateur designer and won't necessarily include a full set of characters (i.e. it may have A-Z in caps only, or no numerals, or no punctuation marks). The character spacing may not have been correctly set - this is the sort of work that can take professional designers years to perfect and is one of the reasons why proper font software is not usually free of charge.

However, if these sorts of issues aren't important (e.g. you don't need a full character set), there are plenty of genuine free fonts available. Some of the best places to look are the sites of large font foundries and commercial suppliers as they often have a supply of free fonts - these tend to be samples from larger font families (e.g. the regular typeface is free, but you don't get the bold or italic - see for example the Coolvetica family where one of the 15 styles is free of charge).

As they come from genuine foundries you can be sure that you are getting a legitimate font, though you will still need to read the End User Licence Agreement (EULA) as there may be restrictions on what you can use the font for (often you will not be able to use it for commercial purposes).

Here are some sites you could try, but please do carefully read the terms of the EULA:

Font Squirrel - free for commercial use
The League of Moveable Type - open source fonts
Open Font Library - open source fonts, mixed quality uploaded by anyone
MyFonts - tagged 'free'
Monotype Imaging Fonts.com - free fonts from a variety of foundries
Microsoft Typography - links to freeware and shareware foundries

Font formats

As with many digital files, there are a number of different formats when it comes to font software. When selecting a font to download, you will usually be given a choice of format. These days the main choice will be between TrueType (TTF) and OpenType (OTF). You will also begin to see more and more fonts offered in @font-face compatible web font formats (see Fonts on the web below). In the past, the choice would also include PostScript fonts, but these have largely been replaced by OpenType.

If OpenType is offered, this is usually the best bet as it is a cross-platform format that works on Mac and Windows. You get one file that works exactly the same on either platform, which means you can move work between platforms without worrying that the text will reflow differently. Before OpenType your choice would have been between TrueType and PostScript and you would need to specify Mac or Windows and depending on the choice you may have several different files to download and install.

The other main advantage with OpenType is it can accommodate all sorts of advanced features (ligatures, small caps, fractions, alternates, swashes, etc). These built-in features may not be accessible to older operating systems or software applications.

Fonts on the web

Most of the text you come across on the web is displayed using the standard 'core' system fonts you already have on your computer. These default fonts - such as Times New Roman, Georgia, Arial, Helvetica, Verdana and Courier - are also known as 'web safe' fonts as websites can rely on the fact that their visitors will have the same fonts on their computers. You are probably reading this page via a web browser - our website uses a stylesheet which specifies that text is displayed using one of the 'web safe' fonts Arial, but your browser options may give you the ability to read it in a font of your own choosing.

There are various ways of using other fonts on the web. Here we discuss the most common method, then take a look at recent developments that should see the use of a far greater range of typefaces on the web.

Fonts in image files

Most sites use one or more of the web safe fonts for the main body text, but you will often come across other typefaces (ones you don't have on your computer) being used on websites for logos, headings, navigation buttons and other graphic elements. Currently the most common method for displaying non-standard fonts on the web is to create an image file of your text and save it as a JPEG, GIF or PNG.

Despite being widely used, this method has a few drawbacks. Let's use a couple of examples to show what we mean by using text or an image to convey words on a webpage:

Heading in Arial font (text)
1. Text using Arial font

2. Image using Arial font (saved as a very low quality JPEG to show the extreme effects image compression can have)

The two examples above show the differences between using text or an image as a heading on a website. Although they are both set in the same font and look very similar, there are some important differences:

You can select all or individual parts of the text to copy and paste. You can copy the image, but only as an image - you can't paste it as text. Try dragging your mouse over each example - in the first one you can highlight individual letters; in the second you can only select the whole image
The text version is fully scalable so you can zoom in or out of the web page and the text will resize. Some browsers will zoom text only and scaling the page will have no effect on the image version: it will remain smaller than the rest of the text
The text remains fully editable so you can change it easily. To change the wording in the image you need to create a new image and re-upload it to the web
Text is fully accessible. Some users, including those with visual impairments, rely on screen reading software to read out web pages. If the software comes across an image heading which is not properly marked-up (using the HTML 'alt' attribute to provide an appropriate alternative textual description), the screen reader will not be able to make sense of it and the user will not know what the heading is.
Text is also more accessible to search engines. Search engines (and humans) can easily search for and find text. With images they rely on appropriate filenames, descriptive alternative text and contextual/surrounding text.
Correctly marked-up text (using appropriate HTML heading tags such as <h1>This is my main heading</h1>) will help search engines make sense of what your page is about. By establishing what's important on your page (e.g. by looking at the text placed in headings) search engines will decide how relevant your page is when a user makes a search. This is difficult if all the headings are images - the search engine will not place the same importance on images as it will on text headings and your page may not appear in search results
Stylable using CSS - if you decide all your headings are too small or should be red rather than black, you only need to make a few small changes to your CSS file. If all your headings were images it would take considerably longer
Text can be translated into other languages using auto-translation software, whereas images cannot
File-sizes are much greater for images than for text
Image quality can be an issue - note: the example above was saved as a very low quality JPEG to show the extreme effects image compression can have

We've used headings in our example, but you will find sites which place entire paragraphs or whole sections of text in graphics in order to use a specific font. This is particularly unwise, as the text will not come up in any search results as there is no text for the search engine to find. Worse still, screen reading software will make no sense of these pages at all making them inaccessible to many users.

So not only is using images in place of text time consuming, it's also less accessible to humans and search engines. We've used Arial in our example for comparison purposes, but it's unlikely anyone would bother creating an image using Arial since it's one of the web safe fonts. So what's the alternative to images if you want to use non-standard fonts in a reliable, convenient and accessible way on your website?

Although the use of images has become standard practice, there are a few other options that have been around for years - the use of Flash or JavaScript to display fonts being the main ones. We won't go into those methods here, as they are likely to be used less and less with the arrival of the most recent development: web fonts.

Also referred to as @font-face fonts, in reference to the CSS (web stylesheet) rule used to link to them, a web font is in short one which is served from the website you're visiting rather than from your own computer. Though it has been technically possible to place fonts on a web server and use them to render text in your chosen typeface for a number of years, it is only since late 2009 that a combination of new licensing arrangements, new web font formats and increased browser support has made it a viable option. As a result you will start to see more and more websites using a much broader range of fonts.

Using web fonts

If you are thinking of using web fonts on your site, there are two main ways of going about it:

License a font, upload and link to the font file on your own web server
Subscribe to a service which hosts font files for you

The first of these requires that you have the right licence to use the font. You may find some free web fonts, but will still need to check the EULA to make sure you are allowed to use them on the web. See our Basic Guide to Font Licensing for more on this.

If you already have a licence to use a particular font on your desktop computer, it does not necessarily mean you have the right to use it on the web. The terms for web usage often vary and you may find you need a separate licence.

You also need to make sure you have the right file formats. At the time of writing, there is not one single font format that is supported by all browsers. If you already have a font you use on your desktop, it's unlikely it will be in the right format for the web. When purchasing licences for web fonts, you will need a combination of formats for maximum web compatibility:

WOFF (Web Open Font Format) - supported by Firefox 3.6+ and to be supported by forthcoming versions of Internet Explorer, Opera and Google Chrome. Web-only format will not work on desktops. The WOFF format has been submitted to be a W3C standard with backing from Microsoft, Mozilla and Opera
EOT (Embedded OpenType) - supported by Internet Explorer (versions 4 - 9). Web-only format will not work on desktops
TrueType (TTF) and OpenType (OTF) - supported by Firefox 3.5+, Safari 3.1+, Google Chrome 4+. Note that where these formats are supplied for web use, they are usually disabled for desktop use

Most font suppliers will license web fonts as a package or kit that provides a combination of these formats. Once you have the font files and the licence to use them, you upload them to your web server and link to them via your CSS file/stylesheet using the @font-face rule. The foundries and font suppliers we looked at all provide guidelines on how to go about this and give sample HTML and CSS code to get you started. Once you've done it once, it's very straightforward and you will be able to easily change between fonts (see our example below).

It's still early days for web fonts and not all fonts will be available immediately in these formats. However, many suppliers and font foundries now have dedicated sections on their sites for web fonts. See for example FontShop, Fontspring and Font Squirrel.

The second way of using web fonts is by subscribing to a font-hosting service. Instead of purchasing an individual licence for each font and installing/linking to the fonts yourself, you pay an annual or monthly fee which gives you access to a range of fonts.

You don't need to worry about font formats or installing them in the right place as this is all taken care of by the font-hosting service, which gives you a line of code to add to your site. Examples of such services are Typekit and Monotype Imaging's Font.com Web Fonts (in public Beta at the time of writing). Typekit has a free trial version which lets you use two fonts on one website.

The most recent entry to the web fonts arena is Google who have launched a new service allowing anyone to use their Google Font API and Google Font Directory collection of open source fonts freely on the web.

Examples of web fonts

We downloaded the FF Nuvo Web Medium web font (which is available for free from FontShop for a limited period) to see how easy the process of using it is, and to show you how your web browser interprets the font.

After downloading the font files and reading the terms of the EULA, we uploaded the EOT and WOFF files to our server. It's then a case of adding a few lines of code to our stylesheet (all of which is provided with the download) and styling the words you want in that font. Here's the result:

Test Heading in webfont

In the heading above we have embedded the FF Nuvo Web Medium web font. Depending on which browser you are using, you will see the words 'Test Heading in webfont' rendered using either FF Nuvo Web Medium, or if your browser is unable to render the web font it will use Georgia instead - we have used Georgia as the 'fallback' web safe font.

If your browser is capable of displaying web fonts, the text in our test heading above should look like this:

FF Nuvo Web Medium correctly rendered by the browser
Image showing how FF Nuvo Web Medium font is displayed by web font supporting web browsers.

If your browser does not support WOFF or EOT, it will not be able to display the text in FF Nuvo Web Medium and will use Georgia instead (the font we have used as a fallback). It should look like this:

Georgia font replacing FF Nuvo Web Medium
Image showing how the text appears to browsers which do not support web fonts

Note that our example was available in WOFF and EOT only, other web fonts are available in a web-only TrueType format which is compatible with other browsers. The font-hosting services mentioned above take care of the format for you and usually work across a greater range of browsers. Typekit lets you preview how each font will look in various browsers/operating systems.

Conclusion

If you are thinking about using non-standard fonts on the web yourself, or even if you are just looking forward to visiting sites that have been designed using a wider typographic palette, the options described above make it not only much simpler, but more reliable and accessible.

Although you need to be aware of font licensing issues, there are plenty of sources of legitimate free fonts. The choice of font - whether you find it for free, license it, or already have it on your computer - is up to you, but do think carefully whether it's the right typeface for the job.

Ask us a question

We provide a FREE enquiry service giving advice to the UK Further and Higher Education community.

You can ask us anything, typical questions include - "What formats should I use?" "How do I...?" "What tools can achieve the result I need?" "What is new and emerging?"