Design - The Font Factor: Using, Choosing And Designing With The Best Fonts

Why type design matters
Whenever you make or arrange a physical object in a particular way, you are 'designing' it. Whether you are deciding the length of a bracket to support a bookshelf or arranging a vase of flowers, you are practicing design. If the shelf falls down or the flowers look a mess you clearly aren't designing very well you need to refer to some established principles to help you get it right.


The same goes for the design of text.
No matter how much, or how fast, technology changes, the human eye and habits of perception do not. Over a period of 425 years, practices have been established which are intended to help the reader to receive the message off the page as quickly and directly as possible. Of course there have been changes in fashion from time to time but these are, by nature, ephemeral and do not alter the underlying principles which are concerned with legibility and readability.

One quality about type that you are likely to be aware of is the suitability of a particular typeface for a particular job. A long legal document set in a small sans serif might seem inappropriate and difficult to read. A cover design in a self-effacing classical type is unlikely to do the job required of it.

Whether or not a document is easy to read or achieves what you want, is as likely to depend as much on the layout and the use of space as on the typeface. In order to design a layout that both works efficiently and looks good, it is necessary to have some understanding of the principles of typographic design.


Why documents look different
The usual purpose of a printed publication is to tell somebody something. The reason why documents look different from one another is not only that they have to communicate different things but they have to do it in different circumstances and to audiences with differing interest and motivation. Novels, for instance are set as continuous blocks of text, not just because that's what the author wrote but because they are likely to be read at leisure and sitting in one place. The design doesn't have to do more than act as a vehicle for transferring the author's thoughts off the page to the reader. An educational book might also be read in similar circumstances to a novel, but the reader may be less well motivated. So the designer might break up the text with subheadings and diagrams to make it easier for the reader to take in.

The layout of journals and newspapers, on the other hand, allows readers to pick and choose those items that interest them. It also gives the designer and editor the opportunity to emphasize one story more than another and so influence the reader's choice.

Readers of lists or directories are likely to be highly motivated. If you are looking for a telephone number, all you want from the design is to allow you to find it quickly. You don't want to be sold anything; just given easy access to the number.

Many publications, perhaps the majority, contain information which the writer is very keen to impart but which the reader doesn't care if he has or not. In this case the designer may feel the need to resort to more sophisticated design techniques to catch the reader's attention. This will call for skill in choosing the various graphic devices available and the confidence to use them in a restrained and constructive way.

So before you choose a typeface or decide on the number of columns, think about the sort of document you are trying to produce and how it is going to be used.


Quality of Typefaces
The way in which typefaces are made has changed very rapidly. For 500 years type was cast in metal; today it is almost all produced by some form of digital output from a computer. The letter form is broken up into a raster or grid of fine dots called pixels' in the case of a "screen font", or drawn as a series of points connected by lines described in "PostScript Language" as is the case with Printer Fonts.

The quality of the drawing of the letterform will depend very much on the fineness of that grid and the number of pixels used to create the screen font, or the number of points used to describe the letter in the Printer Font.

Choice may be limited by the equipment available. Most office laser printers for instance, generate type at low resolution. Otherwise it is usually a compromise between high quality and economy. For example it would probably be uneconomic to produce at high resolution an internal document of which you needed only 50 copies. A publicity brochure to be widely distributed would not look good enough with type set at low resolution and should be output on a high resolution imagesetter.


The basic components of any typeface
A fairly coarse grid 300 dpi (dots per inch) is referred to as low resolution. In this case the original drawing will have been simplified to suit the limited number of pixels available. Most screen fonts are drawn to be satisfactory at this resolution. In a higher resolution output device, the grid is finer—up to 2540 dpi. Here the rendering will be indistinguishable from the original drawing. This is what the Printer font outlines are for and where they become important.


Type measurement

The point system
The units of type measurement used in the UK and USA are the point' and the 'pica'. (In continental Europe the corresponding units are the 'Didot point' and the 'cicero'. The Didot point is very slightly larger than the British American point but the principles of their application are exactly the same.) There are 12 points to a pica. This measures approximately 1 sixth of an inch. On digital systems this has been made exactly a sixth of an inch.

It is possible to specify a typographical layout in either points, millimeters or inches but if you plan to transfer any of the production to a professional printer or typesetter, then there will be less likelihood of confusion if everyone is using the same system of measurement from the beginning. For this reason it is better to start by working in points and picas.

Typefaces are normally specified in points; columns and margins are usually given in picas and points. So a column 174 points wide would be specified as 14 pica 6 points.


How type is measured
When type is cast in metal, the printing surface the 'face' is mounted on a block of metal called the 'body'. The type size measured in points refers to this metal body rather than the face itself. The proportion of the face on the body can vary considerably from one typeface to another.

