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.
nd
A point is 1/72 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
Median
Meanline
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
A E j b
O T f
S V 5 K
q h a
ascender
dot
beak
serif
bowl
descender
crossbar
bracket
cross stroke
stem
counter
ear
link
bracket
vertex
loop
flag
barb
spine
terminal
crotch
spur
shoulder
ligature
sans serif font
leg
Letterforms
Name an Uppercase letter within the word “Typography” below.
Is the word “Typography” displayed in a Serif or a Sans Serif font?
11
9
3
14
7
4
5
1
6
12
2
13
8
10
Please give the names of the numbered elements 1
6
11
2
7
12
3
8
13
4
9
14
5
10
15
15