Typography. Jeff Avery

Transcription

1 Typography Jeff Avery

2 Source Chapter 6 Designing with Mind in Mind by Jeff Johnson

3 We re Wired for Language; not Reading Children exposed to spoken language pick it up without formal instruction. Human brain has evolved neural structures to support spoken language Particularly easy for children By adolescence, language acquisition becomes much more difficult, and required practice (like learning any skill!) Not true for reading! We have no innate faculty for learning to read. Artificial skill learned by systematic instruction and practice (like playing an instrument, juggling, or most other skills)

4 The Importance of Patterns Learning to read requires training our brains to recognize patterns. We innately recognize lines and basic shapes, but other patterns are learned: -> lines and shapes form characters ( a, b, c ) -> characters form morphemes (packets of meaning, like go, ing ) -> morphemes combine to form words ( go + ing = going ) -> words combine to form phrases or sentences ( going + home ) -> sentences combine to form paragraphs ( I am going home )

5 Feature-Driven vs. Context-Driven Reading How do we recognize patterns? Two processes: Feature-Driven Bottom-up process: combine low-level features into more complex features Some parts are innate in humans; some parts learned With practice, can become automatic Context-Driven Top-down process: work from the gist of a paragraph or sentence down to the meanings of individual parts. Works in parallel with Feature- Driven Less likely to become automatic Context-Driven Examples: Mray had a ltilte lmab, its feclee was withr as sown. And ervey wehre taht Mray wnet, the lmab was srue to go. Twinkle, twinkle, little star, how I wonder what you are.

6 Feature-Driven vs. Context-Driven Reading Which type of reading is preferred? 70 s: believed top-down was faster, due to redundancies in language Remember speed-reading? Based on the assumption that expert readers were mostly context-driven Recent empirical studies: most efficient is reading based on features, bottom-up. Context (is) important, but it s a more important aid for the poorer reader who doesn t have automatic context-free recognition instantiated. (Boulton, 2009) Context-driven reading can also be triggered by poor presentation of information, or interruptions

7 Poor Information Design Disrupts Reading Careless or poor presentation of information prevents people from using automatic processes to read. Uncommon or unfamiliar vocabulary Example: Your session has expired. Please reauthenticate. Uncommon non-geek terms such as: penultimate paradigm obfuscate

8 Difficult Scripts and Typefaces Disrupts Reading Bottom-up, context-free, automatic reading is based on fast recognition of letters and words from visual features. FOUR SCORE AND SEVEN YEARS AGO OUR FATHERS BROUGHT FORTH ON THIS CONTINENT A NEW NATION, CONCEIVED IN LIBERTY, AND DEDICATED TO THE PROPOSITION THAT ALL MEN ARE CREATED EQUAL. Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

9 Difficult Scripts and Typefaces Disrupts Reading Bottom-up, context-free, automatic reading is based on fast recognition of letters and words from visual features. blog.slideshare.net Old version of Federal Reserve Bank s mortgage calculator. Image from Designing with the Mind in Mind.

10 Information Buried in Repetition Disrupts Reading Too much repetition hides what s really important.

11 Centred Text Disrupts Reading (Johnson)

12 Centred Text Disrupts Reading (Johnson)

13 A Lot of Reading is Unnecessary Many software interfaces simply present too much text Designing with the Mind in Mind, p. 49;

14 Typography CS 349 is super awesome! CS 349 is super awesome! CS 349 is super awesome! CS 349 is super awesome! CS 349 is super awesome! CS 349 is super awesome! CS 349 is super awesome!

15 History Before Printing Presses (in Europe) Manuscripts prepared with ink and nib Lots of care in presentation Artwork tightly integrated with text Could take 20 years to transcribe a Bible Books available only to the wealthy China: Earliest dated, printed books using block printing from around AD Movable clay printing press invented ca By AD, Arabic and Chinese libraries have thousands of printed books Europe: Gutenberg creates movable type ca. 1440

16 Typography Typography is the art and technique of arranging type to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). Practice is >500 years old Lots of terminology Lots of tricks and tweaks to make type legible

