| Why type design matters | | | | heavy, rectangular serifs. The design of the rest of the |
| Whenever you make or arrange a physical object in a | | | | letter can vary but there is usually little difference |
| particular way, you are 'designing' it. Whether you are | | | | between the thick and thin parts of the letters. |
| deciding the length of a bracket to support a bookshelf | | | | Sans serifs are all types without the terminal strokes |
| or arranging a vase of flowers, you are practicing | | | | (serifs) at the ends of the stem, arms and tails of the |
| design. If the shelf falls down or the flowers look a | | | | letters. Decorative and Display are intended to be used |
| mess you clearly aren't designing very well you need | | | | for only a few words at a time. They are not suitable |
| to refer to some established principles to help you get | | | | for continuous text. |
| it right. | | | | Decorative and display faces are faces drawn with a |
| The same goes for the design of text. | | | | particular style in mind where legibility may be |
| No matter how much, or how fast, technology | | | | sacrificed for the decorative needs of the face. |
| changes, the human eye and habits of perception do | | | | Letraset is a good example of a robust library of |
| not. Over a period of 425 years, practices have been | | | | decorative type faces. Generally not used for text |
| established which are intended to help the reader to | | | | purposes, these are suitable for headlines where a |
| receive the message off the page as quickly and | | | | strong voice or personality is required. |
| directly as possible. Of course there have been | | | | Script and Brush letters have an informality which is |
| changes in fashion from time to time but these are, by | | | | useful in publicity and display work but makes them |
| nature, ephemeral and do not alter the underlying | | | | unsuited for long text passages. |
| principles which are concerned with legibility and | | | | Ultramoderns are hard to classify but include |
| readability. | | | | typefaces drawn since the advent of the computer in |
| One quality about type that you are likely to be aware | | | | graphic design. Several defy conventional rules about |
| of is the suitability of a particular typeface for a | | | | construction and readability. Some are already modern |
| particular job. A long legal document set in a small sans | | | | classics, such as those drawn by Neville Brody and |
| serif might seem inappropriate and difficult to read. A | | | | Zuzana Licko. |
| cover design in a self-effacing classical type is unlikely | | | | What to choose and why |
| to do the job required of it. | | | | There is a difference between 'legibility" and |
| Whether or not a document is easy to read or | | | | "readability". A typeface such as Helvetica is indeed |
| achieves what you want, is as likely to depend as | | | | highly legible. Highway signage is designed for |
| much on the layout and the use of space as on the | | | | maximum legibility, but that's not the same as |
| typeface. In order to design a layout that both works | | | | "readability". A long document made up of highway |
| efficiently and looks good, it is necessary to have | | | | signage type would be pretty awful to try to read for |
| some understanding of the principles of typographic | | | | any length of time. |
| design. | | | | For readability, many people feel that serifed types are |
| Why documents look different | | | | more comfortable to read over a long, continuous text. |
| The usual purpose of a printed publication is to tell | | | | Sans serifs look clean and businesslike. They normally |
| somebody something. The reason why documents | | | | have a very wide range of weights, which makes |
| look different from one another is not only that they | | | | them particularly useful in publicity and display. Sans |
| have to communicate different things but they have to | | | | serifs reproduce well on a smooth, matte paper that |
| do it in different circumstances and to audiences with | | | | does not reflect the light. |
| differing interest and motivation. Novels, for instance | | | | Light weight alphabets with fairly short serifs and little |
| are set as continuous blocks of text, not just because | | | | difference between thick and thin strokes tend to look |
| that's what the author wrote but because they are | | | | their best at high resolution, printed on a matte or rough |
| likely to be read at leisure and sitting in one place. The | | | | paper. |
| design doesn't have to do more than act as a vehicle | | | | Types with more robust serifs and a clearer |
| for transferring the author's thoughts off the page to | | | | difference between thick and thin strokes stand up |
| the reader. An educational book might also be read in | | | | better to low resolution and reproduce well on a wider |
| similar circumstances to a novel, but the reader may | | | | range of papers. |
| be less well motivated. So the designer might break up | | | | Types with very fine serifs and a strong vertical |
| the text with subheadings and diagrams to make it | | | | stress look better if produced at higher resolutions. The |
| easier for the reader to take in. | | | | sharp contrast between thick and thin strokes is best |
| The layout of journals and newspapers, on the other | | | | maintained on a smooth paper surface. |
| hand, allows readers to pick and choose those items | | | | If the column width is narrow; then avoid typefaces |
| that interest them. It also gives the designer and editor | | | | with a very wide set. But remember that types with a |
| the opportunity to emphasize one story more than | | | | very narrow set (condensed) can be tiring to read |
| another and so influence the reader's choice. | | | | over a long text. |
| Readers of lists or directories are likely to be highly | | | | Type families |
| motivated. If you are looking for a telephone number, all | | | | Both serif and sans serif typefaces are available in |
| you want from the design is to allow you to find it | | | | two basic styles referred to as roman and italic. |
| quickly. You don't want to be sold anything; just given | | | | Roman is usually the starting point when designing with |
| easy access to the number. | | | | type, as it is the standard for most typeset text. Italic |
| Many publications, perhaps the majority, contain | | | | typefaces are derived from several sources: from the |
| information which the writer is very keen to impart but | | | | exquisitely written scripts of the renaissance called |
| which the reader doesn't care if he has or not. In this | | | | Chancery to the computer modified typefaces |
| case the designer may feel the need to resort to | | | | created by "slanting" or "obliquing" the roman |
| more sophisticated design techniques to catch the | | | | letterforms. As we know, Italics are usually used for |
| reader's attention. This will call for skill in choosing the | | | | emphasis. |
| various graphic devices available and the confidence | | | | Many typefaces are available in families of weights |
| to use them in a restrained and constructive way. | | | | and other variations from condensed to extended. The |
| So before you choose a typeface or decide on the | | | | advantage of working within one family is that you can |
| number of columns, think about the sort of document | | | | be sure that the types will combine well and that the |
| you are trying to produce and how it is going to be | | | | contrast between one weight and another will be |
| used. | | | | sufficient for the reader to notice the difference. It is |
| Quality of Typefaces | | | | rarely necessary to use more than two or three |
| The way in which typefaces are made has changed | | | | weights in one document, but in any case be sure to |
| very rapidly. For 500 years type was cast in metal; | | | | use them consistently. |
| today it is almost all produced by some form of digital | | | | Type and the Computer |
| output from a computer. The letter form is broken up | | | | As most graphic work is prepared digitally on |
| into a raster or grid of fine dots called pixels' in the | | | | computers these days this lecture primarily concerns |
| case of a "screen font", or drawn as a series of points | | | | itself with these systems. |
| connected by lines described in "PostScript Language" | | | | Computers today, both MAC and PC, have moved up |
| as is the case with Printer Fonts. | | | | to the level of genuine typesetting systems with quite |
| The quality of the drawing of the letterform will depend | | | | a few options and advantages never available before |
| very much on the fineness of that grid and the number | | | | in the history of our industry. |
| of pixels used to create the screen font, or the | | | | Type handling for page makeup software, drawing |
| number of points used to describe the letter in the | | | | programs, even image manipulation programs has |
| Printer Font. | | | | come a long way since the dawn of this computer. |
| Choice may be limited by the equipment available. | | | | But there are still some basic issues to be aware of |
| Most office laser printers for instance, generate type | | | | when using and managing type on the computer. |
| at low resolution. Otherwise it is usually a compromise | | | | There are two parts to the typeface that need to be |
| between high quality and economy. For example it | | | | present in the system in order for it to work. This is the |
| would probably be uneconomic to produce at high | | | | area where the most confusion reigns and attention |
| resolution an internal document of which you needed | | | | must be paid. Each font is represented by a Screen |
| only 50 copies. A publicity brochure to be widely | | | | font and a Printer Font. |
| distributed would not look good enough with type set | | | | The Screen Font |
| at low resolution and should be output on a high | | | | This is usually a 'bit -mapped' version of the typeface |
| resolution imagesetter. | | | | that is stored inside a document called a 'suitcase'. |
| The basic components of any typeface | | | | Usually there are several sizes and weights |
| A fairly coarse grid 300 dpi (dots per inch) is referred | | | | representing the entire family. These are used to |
| to as low resolution. In this case the original drawing will | | | | render the font on your screen. There are also several |
| have been simplified to suit the limited number of pixels | | | | 'resources' present in this file that are very important. |
| available. Most screen fonts are drawn to be | | | | They are necessary for the computer in order to |
| satisfactory at this resolution. In a higher resolution | | | | recognize the typeface, know where it lives and what |
| output device, the grid is finer--up to 2540 dpi. Here the | | | | its name is. |
| rendering will be indistinguishable from the original | | | | The Printer Font |
| drawing. This is what the Printer font outlines are for | | | | This file is where the outlines of the actual font reside. |
| and where they become important. | | | | These are used by the output device or printer to |
| Type measurement | | | | actually render the font on your final output material: |
| The point system | | | | paper, film, laser writer. These are object-oriented |
| The units of type measurement used in the UK and | | | | drawings described in a cross-platform computer |
| USA are the point' and the 'pica'. (In continental Europe | | | | language called 'PostScript'. These are identical in |
| the corresponding units are the 'Didot point' and the | | | | nature to the kinds of drawing objects found in Aldus |
| 'cicero'. The Didot point is very slightly larger than the | | | | Freehand, or Illustrator and are editable in certain |
| British American point but the principles of their | | | | programs. |
| application are exactly the same.) There are 12 points | | | | Fonts for the Web |
| to a pica. This measures approximately 1 sixth of an | | | | This portion is used with permission from Mario |
| inch. On digital systems this has been made exactly a | | | | Sanchez |
| sixth of an inch. | | | | Web-Safe Fonts for Your Site |
| It is possible to specify a typographical layout in either | | | | Choosing the right typeface for your website copy is |
| points, millimeters or inches but if you plan to transfer | | | | important, since it will affect the way your readers |
| any of the production to a professional printer or | | | | perceive your page (serious and formal, or friendly and |
| typesetter, then there will be less likelihood of confusion | | | | casual). Aside from this, there are also important |
| if everyone is using the same system of | | | | usability concerns. For example, some font types are |
| measurement from the beginning. For this reason it is | | | | more easily readable than others, and some are more |
| better to start by working in points and picas. | | | | widely available. |
| Typefaces are normally specified in points; columns | | | | You want to choose font types that: |
| and margins are usually given in picas and points. So a | | | | 1. fit the character of your site, |
| column 174 points wide would be specified as 14 pica | | | | 2. are easy to read on a computer screen, and |
| 6 points. | | | | 3. are widely available across many browsers and |
| How type is measured | | | | operating systems. |
| When type is cast in metal, the printing surface the | | | | There are basically two types of fonts: serif and sans |
| 'face' is mounted on a block of metal called the 'body'. | | | | serif. |
| The type size measured in points refers to this metal | | | | Serif fonts are those that have fine cross-lines at the |
| body rather than the face itself. The proportion of the | | | | extremities of the letter. Sans serif ("sans" being the |
| face on the body can vary considerably from one | | | | French word for "without") are fonts that don't have |
| typeface to another. | | | | serifs. The most common serif font is probably Times |
| This principle still applies. For example a 10 point type is | | | | New Roman. Arial is an example of a common sans |
| one that measures 10 points from baseline to baseline | | | | serif font. |
| when set solid (i.e. without any extra space being | | | | Let's go briefly through the most popular font types |
| added between the lines). So it is possible for one 10 | | | | and evaluate their availability, readibility and character: |
| point type to look smaller than another but they will | | | | Arial: |
| both take up the same depth from line to line. | | | | Availability: Thoroughly available. It is probably the most |
| Leading or line-feed is the space inserted between the | | | | common sans serif font. It is the default font for |
| lines of type. This is derived from the use of cast lines | | | | Windows, and it first shipped as a standard font with |
| of lead inserted between lines of type to add space. | | | | Windows 3.1. |
| Telling typefaces apart | | | | Readability On Screen: Not the worse but definetely |
| There are over 90,000 typefaces at alone, one of our | | | | not the best, especially at small sizes, when it |
| favorite suppliers of typography. Given the fact that | | | | becomes too narrow and the spacing between |
| there are over 10 major type foundries today, this is | | | | characters too small. |
| potentially hundreds of thousands of typefaces to | | | | Character: Has a streamlined, modern look but is also |
| choose from and use. That's a lot of choices. | | | | plain and boring. |
| Of course there is some overlap from foundry to | | | | For Mac users, the equivalent of Arial is Helvetica. |
| foundry and this does cause some confusion. For | | | | Times New Roman: |
| example: Stempel-Haas created "Helvetica" which | | | | Availability: Thoroughly available. It is probably the most |
| Compugraphic then copied and called "Megaron", it is | | | | common serif font. It is the default font for web |
| essentially the same type face with a few minor | | | | browsers. It was first shipped as a standard font with |
| variations. I happen to think copied for the worse. Using | | | | Windows 3.1 |
| the original and paying the licensing fee is a sure way | | | | Readability On Screen: Acceptable for font sizes of |
| to get the quality you should be getting, rather than | | | | 12pt. and up, but terrible for smaller sizes. |
| using a cheap copy. Costs are so similar these days | | | | Character: Serious, formal and old fashioned. |
| that you may as well get the original face. Note that | | | | For Mac users, the equivalent of Times New Roman is |
| Adobe Systems always name the originator of the | | | | Times. |
| typeface first when applicable, i.e. ITC Garamond Light. | | | | Verdana: |
| When you get more familiar with the basic typefaces | | | | Availability: A widely available sans serif font, Verdana |
| you will be able to spot these "rip-offs" more easily. | | | | was first shipped with Internet Explorer version 3, |
| Most typefaces are named after their originator. | | | | when the exponential growth of the Internet |
| Caslon, Garamond, Zapf for example. This is one way | | | | demanded a new font that was easy to read on the |
| of knowing you've purchased the real thing. | | | | screen. Readability On Screen: Exceptional. It's wide |
| These very wide type choices can seem rather | | | | body makes it the clearest font for on-screen reading, |
| daunting, particularly if you depend entirely on your own | | | | even at small sizes. |
| subjective taste. But there are some practical | | | | Character: Modern, friendly and professional. |
| considerations which can help you in choosing a | | | | Georgia: |
| typeface for a particular job. | | | | Avaliability: Good. It is a serif font introduced by |
| Always look for five characteristics in a typeface: | | | | Microsoft with Internet Explorer version 4, when the |
| 1. Whether or not it has serifs. | | | | need for a serif font which much better readability |
| 2. The shape of the serifs, if any. | | | | than Times New Roman became evident. Readibility |
| 3. The difference in the change from thick to thin in the | | | | On Screen: Very good. It is the best serif font for |
| strokes of the letters. | | | | on-line reading, since it was specifically designed for |
| 4. The direction of the thick part of the letter from | | | | that purpose. |
| oblique to vertical known as the 'stress'. | | | | Character: Modern, friendly and professional. |
| 5. The average width of the characters called the 'set'. | | | | Microsoft has also popularized two more fonts: Comic |
| You can see this most readily by comparing the | | | | Sans Serif and Trebuchet. |
| lengths of complete alphabets of the same point size. | | | | Comic Sans Serif was launched with Internet Explorer |
| Categories of Type | | | | version 3 and mimics the hand writing used in comics. It |
| These divisions are very broad. Many typefaces, | | | | is easy to read and is informal and friendly, but it is not |
| particularly of recent design, have characteristics which | | | | considered appropriate for more serious, professional |
| belong in more than one group. | | | | sites. |
| Old face types usually have lightly bracketed serifs, | | | | Trebuchet is another sans serif font, similar to Arial but |
| with a moderate change from thick to thin strokes in | | | | with more character, although it can be difficult to read |
| the letter and an oblique stress in the direction of the | | | | in small sizes. |
| thick strokes. The italic form is usually slightly | | | | Finally, we can mention Courier New, a serif font that |
| decorative. The letters tend to be light in weight, | | | | was widely popular with old, mechanical typewriters, |
| although the type family usually includes a bold version. | | | | and that is now used only to present simulated |
| Transitional types have serifs that are more clearly | | | | computer code (if you need to present snipets of |
| bracketed and have a more marked, but not abrupt, | | | | sample HTML code in your web pages, this is the font |
| change from thick to thin strokes. There is a less | | | | to use. |
| obviously oblique direction in the heavy part of the | | | | Therefore, from a usability perspective, the clear |
| letter. | | | | winner is Verdana. If you are inclined to use a serif |
| Modern faces have fine, unbracketed (hairline) serifs | | | | font, Georgia is the best option. Arial remains a good |
| with a strong contrast between thick and thin strokes. | | | | option for specific parts of text, like headlines and titles, |
| There is a strong vertical stress in the direction of the | | | | where a different font must be used and you can use |
| heavy parts of the letters. | | | | larger sizes. |
| Slab serifs have, as their name implies, noticeably | | | | |
