Typography 03 - Speaker Deck

Slide 1

Slide 1 text

Typography 03 Communication is Job One.

Slide 2

Slide 2 text

Learner Objectives Get to Know O  Typeface pairings (quality matchmaking) O  Principles of designing with type O  Typeface selection fundamentals

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Cohesive 

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Contrasting 

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Conflicting V

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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?

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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!

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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