Introduction to TypogrAphy

Type is …

•  A valuable communication tool. •  Speech made visible. LISTEN TO IT. •  Tone of voice. Emphasis, loudness,

whispering, dialect.

Type Classes

•  Serif •  Sans Serif •  Decorative/Display •  Monospaced •  Script/Hand-Lettered •  Symbols/Ornaments

Serif vs. Sans Serif

•  Sans Serif – Arial •  Sans Serif – Gill Sans •  Sans Serif - Helvetica!•  Serif – Times •  Serif – Adobe Garamond •  Serif – Adobe Caslon

Abc Abc

Font weights

•  Interstate Hairline

•  Interstate Thin

•  Interstate Extra Light

•  Interstate Light •  Interstate Regular •  Interstate Regular Italic •  Interstate Bold •  Interstate Black •  Interstate Ultra Black

Font variations

•  Interstate Regular •  Interstate Regular Compressed •  Interstate Regular Condensed

Anatomy of a typeface

Designer’s challenge:

•  How to organize letters, words, sentences on blank page, screen or space – What font? – What size? What weight? – How aligned, spaced, ordered, shaped,

colored, or otherwise manipulated?

Spacing

•  Design is an act of spacing and an act of marking

•  Space in typography: negative gaps between and around letters – Characters, leading, margins – Space makes words readable

Tryreadingalineoftextwithoutspacingtoseehowimportanthisis.

Typographic Hierarchy

•  Organizational system for content •  Emphasizes some data, diminishes

others •  Helps readers scan text, know where

to enter/exit, how to pick and choose •  Cues can be:

– Spatial (indent, line spacing, placement on page

– Graphic (size, style, color)

Types of Type

•  Display – Describes content – Lures reader – Sans serif

•  Text – Where the content is – Serif

Types of Type

•  Primary Type -- i.e. Headline – Draws attention to itself – Stops “browser” – Leads to…

•  Secondary Type -- The Payoff – Explains the headline, hooks the reader – Mid-level prominence – Subhead, deck, caption

Dominance

What is primary? What is secondary?

Types of Type

•  Guidelines for Use –  Use no more than two families of type –  Two weights –  Add italics to make six voices

•  Size Affects Space –  Display type, above 18 point, shows off

misspacing –  Line breaks are critical to the meaning

Types of Type

Line breaks are critical to the meaning/readability

Bus plunge kills 3 Lee students

Bus plunge kills 3 Lee Students

Bus plunge kills 3 Lee Stu- dents

Using Space in Text

Using Space in Text

Using Space in Text

•  Space Should Make Reading the Type Effortless

•  It is done right if it is not noticeable

Readability of type

6 factors to consider

1. Typeface Readability

•  Reader Should Not Be Aware of the Form •  All-caps harder to read than lowercase

–  Caps look like bricks (no more than two lines) –  Whitespace around lowercase distinguishes letters

•  Sans serif may be harder to read than serif –  Serifs aid horizontal eye movement –  Italics harder than Roman because they are lighter –  Shaded, outline & inline for Display only

2. Type size, weight

•  10-pt. is the smallest readable size •  Use weightier or larger face on longer

measure •  Limit use of heavy/bold faces to special

display, features (16 point and higher) •  Reverse type

–  increase size and weight –  use sans serif font

3. Letterspacing

•  Kerning and tracking, but also space between lines of type (leading)

•  Be consistent •  Proportions:

– Wide letters need more space – Caps need more than lowercase

4. Word Spacing

•  Should Be Invisible •  Justified type forces spacing

throughout the line of type … be careful

•  Justified left/ragged right gives best spacing, provides rhythm

•  Hyphenation should never be used in Display type

5. Line Spacing

•  Narrow widths of type hurt flow –  Eye jerks around to keep up with narrow columns

•  Too-wide widths of type hurt rhythm –  Readers lose track of line they’re scanning

•  Rule of thumb: Width of line (in picas) should be no more than twice the size of type (in points) –  A line of 12-pt type should not be wider than 24

picas –  Approx. 40-50 characters per line

6. Format

•  Readers Follow Visual Signals – Paragraphing (announce new idea) – Punctuation (pause or stop) – White Space (relative connectedness) – Position on the Page (importance)

•  Ragged-left is harder to read than ragged-right and justified

•  Be consistent

More Type Tips

•  Print vs. Electronic •  In Print, Display type should be sans serif,

text should be serif •  In Electronic, Display type should be serif,

text should be sans serif

More Type Tips

4. Avoid placing type over illustrations, tinted areas •  Background

must provide clean, contrasted field for text

More Type Tips

•  Break up long runs of type •  Paragraph indentation •  Greater leading between

grafs •  Subheads of contrasting

size, weight •  Boldface or italic for special

emphasis within text

More Type Tips

•  Finally, keep it simple and expressive.

–  Communication won’t happen just because something looks interesting

–  Communication won’t happen just because something is legible