typography
Post on 28-Oct-2014
972 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related