Download presentation
Presentation is loading. Please wait.
Published byDarrell Turner Modified over 8 years ago
1
Working with type IS 403 – Fall 2013 13
2
A4 Due Tuesday http://userpages.umbc.edu/~skane/classes /is403/a4.html 2
3
Today Bethany: summary on web type Talking about type Using type 3
4
4
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) 5
6
Typography on the streets! http://www.nypost.com/p/news/local/bronxmilli on_kuj8X4Z2VolVhXnCymfkvM New York updated their street signs. What changed? Why?
7
PERRY 7 Is this Charles street? Perry street? Smith street?
8
Why? PERRY Perry 8 Is this Charles street? Perry street? Smith street? How about this?
9
Why? PERRY Perry 9 Is this Charles street? Perry street? Smith street? How about this?
10
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/bronxmilli on_kuj8X4Z2VolVhXnCymfkvM New York is updating their street signs. Costing 27 Million Dollars!
11
Talking about type 11
12
What’s a typeface? What’s a font? 12
13
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
14
Basic Type Anatomy http://www.wiu.edu/art/courses/handouts/type.htm
15
http://jpedroribeiro.com/2009/10/know-your-type-part-1-anatomy/
16
What is a Serif?
17
Serif
18
Two broad categories of fonts Serif Sans-serif 18
19
Further type categories 19 http://www.wiu.edu/art/courses/handouts/type.htm Williams has several good chapters on this
20
Display typefaces 20
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 21
22
Variations within a type family Helvetica Helvetica Bold Helvetica Bold Oblique Helvetica Light Helvetica Light Oblique Helvetica Neue 22
23
Other attributes of type Weight (heavy, light) X-height Ascender/descender height 23
24
Letterspacing http://www.wiu.edu/art/courses/handouts/type.htm
25
http://hartfordprints.blogspot.com/2012/11/112712-language-of-typography.html
26
26
27
Putting type on the page 27
28
Things to consider? Combining typefaces Testing type Readability 28
29
Combining typefaces Williams: 3 relationships between typefaces Concordant Conflicting Contrasting 29
30
Concordant 30
31
Conflicting 31
32
Contrasting 32
33
Combining typefaces http://www.smashingmagazine.com/ 2010/11/04/best-practices-of- combining- typefaces/ 33
34
Combine a Sans Serif with a Serif 34 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.
35
Avoid Similar Classifications 35 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.
36
Assign Distinct Roles 36 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.
37
Contrast font weights / sizes 37 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.
38
Keep it simple–2 typefaces 38 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.
39
Testing type Easy to do with CSS A/B testing Generate dummy text –Lorem ipsum 39
40
Lorem ipsum? test test test test test 40
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. 41
42
Readability What makes a font easy to read? –Specific color combinations –Specific fonts –Spacing (line spacing, whitespace) –Chunking into paragraphs 42
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 43
44
Readability Follow the pros 44
45
Typography tools –WhatFont for Chrome https://chrome.google.com/webstore/detail/whatfon t/jabopobgcpjmedljpbcaablpmlmfcogm –What the Font http://www.myfonts.com/WhatTheFont/ 45
46
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
47
Type activity What does your font say about you? Let’s look at some web sites for shoes 47
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.