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.