1 / 47

Understanding Type: Importance and Application

Learn the significance of typefaces in communication and design. Explore how to talk about, choose, and pair type, along with the impact bad type can have. Discover Typography on the streets and the evolving trends in New York's street signs.

leonak
Download Presentation

Understanding Type: Importance and Application

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Working with typeIS 403 – Fall 2013 13

  2. A4 Due Tuesday http://userpages.umbc.edu/~skane/classes/is403/a4.html

  3. Today Bethany: summary on web type Talking about type Using type

  4. Understanding type • What we need to know: • How to talk about type • How to choose typefaces (and pair them) • What not to wear choose • Why it matters • Type communicates who we are (professionalism, attitude, style) • Bad type can impair reading (it is said that you only notice type when it is bad)

  5. Typography on the streets! What changed? Why? http://www.nypost.com/p/news/local/bronxmillion_kuj8X4Z2VolVhXnCymfkvM New York updated their street signs.

  6. Why? Is this Charles street? Perry street? Smith street? PERRY

  7. Why? Is this Charles street? Perry street? Smith street? How about this? PERRY Perry

  8. Why? Is this Charles street? Perry street? Smith street? How about this? PERRY Perry

  9. Typography on the streets! New York is updating their street signs. Costing 27 Million Dollars! http://www.nypost.com/p/news/local/bronxmillion_kuj8X4Z2VolVhXnCymfkvM “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. “

  10. Talking about type

  11. What’s a typeface? What’s a font?

  12. Font-Type Definitions http://www.wiu.edu/art/courses/handouts/type.htm • Typeface: The distinctive, design of an alphabet (and accompanying numbers and punctuation). All point sizes of that typeface. • 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)

  13. Basic Type Anatomy http://www.wiu.edu/art/courses/handouts/type.htm

  14. http://jpedroribeiro.com/2009/10/know-your-type-part-1-anatomy/http://jpedroribeiro.com/2009/10/know-your-type-part-1-anatomy/

  15. What is a Serif?

  16. Serif

  17. Two broad categories of fonts Serif Sans-serif

  18. Further type categories http://www.wiu.edu/art/courses/handouts/type.htm Williams has several good chapters on this

  19. Display typefaces

  20. Designed for print or screen? • Traditionally, on screen resolution was much lower than print resolution • Some fonts designed specifically for on-screen readability • Georgia • Verdana • Tahoma

  21. Variations within a type family Helvetica Helvetica Bold Helvetica Bold Oblique Helvetica Light Helvetica Light Oblique Helvetica Neue

  22. Other attributes of type Weight (heavy, light) X-height Ascender/descender height

  23. Letterspacing http://www.wiu.edu/art/courses/handouts/type.htm

  24. http://hartfordprints.blogspot.com/2012/11/112712-language-of-typography.htmlhttp://hartfordprints.blogspot.com/2012/11/112712-language-of-typography.html

  25. Putting type on the page

  26. Things to consider? Combining typefaces Testing type Readability

  27. Combining typefaces Williams: 3 relationships between typefaces Concordant Conflicting Contrasting

  28. Concordant

  29. Conflicting

  30. Contrasting

  31. Combining typefaces http://www.smashingmagazine.com/ 2010/11/04/best-practices-of- combining-typefaces/

  32. Combine a Sans Serif with a Serif By far the most popular principle for creating typeface combinations is to pair a sans serif header typeface with a serif body typeface. This is a classic combination, and it’s almost impossible to get wrong.

  33. Avoid Similar Classifications Typefaces of the same classification, but from different typeface families, can easily create discord when combined. Their distinct personalities don’t play well off of each other and create a kind of typographic mud if careful attention is not paid.

  34. Assign Distinct Roles One very easy way to combine multiple fonts from several typefaces is to design a role-based scheme for each font or typeface, and stick to it.

  35. Contrast font weights / sizes A sure-fire way to muddy your typographic hierarchy is to fail to distinguish elements in the hierarchy from one another. In addition to variations in size, make sure you are creating clear differences in font weights to help guide the reader’s eye around your design.

  36. Keep it simple–2 typefaces In all the effort to sort through large typeface libraries looking for “just the right combination”, it’s often easy to overlook the sometimes obvious and much easier choice: stick to two typefaces using a classic sans serif and serif combination.

  37. Testing type • Easy to do with CSS • A/B testing • Generate dummy text • Loremipsum

  38. Loremipsum? test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

  39. Loremipsum(http://lipsum.com) Loremipsum dolor sit amet, consecteturadipiscingelit. Maecenas necliberosapien. Proin ac arcuporttitor, temporjusto non, eleifend dui. Etiamconsectetur ligula quissapienlobortis, non accumsan nisi aliquam. Vivamussedleopellentesque, tempormetus et, facilisisrisus. Curabituregestasimperdietorci, in consectetur nisi tincidunt ac. Integer iaculis magna egetmaurispharetrascelerisque. Nuncfringilla vitae nisl a ullamcorper. Phasellus at ultricies mi.

  40. Readability • What makes a font easy to read? • Specific color combinations • Specific fonts • Spacing (line spacing, whitespace) • Chunking into paragraphs

  41. Readability matters • Font weight • Font size • Contrast with background • Serif vs. sans-serif – the jury is still out • Fonts designed for screen or page • Other attributes • Tracking, leading, whitespace

  42. Readability Follow the pros

  43. Typography tools • WhatFontfor Chrome • https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm • What the Font • http://www.myfonts.com/WhatTheFont/

  44. Fonts as a business http://chapters.aiga.org/resources/content/3/5/9/6/documents/aiga_2fonts_07.pdf 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.

  45. Type activity What does your font say about you? Let’s look at some web sites for shoes

More Related