Typography 03

Pairings, design principles, typeface selection

Transcript

1. Typography 03 Communication is Job One.
2. Learner Objectives Get to Know O  Typeface pairings (quality matchmaking) O  Principles of designing with type O  Typeface selection fundamentals
3. Why You Should Care O  Every typeface carries a unique “voice” O  Typeface should match message/design O  Reader’s distraction(s) should be minimized O  Typography should match usage (print/screen) O  Quality layouts communicate better
4. Typeface Pairings Conceptual, Creative, Aesthetics General Guidelines: O  Limit mixing, select for contrast O  Pair for distinction between display type and text type O  Select for contrast, yet choose for similar proportions/configurations O  Pair complementary typefaces O  Look for contrasting voices, but similar x-heights
5. Typeface Appearance Conceptual, Creative, Aesthetics Typographic texture (aka typographic “color” or visual weight) O  Overall density (tonal quality) of a “mass” of type on a page or screen O  Usually refers to blocks of text type O  Type block, paragraph, or column often takes on a tonal quality, creating a block of gray tone
6. Typeface Pairings How to Find & Use What Works O  Plan for dynamic combinations O  Focus on type "relationships" O  Identify which relationship: O  Cohesive  O  Contrasting  O  Conflicting V
7. Cohesive " = Good Typeface Pairing O  Only one type family used O  Little variety in style, size, weight, etc. O  Harmony easily maintained O  Quiet, sedate, formal O  Risks being dull, subdued
8. Cohesive 
9. Contrasting " = Good Typeface Pairing O  Multiple type families used O  Distinctly different in style, size, weight, etc. O  Visually appealing O  Attracts attention O  Adds energy to designs
10. Contrasting 
11. Conflicting V = Bad Typeface Pairing O  Multiple type families used O  Similar in style, size, weight, etc. O  Disharmonic – not really the same, yet not different enough O  Similarity appears as if it were a mistake O  Should be avoided
12. Conflicting V
14. Typeface Selection Factors: Usage, Media O  Is it for display, for text, or both? O  Is it for print or screen? O  Will project involve dealing with small, medium, or large amounts of text? O  Narrow down typeface choices: O  Base selection on suitability for the purpose O  Editorial, Promotional or Branding?
15. Typeface Selection Factors: Characteristics O  Consider the "voice" (the emotional tone) O  What do the particular characteristics of the letterforms and type classification express? O  Note x-height: a large/substantial x-height aids readability, especially for screen
16. Typeface Selection Factors: Characteristics O  Note counter shapes: helps judge the aesthetics of the forms O  Check legibility: O  Set sample titles, headlines, subheadlines, and/or paragraphs in the typeface O  Review available text samples from online foundries and retailers
17. Typeface Selection Factors: Appearance, Versatility O  Check if font is well-spaced (font tracking) O  Check readability (try reading it to see): O  On Paper – easy, or hard, to read? O  On Screen – easy, or hard, to read? On various sizes?
18. Typeface Selection Factors: Appearance, Versatility O  Conduct Substrate & Screen tests: O  Check samples of the typeface on different weights of paper, as well as coated versus uncoated paper. O  Check typeface appearance across a variety of browsers.
19. Typeface Selection Factors: Versatility O  Is font character set deep enough to support your needs (multiple languages, bold, oblique, italics, glyphs, etc.)? O  Does typeface provide enough versatility for your project(s)? O  Consider employing a type family, for flexibility and unity. O  Ensure sufficient value contrast between typeface and background.
20. Typeface Selection Resources O  Preview/acquisition resources: O  fontsquirrel.com O  dafont.com O  wordmark.it O  Preview web fonts in live websites: webfonter.fontshop.com
21. Typeface Selection Factors: Design Concept O  Many beginning students/nondesigners choose typefaces for their novelty appeal (rather than select a suitable typeface to express the design concept) Wrong.
23. Typeface Selection Factors: Design Concept O  Be aware of what a typeface connotes (of its history and classification) O  Choosing a typeface (associated with a time period or style) carries historical and aesthetic meaning... even if you aren’t aware of it!
25. Typeface Selection Factors: Readability & Legibility O  Readability – whether an extended amount of text (article, story, book ,etc.) is easy to read O  Legibility – whether a short amount of text (headline, caption, stop sign, etc.) is instantly recognizable
26. Typeface Selection Factors: Readability O  Readability is a matter of moderation of features (an invisibility) O  Distinctive, standout features reduce readability: O  Thick strokes, very thin strokes, strong thick-thin contrast strokes O  Tall/narrow forms, short/squat forms, slanted characters O  Fancy swashes, serifs or extreme features O  Anything that overpowers the message, or distracts
28. Typeface Selection Factors: Readability & Legibility O  Too light, or too heavy – may be difficult to read (especially in smaller sizes) O  Too much thick–thin contrast – may be difficult to read (especially in smaller sizes) O  Condensed, or expanded, letters – more difficult to read (especially in smaller sizes) O  Text over busy background – difficult to read
29. Typeface Selection Factors: Readability & Legibility O  Text type (set in all capitals) – is difficult to read O  Display type – whether all caps enhance, or diminish, readability? …opinions differ O  Value contrast (type vs background) – increases readability O  Highly-saturated colors – may reduce readability O  Darker colors – tend to be read first
31. V V   §  Strong, noticeable features §  Distinctive = Distraction §  Moderate features §  Moderate: serifs, stroke weight, thick-thin contrast, x-height §  Non-Distinctive = No Distraction Most Readability(Style)= Oldstyles vs
32. V  §  Extensive studies show serif typefaces best for reading an extended amount of text §  Because serifs lead the eye from character to character? §  Because of subtle thick-thin contrast? §  Because of moderate x-height? §  To use san serif in body copy: o  Shorten line length o  Add linespace o  Use smaller size than for serif Most Readability (Serif vs Sans Serif) = Serif
33. Most Readability (CAPS vs Lowercase) = Lowercase V  §  Upper & Lowercase best choice for more than 10 words §  We read/scan in phrases (shapes) §  Lowercase provides a unique shape for each word §  Caps read as RECTANGLES §  Caps force letter-by-letter reading §  To use CAPS: o  Do so consciously o  Consider purpose of piece o  Know that readability will be compromised o  O.K. for less than 10 words
34. Most Readability (Letterspacing/Word spacing) = Depends/Case-by-case §  We read/scan in phrases (shapes) §  Too much or too little space disturbs natural reading §  No perfect rule §  Trust your eyes – wrong is wrong! §  Learn controls in applications! §  Script faces may need tighter letterspacing §  Avoid justifying text in a narrow column
35. Typeface Selection Factors: Legibility O  Legibility depends on instant recognition of words O  Sans serif letterforms usually better for legibility: O  Only for short bursts of information O  No serifs or extreme features O  Examples include: heads, subheads, street signs
36. Typeface Selection Factors: Legibility O  Legibility reduced by: O  Unusual or foreign words O  Specialty fonts O  Odd letterforms, no descenders O  Large, or small, x-height
38. Typeface Selection Factors: Legibility O  Legibility reduced by: O  Extra-heavy, or extra-thin weights O  Monospaced fonts O  Computer alterations (compressing or expanding) O  Mixing caps and lowercase or all caps
40. Typeface Selection Factors: Legibility O  Legibility reduced by: O  Extra-heavy, or extra-thin weights O  Monospaced fonts O  Computer alterations (compressing or expanding) O  Mixing caps and lowercase or all caps
42. Without interest, there is no communication. Without readability, there is merely garbled visual noise. Source: The Non-Designer’s Design Book, 2nd Ed. – Robin Williams; Graphic Design Solutions, 5th Ed. – Robin Landa; The Non-Designer’s Type Book, 2nd Ed.– Robin Williams