![Page 1: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/1.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County1,
Typography 2!
HCC 710 2/1�/13
![Page 2: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/2.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,2,
Letterform Critiques!
25-30 minutes
![Page 3: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/3.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County3,
Wordpress Questions / "Graphic Design Inspirations!
![Page 4: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/4.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,4,
Cultural Language of Type!
![Page 5: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/5.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,5,
Discussion about “type around us”!
What did you discover?
![Page 6: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/6.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,6,
Fonts and their meanings!
![Page 7: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/7.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,7,
![Page 8: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/8.jpg)
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,,
![Page 9: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/9.jpg)
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
![Page 10: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/10.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,10,
Typefaces and their stereotypes!
![Page 11: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/11.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,11,
Typefaces and their stereotypes!
![Page 12: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/12.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,12,
Typefaces and their stereotypes!
![Page 13: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/13.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,13,
Typefaces and their stereotypes!
![Page 14: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/14.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,14,
Typefaces and their stereotypes!
![Page 15: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/15.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,15,
Typefaces and their stereotypes!
![Page 16: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/16.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,16,
Typefaces and their stereotypes!
![Page 17: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/17.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,17,
Typefaces and their stereotypes!
![Page 18: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/18.jpg)
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
![Page 19: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/19.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,19,
![Page 20: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/20.jpg)
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/
![Page 21: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/21.jpg)
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
![Page 22: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/22.jpg)
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,
![Page 23: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/23.jpg)
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,,
![Page 24: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/24.jpg)
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,,
![Page 25: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/25.jpg)
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,
![Page 26: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/26.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,26,
Contrast Font Weights!
Play with font weights for contrast
![Page 27: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/27.jpg)
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
![Page 28: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/28.jpg)
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
![Page 29: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/29.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,29,
Use different point sizes!
Simple, but effective technique
![Page 30: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/30.jpg)
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)
![Page 31: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/31.jpg)
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
![Page 32: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/32.jpg)
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
![Page 33: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/33.jpg)
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
![Page 34: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/34.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,34,
Break!
![Page 35: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/35.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,2,
Real World Assignment Focus!!
UMBC SUCCESS program Kennedy Krieger High School
![Page 36: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/36.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,3,
Guest Speaker next Monday!!
Learn about our target population from an expert.
![Page 37: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/37.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,9,
In Class Assignment!
Creative Typography
![Page 38: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/38.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,36,
![Page 39: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/39.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,37,
![Page 40: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/40.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,38,
![Page 41: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/41.jpg)
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.
![Page 42: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/42.jpg)
Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County,39,
For next time!
![Page 43: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/43.jpg)
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.
![Page 44: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/44.jpg)
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
![Page 45: Typography 2 · 1, Human&Centered,Compu/ng,at,University,of,Maryland,,Bal/more,County Typography 2! HCC 710 2/1 /13](https://reader035.vdocuments.us/reader035/viewer/2022071218/604f6fc83c4f747999385163/html5/thumbnails/45.jpg)
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