Fall 2009

Unit 2. Development

Module 8: Typography & Design

Key Terms• Typography – The art of letterform• Instructional Typography – using letters, words, and

passages of text to communicate instructional messages

• Typeface – Formal definition of alphabetical and numerical characters that are unified by consistent visual properties; type is synonymous with typeface

• Font – A computer-generated typeface for a specific point size; recent interpretation to mean typeface

• Type Family – The complete array of typeface; e.g., Arial, Times New Roman, Comic Sans Serif, etc.

• Text – The main body of written or printed material; excludes footnotes, appendices, display elements, etc.

• Legibility – Degree of ease of reading short segments (bursts) of text

• Readability – Degree of ease of reading long passages/sections of text

Module 8. Type and Typography 3

The Power of Type•Create chunks of information to

facilitate comprehension, understanding od directions, procedures, etc.

•Complex type can express emotion, enhance a message

•Type has organizational and communicative power

•Facilitates contrast, alignment, repetition, and proximity

Module 8. Type and Typography 4

Classifications of Type

• Classifications of type/fonts is based upon the characteristics of the anatomy of each

• Type is classified into six groups:1. Black Letter2. Roman3. Square Serif4. Sans Serif5. Script6. Decorative

Module 8. Type and Typography 5

Classifications of Type: Black Letter

• One of the oldest type faces

• Limited application in instruction

• Primarily used for decoration

• Drop-cap letters• Old Century

Module 8. Type and Typography

6

Classifications of Type: Roman - Old Style, Modern, Transitional

• Old Style– Considered easy to read– Widely used in instructional materials– Tapered and slanted serifs, inclined counters– Garamond, Times New Roman

• Modern– Striking in appearance, difficult to read in large

quantities of text– Perpendicular serifs, upright counters, high contrast

between lines– Bondini

• Transitional– Very readable– Share characteristics with Old Style and Modern– Centaur

Module 8. Type and Typography 7

Classifications of Type:Square Serif

•Similar to Roman typefaces•Widely used in educational

materials; highly readable•Frequently used in children’s books•Often darker than others (contrast)– Century– Georgia (web)

Module 8. Type and Typography 8

Classifications of Type: Sans Serif

•Literally means “without serifs”•Considered by some to be more

legible for computer-based instruction & presentation than serif types

•Frequently used as headings in all types of instructional materials– Franklin Gothic– Trebuchet (screen display)– Verdana (screen display)

Module 8. Type and Typography 9

Classifications of Type: Script

•Limited application in instructional materials: difficult to read in text

•Used to designate different voice•Certificates, designate historical

periods, ornamentation•Cursive

– Brush Script– Lucida calligraphy– Freestyle Script

Module 8. Type and Typography 10

Classifications of Type: Decorative - Symbol

•Image based typeface – symbols and Dingbats– Qwerty– Menagerie Dingbats– Webdings– Wingdings 1 & 2 (Wingdings 3)

Module 8. Type and Typography 11

Classifications of Type: Decorative - Display

•Used for title, headings, other display purposes

•Too tiring for lengthy text•Create mood, act as metaphors,

attract attention– Snap ITC– Curlz– Jokerman– Ravie

Module 8. Type and Typography 12

How do you know what is best?

The “It depends…” Rule•The learner•The content•The task•The environment•Other elements in the visual•Your skills and abilities in graphics

and design

Module 8. Type and Typography 13

How do you know what is best?

•Serif typefaces tend to be recognized as having high readability

•Sans serif typefaces are typically viewed as being clear and legible

•Research is inconclusive•A bold sans serif typeface used in

conjunction with a lighter font provides excellent contrast; facilitates “chunking”

Module 8. Type and Typography 14

Attributes of Type

• Ascender – part rising above body• Descender – part falling below body• Caps height – uppercase letter measured from

baseline• Ascender height – height of tallest part of letter• X-height – height of lower case letter without

ascender or descender; the taller the x-height, easier to read (Georgia)

• Bowl – portion of a letter that encloses a counter• Serif – wings• Baseline – does not include descenders• Cross stroke – horizontal stroke crossing a vertical

stroke of a letter

Module 8. Type and Typography 15

Attributes of Type, cont’d.

• Counter – enclosed or partially enclosed portion of a type character; width

– Readability increases as width of counter increases

• Leading – vertical space between lines of text; a.k.a. line spacing in some computer programs

– Increase leading to increase interest, attention• Kerning – horizontal space between individual

letters or characters in a word– Used mostly with type sizes 30 points and

higher– Improves appearance of headings, titles– Can enhance readability– Makes things “fit” better

Module 8. Type and Typography 16

Type and Layout• Alignment: left justified, centered, right justified, justified• Line Length

– dependent upon font, font size, page size, direction, leading

– Palm width = 4-5”– Break line according to logic/content, not formula

• Type Size– 36 points = ½ inch; 72 points = 1 inch– X-height and counter size can affect appearance of font

even when point size is equal– 12 point recommended for print and computer-based

instruction– 6x6 Rule: projected slide/transparency should have no

more than 6 lines of text and no more than 6 words per line

– Computer screen – view it from 6 feet @ 100%– For every 10 feet, increase typeface ½ inch

Module 8. Type and Typography 17

Cueing and Typography

Change type to signal a change in the text to the reader:• colors• ALL CAPS• bold or italic or underlining• Size• K e r n i n g• Leading

Module 8. Type and Typography 18

Resources and Activities

Resources: • Fonts for Teachers

http://www.fonts4teachers.com/Assignments:1. Communicating with Typography2. Using guidelines provided, create a

document that illustrates the variety of possibilities for using typography, layout, design, and other features of Microsoft Word.

Module 8. Type and Typography 19