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. Eg 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 Eg 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. Eg 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. Eg Bodoni - http://www.myfonts.com/search?search%5Btext%5D=bodoni • Slab Serif fonts have heavy and even stroke weights Eg Rockwell - http://www.myfonts.com/search?search%5Btext%5D=rockwell • Humanist fonts originated in the 15th Century and have different stroke thicknesses. Eg 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” Eg 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/72nd 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) • Right alignment (also known as ranging right) • Centred – Text appears centred on a page • 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 Baseline The imaginary line that letters appear to run along Meanline Median The imaginary line defining the x-height of letters without ascenders or descenders x height 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 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. apex arm ascender dot bowl beak serif A E descender b crossbar j bracket cross stroke counter stem ear link O T f loop bracket vertex flag barb spine V terminal5 leg S crotch K spur shoulder ligature q h sansa 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? 9 11 3 14 7 5 4 1 6 12 2 15 13 8 10 Please give the names of the numbered elements - 1 6 11 Stem Counter Ascender 2 7 12 Bracket Link Leg 3 8 13 Arm Loop Descender 4 9 14 Vertex Ear Meanline 5 10 15 Bowl Bowl Baseline.