TypographyThe Art of designing with words and letters

Type

In visual communication we can treat

type as a design element

Type

http://www.webstock.org.nz/

Type

Type - Categories

Serif Fonts Oldstyle Transitional Modern Slab Serif

Sans Serif Fonts

ScriptDecorativeMonospaced

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

http://trentwalton.com/2009/11/08/things-ive-learned-from-car-guys/

Type

http://www.webstock.org.nz/

http://www.alistapart.com/

Type

http://www.underconsideration.com/

Type

Type

Type

Type

http://www.onedaywithoutgoogle.org/idea.html

Type

Type

Sources

An Introduction to Type http://graphicdesign.spokanefalls.edu/tutorials/process/type_basics/default.htm

Thinking with Type

http://www.papress.com/thinkingwithtype/text/tracking.htm