![Page 1: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/1.jpg)
Working with typeIS 403 – Fall 2013 13
![Page 2: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/2.jpg)
2
A4
• Due Tuesday• http://userpages.umbc.edu/~skane/
classes/is403/a4.html
![Page 3: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/3.jpg)
3
Today
• Bethany: summary on web type• Talking about type• Using type
![Page 4: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/4.jpg)
4
![Page 5: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/5.jpg)
5
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)
![Page 6: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/6.jpg)
Typography on the streets!
http://www.nypost.com/p/news/local/bronxmillion_kuj8X4Z2VolVhXnCymfkvM
• New York updated their street signs.
What changed?Why?
![Page 7: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/7.jpg)
7
Why?
PERRY Is this Charles street? Perry street?Smith street?
![Page 8: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/8.jpg)
8
Why?
PERRY
Perry
Is this Charles street? Perry street?Smith street?
How about this?
![Page 9: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/9.jpg)
9
Why?
PERRY
Perry
Is this Charles street? Perry street?Smith street?
How about this?
![Page 10: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/10.jpg)
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. “
http://www.nypost.com/p/news/local/bronxmillion_kuj8X4Z2VolVhXnCymfkvM
New York is updating their street signs. Costing 27 Million Dollars!
![Page 11: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/11.jpg)
11
Talking about type
![Page 12: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/12.jpg)
12
What’s a typeface? What’s a font?
![Page 13: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/13.jpg)
• 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)
•
Font-Type Definitions
http://www.wiu.edu/art/courses/handouts/type.htm
![Page 14: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/14.jpg)
Basic Type Anatomy
http://www.wiu.edu/art/courses/handouts/type.htm
![Page 15: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/15.jpg)
http://jpedroribeiro.com/2009/10/know-your-type-part-1-anatomy/
![Page 16: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/16.jpg)
What is a Serif?
![Page 17: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/17.jpg)
Serif
![Page 18: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/18.jpg)
18
Two broad categories of fonts
• Serif• Sans-serif
![Page 19: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/19.jpg)
19
Further type categories
http://www.wiu.edu/art/courses/handouts/type.htm
Williams has several good chapters on this
![Page 20: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/20.jpg)
20
Display typefaces
![Page 21: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/21.jpg)
21
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
![Page 22: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/22.jpg)
22
Variations within a type family
• Helvetica• Helvetica Bold• Helvetica Bold Oblique• Helvetica Light• Helvetica Light Oblique
• Helvetica Neue
![Page 23: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/23.jpg)
23
Other attributes of type
• Weight (heavy, light)• X-height• Ascender/descender height
![Page 24: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/24.jpg)
Letterspacing
http://www.wiu.edu/art/courses/handouts/type.htm
![Page 25: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/25.jpg)
http://hartfordprints.blogspot.com/2012/11/112712-language-of-typography.html
![Page 26: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/26.jpg)
26
![Page 27: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/27.jpg)
27
Putting type on the page
![Page 28: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/28.jpg)
28
Things to consider?
• Combining typefaces• Testing type• Readability
![Page 29: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/29.jpg)
29
Combining typefaces
• Williams: 3 relationships between typefaces
• Concordant• Conflicting• Contrasting
![Page 30: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/30.jpg)
30
Concordant
![Page 31: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/31.jpg)
31
Conflicting
![Page 32: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/32.jpg)
32
Contrasting
![Page 33: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/33.jpg)
33
Combining typefaces
• http://www.smashingmagazine.com/ 2010/11/04/best-practices-of- combining-typefaces/
![Page 34: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/34.jpg)
34
Combine a Sans Serif with a SerifBy 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.
![Page 35: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/35.jpg)
35
Avoid Similar ClassificationsTypefaces 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.
![Page 36: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/36.jpg)
36
Assign Distinct RolesOne 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.
![Page 37: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/37.jpg)
37
Contrast font weights / sizesA 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.
![Page 38: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/38.jpg)
38
Keep it simple–2 typefacesIn 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.
![Page 39: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/39.jpg)
39
Testing type
• Easy to do with CSS• A/B testing• Generate dummy text
– Lorem ipsum
![Page 40: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/40.jpg)
40
Lorem ipsum?
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
![Page 41: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/41.jpg)
41
Lorem ipsum (http://lipsum.com)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas nec libero sapien. Proin ac arcu porttitor,
tempor justo non, eleifend dui. Etiam consectetur ligula
quis sapien lobortis, non accumsan nisi aliquam.
Vivamus sed leo pellentesque, tempor metus et,
facilisis risus. Curabitur egestas imperdiet orci, in
consectetur nisi tincidunt ac. Integer iaculis magna eget
mauris pharetra scelerisque. Nunc fringilla vitae nisl a
ullamcorper. Phasellus at ultricies mi.
![Page 42: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/42.jpg)
42
Readability
• What makes a font easy to read?– Specific color combinations– Specific fonts– Spacing (line spacing, whitespace)– Chunking into paragraphs
![Page 43: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/43.jpg)
43
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
![Page 44: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/44.jpg)
44
Readability
Follow the pros
![Page 45: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/45.jpg)
45
Typography tools
– WhatFont for Chrome• https://chrome.google.com/webstore/detail/
whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
– What the Font• http://www.myfonts.com/WhatTheFont/
![Page 46: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/46.jpg)
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.
http://chapters.aiga.org/resources/content/3/5/9/6/documents/aiga_2fonts_07.pdf
![Page 47: Working with type IS 403 – Fall 2013 13. A4 Due Tuesday skane/classes /is403/a4.html 2](https://reader036.vdocument.in/reader036/viewer/2022062321/56649da15503460f94a8d040/html5/thumbnails/47.jpg)
47
Type activity
• What does your font say about you?• Let’s look at some web sites for shoes