This principle still applies. For example a 10 point type is one that measures 10 points from baseline to baseline when set solid (i.e. without any extra space being added between the lines). So it is possible for one 10 point type to look smaller than another but they will both take up the same depth from line to line.

Leading or line-feed is the space inserted between the lines of type. This is derived from the use of cast lines of lead inserted between lines of type to add space.


Telling typefaces apart
There are over 90,000 typefaces at philsfonts.com alone, one of our favorite suppliers of typography. Given the fact that there are over 10 major type foundries today, this is potentially hundreds of thousands of typefaces to choose from and use. That's a lot of choices.

Of course there is some overlap from foundry to foundry and this does cause some confusion. For example: Stempel-Haas created "Helvetica" which Compugraphic then copied and called "Megaron", it is essentially the same type face with a few minor variations. I happen to think copied for the worse. Using the original and paying the licensing fee is a sure way to get the quality you should be getting, rather than using a cheap copy. Costs are so similar these days that you may as well get the original face. Note that Adobe Systems always name the originator of the typeface first when applicable, i.e. ITC Garamond Light. When you get more familiar with the basic typefaces you will be able to spot these "rip-offs" more easily.

Most typefaces are named after their originator. Caslon, Garamond, Zapf for example. This is one way of knowing you've purchased the real thing.

These very wide type choices can seem rather daunting, particularly if you depend entirely on your own subjective taste. But there are some practical considerations which can help you in choosing a typeface for a particular job.

Always look for five characteristics in a typeface:
1. Whether or not it has serifs.
2. The shape of the serifs, if any.
3. The difference in the change from thick to thin in the strokes of the letters.
4. The direction of the thick part of the letter from oblique to vertical known as the 'stress'.
5. The average width of the characters called the 'set'. You can see this most readily by comparing the lengths of complete alphabets of the same point size.


Categories of Type
These divisions are very broad. Many typefaces, particularly of recent design, have characteristics which belong in more than one group.

Old face types usually have lightly bracketed serifs, with a moderate change from thick to thin strokes in the letter and an oblique stress in the direction of the thick strokes. The italic form is usually slightly decorative. The letters tend to be light in weight, although the type family usually includes a bold version.

Transitional types have serifs that are more clearly bracketed and have a more marked, but not abrupt, change from thick to thin strokes. There is a less obviously oblique direction in the heavy part of the letter.

Modern faces have fine, unbracketed (hairline) serifs with a strong contrast between thick and thin strokes. There is a strong vertical stress in the direction of the heavy parts of the letters.

Slab serifs have, as their name implies, noticeably heavy, rectangular serifs. The design of the rest of the letter can vary but there is usually little difference between the thick and thin parts of the letters.

Sans serifs are all types without the terminal strokes (serifs) at the ends of the stem, arms and tails of the letters. Decorative and Display are intended to be used for only a few words at a time. They are not suitable for continuous text.

Decorative and display faces are faces drawn with a particular style in mind where legibility may be sacrificed for the decorative needs of the face.

Letraset is a good example of a robust library of decorative type faces. Generally not used for text purposes, these are suitable for headlines where a strong voice or personality is required.

Script and Brush letters have an informality which is useful in publicity and display work but makes them unsuited for long text passages.

Ultramoderns are hard to classify but include typefaces drawn since the advent of the computer in graphic design. Several defy conventional rules about construction and readability. Some are already modern classics, such as those drawn by Neville Brody and Zuzana Licko.


What to choose and why
There is a difference between 'legibility" and "readability". A typeface such as Helvetica is indeed highly legible. Highway signage is designed for maximum legibility, but that's not the same as "readability". A long document made up of highway signage type would be pretty awful to try to read for any length of time.

For readability, many people feel that serifed types are more comfortable to read over a long, continuous text.

Sans serifs look clean and businesslike. They normally have a very wide range of weights, which makes them particularly useful in publicity and display. Sans serifs reproduce well on a smooth, matte paper that does not reflect the light.

Light weight alphabets with fairly short serifs and little difference between thick and thin strokes tend to look their best at high resolution, printed on a matte or rough paper.

Types with more robust serifs and a clearer difference between thick and thin strokes stand up better to low resolution and reproduce well on a wider range of papers.

Types with very fine serifs and a strong vertical stress look better if produced at higher resolutions. The sharp contrast between thick and thin strokes is best maintained on a smooth paper surface.

If the column width is narrow; then avoid typefaces with a very wide set. But remember that types with a very narrow set (condensed) can be tiring to read over a long text.


Type families
Both serif and sans serif typefaces are available in two basic styles referred to as roman and italic. Roman is usually the starting point when designing with type, as it is the standard for most typeset text. Italic typefaces are derived from several sources: from the exquisitely written scripts of the renaissance called Chancery to the computer modified typefaces created by "slanting" or "obliquing" the roman letterforms. As we know, Italics are usually used for emphasis.

