typography 1 - heerahcc710.files.wordpress.com · 1...
TRANSCRIPT
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 1
Typography 1
HCC 710 2/3/14
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 2
Keyform Critiques
25-30 minutes
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 3
Critique (Summary from Reading)
For Critics • Avoid creating a “climate of fear” • Hamburger method • Focus on “Why” • Make actionable suggestions • Respond to the work and the person
h?p://arcadenw.org/ar/cle/how-‐to-‐survive-‐cri/que
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 4
Critique (Summary from Reading)
For the one being critiqued • Be ready with your work • Be ready to say something about your work • Listen, be open, don’t be defensive • Don’t take it personally • Take notes • Be positive and polite • Decide what revisions to make (after the
critique)
h?p://arcadenw.org/ar/cle/how-‐to-‐survive-‐cri/que
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 5
Wordpress Questions
Any questions about setting up your page?
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 6
Inspirations?
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 7
Typography on the streets!
h?p://www.nypost.com/p/news/local/bronxmillion_kuj8X4Z2VolVhXnCymSvM
New York updated their street signs. How much did this cost?
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 8
Typography on the streets!
“Studies have shown that it is harder to read all-caps signs, and those extra milliseconds spent staring away from the road have been shown to increase the likelihood of accidents, particularly among older drivers.” “new regulations also require a change in font from the standard highway typeface to Clearview, which was specially developed for this purpose. “
h?p://www.nypost.com/p/news/local/bronxmillion_kuj8X4Z2VolVhXnCymSvM
New York is upda/ng their street signs. Cos$ng 27 Million Dollars!
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 9
Typography Basics
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 10
Typography Basics
Type Anatomy
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 11
Basic Type Anatomy
h?p://www.wiu.edu/art/courses/handouts/type.htm
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 12
What is a Serif?
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 13
Serif
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 14
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 15
h?p://harXordprints.blogspot.com/2012/11/112712-‐language-‐of-‐typography.html
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 16
But wait, there’s more…
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 17
h?p://jpedroribeiro.com/2009/10/know-‐your-‐type-‐part-‐1-‐anatomy/
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 18
More type anatomy
Excellent anatomy lesson: h?p://typedia.com/learn/only/anatomy-‐of-‐a-‐typeface/
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 19
Typography Basics
Terminology and Typeface Classifications
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 20
Font: All the letters, numbers and punctuation of a single size of a single typeface (27-point Helvetica)"
– 1 Inch = 72 points = 6 picas (1 pica=12 points)"Typeface: The distinctive, design of an alphabet (and accompanying numbers and punctuation). All point sizes of that typeface. !
Font vs. Type Definitions
h?p://www.wiu.edu/art/courses/handouts/type.htm
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 21
Major typeface classifications
h?p://www.wiu.edu/art/courses/handouts/type.htm
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 22
Major typeface classifications
Typographic Design: Form and Composi/on h?p://bit.ly/PenFWP
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 23
Major typeface classifications
Typographic Design: Form and Composi/on h?p://bit.ly/PenFWP
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 24
Typography Basics
Space between the letters
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 25
Letterspacing
h?p://www.wiu.edu/art/courses/handouts/type.htm
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 26
h?p://harXordprints.blogspot.com/2012/11/112712-‐language-‐of-‐typography.html
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 27
h?p://xk9.com/bones/?-‐010/
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 28
http://type.method.ac/
I need a volunteer…
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 29
h?p://xk9.com/bones/?-‐010/
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 30
Typography Basics
Fonts as a business
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 31
Fonts as a business
“Fonts are creative, intellectual property, similar to designers’ creative work or to proprietary business products. Since type is so ubiquitous and fonts are so easy to share among computer users, the legal and moral issues of the simple process of using a font are often overlooked.” –aiga Make sure you have a license to use a font
h?p://chapters.aiga.org/resources/content/3/5/9/6/documents/aiga_2fonts_07.pdf
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 32
Fonts as a business
Fonts are creative, intellectual property. You do not own a font. You license it for limited uses. You cannot share a font with someone who does not have his or her own license to use it. You can embed a font in a file to have it viewed or printed by others.
h?p://chapters.aiga.org/resources/content/3/5/9/6/documents/aiga_2fonts_07.pdf
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 33
Break
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 34
How to analyze a font
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 35
Helvetica (film)
Gary Hustwit, 2007"Available on Netflix streaming" Chapter 2 and 5
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 36
What is the “best” font?
“it depends”
this is the hard part
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 37
“Best” Fonts
Inclusive survey http://www.100besttypefaces.com/ Best free fonts of 2012 http://www.smashingmagazine.com/2012/01/09/high-quality-free-fonts-2012/
Best Web / Mobile Fonts http://venturebeat.com/2012/12/24/best-mobile-web-fonts/
Most Expensive http://www.typophile.com/node/92270
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 38
Tracing fonts
In-class exercise
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 39
Why?
Tracing the letterforms is one of the best / simplest ways to notice and compare the differences between fonts. Work in groups to trace 1 letter (everyone uses a different font)
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 40
For next time
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 41
1: Trace 6 fonts
Trace your initials (3 letters) What are the differences between the fonts? Write 100 words about the differences you saw within the sans-serif fonts and the serif ones.
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 42
2: Letterform composition Concepts (pick 2 dyads = 4 illustrations)
• Static / Active (2 illustrations) • Unity / Fragmentation (2 illustrations) • Random / Grouping (2 illustrations)
Use 3 letters from 1 type to express a concept, don’t mix types in a design
• Must be within a 7” square • You can rescale letters • Do not reflect, distort or make them illegible
Can only use the 6 fonts we traced!
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 43
Example: Bounce
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 44
Example: Crash
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 45
3: Look around you
Mini Font Ethnography (a photo essay) 1. Find 5 good uses of typography in the real world
(cannot include onscreen type) 2. Find two documents that use at least 5 typefaces. One
should use them well, and the other shouldn’t. 3. Find examples of type that illustrate these 6 dyads (
1 example each, 6 total) • Authority / Respect • Hip / Cool • Dull / Boring • Fresh / New • Stale / Overused • Gender
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 46
Look around you
Deliverable • Identify the fonts you found, only required for
part #1: http://www.myfonts.com/WhatTheFont/
• In 100-200 words describe trends you saw • Include all images
Where will you look?
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 47
Things to do for next week
0: Post final keys to blog 1: Trace letters
• Trace your initials in all 6 fonts • Post photos to blog • 100 word description of trends
2: Letterform composition (create 4) • Create 4 designs (2 dyads) • Post sketches / V1 to blog • Bring in printouts to class
3: Look around you • Post photos and reflection to blog
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 48
Readings
Required • Look around you assignment
Optional • Score more than 80 in the kerning game • The fundamentals of Typography (Chapter
1) free preview on google books • http://books.google.com/books?isbn=2940373450
Just for fun • http://www.buzzfeed.com/paws/cats-as-fonts
Human-‐Centered Compu/ng at University of Maryland, Bal/more County 49
Where are we going with our assignments?
Type is last week of “generic” assignments.