17 Terminology Glyph Lowest divisible unit For movable type, it is a stick the letter, number, or symbol Each stick has a point size* Total height of stick, not the letter Sticks are traditionally variable width * Point: 0.351mm = 1/72 (English speaking countries) 0.376mm elsewhere, and has had different values over time Not to be confused with pixel: the size of one dot on the screen. This is purely a property of the display, and varies with technology.

18 Terminology Typeface Font The set of glyphs, letters, numbers, or symbols that make up a type design Abstract shapes One specific weight, width, and style of a typeface Font metrics Information describing attributes such as spacing of letters Typeface and font are often used interchangeably, though they mean different things!

19 Terminology

20 Terminology Baseline Line on which most letters rest Leading (slugs) vs. line spacing Leading is spacing between lines of text Line spacing is sum of leading and point size Can be seen as distance between baselines

21 Terminology Descender / descent Ascender / ascent Monospacing vs. proportional spacing

22 Kerning vs. Tracking Kerning is distance between pairs of letters Tracking is average spacing between all letters From

23 Ligatures Shapes of some pairs of letters interfere with one another Ligatures replace two adjacent letters with single printed unit Result is more visually appealing Illustration from:

24 Font Attributes Angle Upright or slanted. Oblique, italic Weight Size Style Regular vs. bold Height of sticks of type A particular combination of attributes over which the typeface can vary

25 Terminology x-height Height of letter x em-space Width of uppercase M em-dash Longer than hyphen (- vs. ) Illustration from term/terms.asp?code=106 Drop cap Capital letter at start of section that descends several lines

26 Terminology Serif Small, decorative stroke at end of main strokes Sans Serif Lacks the small decorations A Sans Serif font A Serif Font

27

28

29 Late 20th Century Computers arrive on scene Increase ease of setting type But introduce new challenges for typography Also (initially) lose some of the previous conventions of visual design

30 Type and Computers First terminals employed a 24x80 character grid Characters uniformly spaced modelled after a typewriter No real choice in fonts Convention remains in terminal software programs. Programmers continue to love monospaced fonts.

31 Computer Issues Type is traditionally metal sticks What issues arise when moving to bitmapped displays?

32 High Resolution Displays High-res displays enabled wide variety of fonts Discrete output device Fonts must be rasterized Two general types of fonts Bitmap font Handcrafted font for bitmap display Can t be properly scaled Outline font Curve representation Compact storage Must be converted to bitmap prior to display Source: TrueTypeHintingWhat.mspx

33 Bitmapped Font Issues Bitmap display has limited resolution, which causes problems. Example: Small fonts poor representations Need hints Example: Serifs Not enough precision to render them at smaller sizes Edges get blurred because of anti-aliasing Not as crisp Long-standing conventional wisdom says that serif fonts have better readability at high resolutions (ie print). Controversial Seem to be many interactions with other attributes We read best what we read most Source:

34 Screen Fonts Screen fonts specifically designed for output on bitmap displays Examples: Verdana abc xyz 1lLiI Trebuchet abc xyz 1lLiI Common features Wide letter spacing Tall x-heights Uniform stroke thicknesses Commonly confused letters (i j l I J L 1) easily distinguishable Often sans serif Greater width, spacing help out at low resolution when not a lot of pixels to spare (which improves readability on bitmap displays)

35 Screen Fonts Source:

36 Design Rules of Thumb: For large amounts of text Build on our history of printing! Consider visual design from multiple distances Far away, nearby, reading-length Each distance should provide information

37 Design Rules of Thumb At a distance, should see a uniform display Headings should stand out Whitespace should guide eye, separate sections

38 Design Rules of Thumb Nearby, distinct lines of text should be visible At reading distance, words visible and clearly chunked

39 Design Rules of Thumb Limit number of fonts per page to 2-3 Do not use similar fonts on same page Use distinct fonts to guide reader to different sections Use white space, headings to delineate areas Use short lines of text (eg, multiple columns) Increase line spacing if you have long lines Bullets useful for lists

40 Helpful Resource

41 Summary Reading requires work. Support it (or at least don t thwart it) Know typographical terms Build on lessons learned from print