MODULE CM 2004 / STAGE 2 / SEMESTER 2 / SESSION 06-07 Module title Design Principles and Context Typography Fonts are classified under the following headings. Old Face fonts make use of contrasting wide and narrow strokes reminiscent of marks made with a pen. Garamond - http://www.myfonts.com/fonts/itc/garamond Palatino - http://www.myfonts.com/search?search%5btext%5d=palatino Script fonts are based upon hand drawn calligraphic shapes Palace Script - http://www.myfonts.com/search?search%5btext%5d=palace+script Transitional/Neo Grotesque fonts have highly contrasting wide and narrow strokes and an almost vertical axis. Baskerville - http://www.myfonts.com/search?search%5btext%5d=baskerville Century - http://www.myfonts.com/search?search%5btext%5d=century Modern fonts have contrasting thick and thin strokes. They have a vertical feel and thin serifs. Bodoni - http://www.myfonts.com/search?search%5btext%5d=bodoni Slab Serif fonts have heavy and even stroke weights Rockwell - http://www.myfonts.com/search?search%5btext%5d=rockwell Humanist fonts originated in the 15th Century and have different stroke thicknesses. Verona - http://www.myfonts.com/search?search%5btext%5d=verona Sans Serif fonts have fairly even stroke weights and no serifs (the name Sans comes from the French word Sans meaning without Helvetica - http://www.myfonts.com/search?search%5btext%5d=helvetica Futura - http://www.myfonts.com/search?search%5btext%5d=futura Sometimes you may find that a font falls under more than one classification. eg Gill Sans is regarded as a Humanist Sans Serif font Gill Sans - http://www.myfonts.com/search?search%5btext%5d=gill+sans
Style Commonly available type style variations Roman Italic Condensed Extended Thin Light Bold Extrabold Size When discussing the size of font we refer to its Point Size. A point is 1/72 nd of an inch (0.35mm). Hence, 1 inch = 72 points. A very general set of rules (and please bear in mind that it is sometimes appropriate to adapt rules!) - Body text (any large area of text intended to be read within a document) should generally be somewhere between 10 and 12 point. Print designers working at 300dpi have different constraints in terms of type size as compared to designers for screen projects. Printed text can be held closer to the eye so a designer could in certain areas of a document use a very small point size. Screen based design is limited to 72dpi and any text below around 9 point generally becomes unreadable. Case A font appears in Upper case or Lower case. Upper case means capital letters, while lower case means small letters. Small Caps means capital letters which are the same size as the x height of lower case letters.
Spacing This has a very obvious effect on legibility and readability. Leading refers to the amount of spacing between lines of text within a document. Insufficient leading will leave type cramped and hard to read. (The word leading comes from a time when text was laid out by hand rather than on a computer. The space between lines of text was made using strips of lead of various thicknesses.) Arial (Plain) 11 point / +2 point leading / 0 kerning / left aligned / upper and lower case Arial (Plain) 11 point / 0 point leading / 0 kerning / left aligned / upper and lower case Arial (Plain) 11 point / -5 point leading / 0 kerning / left aligned / upper and lower case
Kerning The spacing between individual letters within a line of text. Arial (Plain) 11 point / +2 point leading / -14 kerning / left aligned / upper and lower case Arial (Plain) 100 point / 0 point leading / 0 kerning / left aligned / lower case Arial (Plain) 100 point / 0 point leading / -14 kerning / left aligned / lower case Arial (Plain) 100 point / 0 point leading / +14 kerning / left aligned / lower case
Alignment Type can be aligned in a number of different ways. Left alignment (also known as ranging left) Centred Text appears centred on a page Right alignment (also known as ranging right) Justified Text is spaced out evenly, creating a vertical alignment at both left and right sides of a column Basic type identification Serif fonts A serif font has a small stroke at the beginning/end of the main components of letters. These small strokes appearing in more or less horizontal or vertical positions were developed to maintain visual continuity across a large area of text to make it easier to read. Times (Plain) / Serif / 100 point / 0 point leading / 0 kerning / left aligned / lower case Sans Serif fonts A sans serif font does not have these extra strokes within its construction. Times (Plain) / Sans Serif / 100 point / 0 point leading / 0 kerning / left aligned / lower case
Further (general) guidelines (and again, guidelines are made to be adapted! ) Line length - should be between approximately 30 and 70 characters in length (neither too short nor too long) Use 1 space rather than 2 after a full stop Do not use underlining within a document, especially not headings or subheadings. An underline behaves as a separator within a body of information. Keep new paragraphs obvious use a line between each, or an indentation etc Fonts and web design Web designers are in most situations - limited to using system fonts within HTML websites. A system font is one of a number of preinstalled fonts that come with a basic computer operating system such as Windows or the Mac OS. Web pages display typefaces installed in the computer upon which the browser displaying them is running. Because it is more or less guaranteed that a user will have a system font installed in their machine, it is considered safe to make use of them within the pages of HTML websites. (It is also possible to download a font to a user s computer if you specifically want to make use of non system font but this will add to download time etc.) A website made entirely in Flash works in a slightly different way to one built in HTML and can display any font. Also, if a non system font is saved as a picture (eg a jpg or a gif) it will be displayed correctly within a standard HTML page (but will not be selectable and copy pastable etc.) DVD interfaces can also display any font as text is saved as images. Fonts can be embedded in multimedia documents used to create CD-Roms. Dreamweaver (the industry standard web design program) currently allows us to work with the following system typefaces by default - Ariel / Helvetica / Geneva / Verdana / Geneva Times New Roman / Times / Georgia Courier New / Courier More can be added from the list of fonts within the web designer's computer but it is not guaranteed that a designer's fonts will be installed in a user's computer. Designers/design agencies will ordinarily buy fonts from font foundries if they are working on a project requiring a specific look but do not already own a license to make use of the typeface they require. Some people design their own fonts, using font design packages in conjunction with drawing packages. eg http://www.fontlab.com/font-tools/fontlab-studio http://www.fontlab.com/font-tools/fontographer/ Further reading - The Microsoft Typography website is quite comprehensive and is worth visiting. http://www.microsoft.com/typography/default.mspx
Letterforms Below are examples of technical terms used to discuss typography. Baseline Median x height UPPERCASE Baseline The imaginary line that letters appear to run along Meanline The imaginary line defining the x-height of letters without ascenders or descenders x height The height of the lower case x This tends to be the height of the main element of letters within a typeface UPPERCASE ie CAPITAL LETTERS lowercase lowercase ie small letters, not in capitals Cap Height Cap height The height of capital letters Serif Serif Short strokes added to the ends of the main parts of letters. A typeface with serifs is referred to as a serif font. Sans Serif Sans Serif A typeface withou serifs is referred to as a sans serif font.
Letterforms Below are examples of technical terms used to discuss the component parts of different letters. Aapex crossbar serif Earm beak dot j descender ascender b bowl Ocounter Tbracket stem f bracket cross stroke link ear loop S barb spine Vvertex crotch 5flag terminal K leg ligature q spur h shoulder a sans serif font
Letterforms Name an Uppercase letter within the word Typography below. Is the word Typography displayed in a Serif or a Sans Serif font? 3 4 5 7 9 11 14 1 2 6 8 10 12 13 15 Please give the names of the numbered elements - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15