45
Human&Centered Compu/ng at University of Maryland, Bal/more County 1 Typography 2 HCC 710 2/1/13
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County1,
Typography 2!
HCC 710 2/1�/13
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,2,
Letterform Critiques!
25-30 minutes
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County3,
Wordpress Questions / "Graphic Design Inspirations!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,4,
Cultural Language of Type!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,5,
Discussion about “type around us”!
What did you discover?
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,6,
Fonts and their meanings!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,7,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,8,
When good people pick bad fonts !!
http://www.youtube.com/watch?v=ULb_xtz_SE0&feature=player_embedded#!
hDp://theweek.com/ar/cle/index/208589/is&comic&sans&the&worst&font&of&all&/me,,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,9,
History of Comic Sans!
“Comic Sans was designed because when I was working at Microsoft I received a beta version of Microsoft Bob. It was a comic software package that had a dog called Rover at the beginning and he had a balloon with messages using Times New Roman. Comic Sans was NOT designed as a typeface but as a solution to a problem with the often overlooked part of a computer program's interface, the typeface used to communicate the message [in a comic character's message balloon].” --Vincent Connare
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,10,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,11,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,12,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,13,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,14,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,15,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,16,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,17,
Typefaces and their stereotypes!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,18,
So… you need a typeface!
http://inspirationlab.files.wordpress.com/2010/04/infographiclarge_v2.png
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,19,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,20,
Combining Typefaces!
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,21,
Combine a Sans Serif with a Serif !!
Use a sans serif header with a serif body
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,22,
Avoid Similar Classifications !
Typefaces of the same classification, but different typeface families, can create discord when combined.
2,Egyp/ans,,(slab,serif),
Egyp/an,/tle,Transi/onal,text,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,23,
Major typeface classifications !
Typographic,Design:,Form,and,Composi/on,,hDp://bit.ly/PenFWP,,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,24,
Major typeface classifications !
Typographic,Design:,Form,and,Composi/on,,hDp://bit.ly/PenFWP,,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,25,
Assign Distinct Roles!Design,a,role&based,scheme,for,each,font,or,typeface,,and,s/ck,to,it,throughout,the,document,
“When,in,doubt,,define,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,26,
Contrast Font Weights!
Play with font weights for contrast
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,27,
But… avoid anything too dramatic!
Be careful about creating a visual imbalance in your fonts
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,28,
Instead, contrast distinct with neutral!
You can go a little crazy, but don’t overdo it
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,29,
Use different point sizes!
Simple, but effective technique
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,30,
Keep it simple: go for 2 typefaces!
Try and keep it to 2 types, but feel free to use multiple fonts (i.e. vary the size and stroke)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,31,
!Web design != Print Design!
• Some things a Web designer can’t be sure of: • Resolution of the user’s monitor • Size of the user’s browser window • Text size: users can change it • The settings and quality of the user’s monitor,
in terms of brightness, contrast, and color balance
• The fonts available to a user – There are tricks to embed this in the page
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,32,
Suggestions from a web dev book!
• Use Georgia or Verdana • Use 10 point or 12 point type • Avoid bold or italic in body type, except for
a few words for emphasis • Use upper case only for the first word of
sentences, proper names, etc. • Use left alignment • Use dark text on a light background • Never use underlining for emphasis
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,33,
Kinematic Typography!
http://www.youtube.com/watch?v=CBsmaBm1yC0 http://vimeo.com/channels/kinetictypography Technique used all the time in commercials, research has also been done to automatically generate these.
– http://www.cs.cmu.edu/~johnny/kt/ – Also built IM chat client (published at DIS 2006) – Also used it to convey emotion
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,34,
Break!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,2,
Real World Assignment Focus!!
UMBC SUCCESS program Kennedy Krieger High School
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,3,
Guest Speaker next Monday!!
Learn about our target population from an expert.
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,9,
In Class Assignment!
Creative Typography
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,36,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,37,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,38,
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,10,
Creative Typography In-Class!
Pick 1 letter and 1 concept. • Create 5-10 unique letterforms to illustrate
that concept • I recommend choosing actions or nouns as
your concept. • Post these to your blog along with a 100
word design statement.
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,39,
For next time!
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,6,
Assignment!
Express the UMBC SUCCESS program’s name and description in type Name: UMBC SUCCESS Description: SUCCESS (Students United for Campus-Community Engagement for Post-Secondary Success), a partnership of UMBC and the Maryland Department of Disabilities, is the first 4-year college experience for young adults with intellectual disabilities in Maryland.
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,7,
Assignment!
Work on both the name and description using only black type on a white background. Requirements:
• Only use the letters in this text. • You may use a single box (any size / stroke), • Do not use any additional symbols. • Feel free to arrange the text in any way • Create 3 designs for each (3 name; 3 description)
Write 100 words describing each composition These will be shared with the SUCCESS program
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,8,
Readings!
Required • color theory from “Graphic design the new
basics” Optional
• Color theory for designers – smashing magazine
• Color theory 101 - design festival • What color is “brave” – aiga