Many typefaces are available in families of weights and other variations from condensed to extended. The advantage of working within one family is that you can be sure that the types will combine well and that the contrast between one weight and another will be sufficient for the reader to notice the difference. It is rarely necessary to use more than two or three weights in one document, but in any case be sure to use them consistently.


Type and the Computer
As most graphic work is prepared digitally on computers these days this lecture primarily concerns itself with these systems.

Computers today, both MAC and PC, have moved up to the level of genuine typesetting systems with quite a few options and advantages never available before in the history of our industry.

Type handling for page makeup software, drawing programs, even image manipulation programs has come a long way since the dawn of this computer. But there are still some basic issues to be aware of when using and managing type on the computer.


There are two parts to the typeface that need to be present in the system in order for it to work. This is the area where the most confusion reigns and attention must be paid. Each font is represented by a Screen font and a Printer Font.

The Screen Font
This is usually a 'bit -mapped' version of the typeface that is stored inside a document called a 'suitcase'. Usually there are several sizes and weights representing the entire family. These are used to render the font on your screen. There are also several 'resources' present in this file that are very important. They are necessary for the computer in order to recognize the typeface, know where it lives and what its name is.

The Printer Font
This file is where the outlines of the actual font reside. These are used by the output device or printer to actually render the font on your final output material: paper, film, laser writer. These are object-oriented drawings described in a cross-platform computer language called 'PostScript'. These are identical in nature to the kinds of drawing objects found in Aldus Freehand, or Illustrator and are editable in certain programs.


Fonts for the Web
This portion is used with permission from Mario Sanchez

Web-Safe Fonts for Your Site
Choosing the right typeface for your website copy is important, since it will affect the way your readers perceive your page (serious and formal, or friendly and casual). Aside from this, there are also important usability concerns. For example, some font types are more easily readable than others, and some are more widely available.

You want to choose font types that:
1. fit the character of your site,
2. are easy to read on a computer screen, and
3. are widely available across many browsers and operating systems.

There are basically two types of fonts: serif and sans serif.
Serif fonts are those that have fine cross-lines at the extremities of the letter. Sans serif ("sans" being the French word for "without") are fonts that don't have serifs. The most common serif font is probably Times New Roman. Arial is an example of a common sans serif font.

Let's go briefly through the most popular font types and evaluate their availability, readibility and character:


Arial:
Availability: Thoroughly available. It is probably the most common sans serif font. It is the default font for Windows, and it first shipped as a standard font with Windows 3.1.
Readability On Screen: Not the worse but definetely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters too small.
Character: Has a streamlined, modern look but is also plain and boring.
For Mac users, the equivalent of Arial is Helvetica.

Times New Roman: :
Availability: Thoroughly available. It is probably the most common serif font. It is the default font for web browsers. It was first shipped as a standard font with Windows 3.1
Readability On Screen: Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes.
Character: Serious, formal and old fashioned.
For Mac users, the equivalent of Times New Roman is Times.


Verdana:
Availability: A widely available sans serif font, Verdana was first shipped with Internet Explorer version 3, when the exponential growth of the Internet demanded a new font that was easy to read on the screen. Readability On Screen: Exceptional. It's wide body makes it the clearest font for on-screen reading, even at small sizes.
Character: Modern, friendly and professional.


Georgia:
Avaliability: Good. It is a serif font introduced by Microsoft with Internet Explorer version 4, when the need for a serif font which much better readability than Times New Roman became evident. Readibility On Screen: Very good. It is the best serif font for on-line reading, since it was specifically designed for that purpose.
Character: Modern, friendly and professional.

Microsoft has also popularized two more fonts: Comic Sans Serif and Trebuchet.

Comic Sans Serif was launched with Internet Explorer version 3 and mimics the hand writing used in comics. It is easy to read and is informal and friendly, but it is not considered appropriate for more serious, professional sites.

Trebuchet is another sans serif font, similar to Arial but with more character, although it can be difficult to read in small sizes.

Finally, we can mention Courier New, a serif font that was widely popular with old, mechanical typewriters, and that is now used only to present simulated computer code (if you need to present snipets of sample HTML code in your web pages, this is the font to use.

Therefore, from a usability perspective, the clear winner is Verdana. If you are inclined to use a serif font, Georgia is the best option. Arial remains a good option for specific parts of text, like headlines and titles, where a different font must be used and you can use larger sizes.

The way you specify your desired font in HTML is by using the attribute. The best practice is to specify several fonts instead of just one, putting the easiest to read first.

For example, if you want to use serif fonts, your HTML code will look like this: . That way, your visitor's browser will try to load Georgia first, but if it doesn't have it installed it will try the next one on the list, in this case Times New Roman; if it doesn't have it either, which is highly unlikely, the browser will choose the third option, which we have specified as any other serif font.

For sans serif fonts, the code will look like this: