Typography The Art of designing with words and letters

Type In visual communication we can treat type as a design element

Type

Type

Type - Categories Serif Fonts  Oldstyle  Transitional  Modern  Slab Serif Sans Serif Fonts Script Decorative Monospaced

Type - Categories Serif Fonts  Oldstyle: Times, Garamond  smooth transitions between thick and thin strokes  rounded (bracketed) serifs, slanted serifs  diagonal stress  Transitional: Baskerville  transition between oldstyle & modern  Squared off serifs  Modern: Bodoni, Didot  obvious transition between thick and thin strokes  angular (unbracketed serifs)  vertical stress  Slab Serif: Memphis, Rockwell  Slight transitions between thick and thin strokes  Serifs are thick, fat, horizontal  vertical stress

Type - Categories  Oldstyle: Times, Garamond  smooth transitions between thick and thin strokes  rounded (bracketed) serifs, slanted serifs  diagonal stress

Type - Categories  Modern: Bodoni, Didot  obvious transition between thick and thin strokes  angular (unbracketed serifs)  vertical stress

Type - Categories  Transitional: Baskerville  transition between oldstyle & modern  Squared off serifs

Type - Categories  Slab Serif: Memphis, Rockwell  Slight transitions between thick and thin strokes  Serifs are thick, fat, horizontal  vertical stress

Type - Categories Sans Serif Fonts: Arial, Helvetica, Futura, Franklin Gothic  Without serifs  Usually monoweight: no thick to thin transitions  Large x-height Script Decorative - experimental, graphic

Type - Categories Monospaced - uniform spacing (fixed-width) Proportionately spaced fonts – font rules determine the width of the characters and space around each character (kerning-pairs)

Type - Size  Points (1/72 inch)  Pica (1 pica = 12 points) – often used to measure width  10, 12, 14, 16, 18, 24, 32, 36  X-height: height of lowercase letters excluding ascenders and descenders Web (CSS)  Absolute units (points, picas, millimeters, centimeters, inches)  Relative units (em, ex, pixel, %)

Terminology - spacing Horizontal Spacing  Kerning  Horizontal space between individual letters  Tracking  Horizontal space between all characters (across word, line, column)  Web (CSS properties)  letter-spacing  word-spacing

Terminology - spacing Vertical Spacing  Leading  Vertical Spacing between lines of text  Web (CSS properties)  Line-height

Terminology - leading

Type Legibility  The ease with which type can be understood under normal reading conditions  Clarity and recognition of letterforms, weight and proportion, all caps vs. lowercase, x-height, serif vs. sans serif Readability  The quality of attracting and holding a reader’s interest, the comfort of the read  Type size, letterspacing, word spacing, linespacing, line length

Type

Type

Type

Type

Type

Sources An Introduction to Type  Thinking with Type 