Reading and Typography. Contributions from Bill Cowan, Byron Weber Becker, Michael Terry, and Designing with the Mind in Mind.

Transcription

1 Reading and Typography Contributions from Bill Cowan, Byron Weber Becker, Michael Terry, and Designing with the Mind in Mind.

2 Reading 2

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 Not true for reading: artificial skill learned by systematic instruction and practise - like playing an instrument or juggling 3

4 Feature-Driven vs. Context-Driven Reading 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. 4

5 Feature-Driven vs. Context-Driven Reading Which type of reading is preferred? - 70 s: believed top-down was faster, due to redundancies in language - 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) 5

6 Poor Information Design Disrupts Reading Uncommon or unfamiliar vocabulary Example: Your session has expired. Please reauthenticate. Uncommon non-geek terms such as: - penultimate - paradigm 6

7 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. 7

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. blog.slideshare.net Old version of Federal Reserve Bank s mortgage calculator. Image from Designing with the Mind in Mind. 8

9 Information Buried in Repetition Disrupts Reading Too much repetition hides what s really important. Keyboard and Documentation Wireless English Wired Arabic British German Western Spanish French Italian Japanese Norwegian Swedish 9

10 Centred Text Disrupts Reading 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 Not true for reading: artificial skill learned by systematic instruction and practise - like playing an instrument or juggling 10

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

12 Typography 12

13 Printing in Europe Pre-Gutenberg - Manuscripts prepared with ink and nib - Lots of care in presentation - Artwork, illustrations tightly integrated with text - Could take 20 years to transcribe a Bible - Books available only to the wealthy Gutenberg creates movable type ca Asian and Arab Cultures Earliest dated, printed books from around AD Movable clay printing press invented ca in China By AD, Arabic and Chinese libraries have thousands of printed books 13

14 Typography Practice is >500 years old Lots of terminology Lots of tricks, tweaks to make type legible 14

15 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 traditionally of variable width 15

16 Terminology: Points vs. Pixels Point: 0.351mm apple 1/72 (English speaking countries) 0.376mm elsewhere Has had different values in the past Pixel: The size of one dot on the screen A property of the display, which varies Original Mac was deliberately designed with 1 pixel = 1/72 Current pixel sizes are closer to 1/100 Points and pixels often conflated Not precisely the same 16

17 Terminology Typeface Set of letters, numbers, symbols that make up a type design Abstract shapes Font One weight, width, and style of a typeface Font metrics Information describing attributes such as spacing of letters Typeface and font are often used interchangeably now 17

18 Terminology 18

19 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 19

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

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

22 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: Ligature_(typography) 22

23 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 23

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

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

26 26

27 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 27

28 Type and Computers First terminals employed a 24x80 character grid Characters uniformly spaced Modeled after typewriter No real choice in fonts Convention remains in terminal software programs 28

29 High Resolution Displays High-res displays enabled wide variety of fonts But a discrete output device Fonts must be rasterized Two general types of fonts Bitmap vs. outlines Bitmap font Handcrafted font for bitmap display Can t be properly scaled Outline font Curve representation Must be converted to bitmap prior to display 29

30 Representing Letter Forms Originally, represented as bit-maps. Present problems in scaling to non-standard font sizes. Now, stored as mathematical curves. Easy to scale to non-standard sizes. Easy to adapt to higher resolutions (printers). Compact storage. Difficult to map onto a bit-map display. 30

31 Computer Issues Bitmap display causes problems Limited resolution Example: Small fonts When fonts are small, can result in poor representations Need hints Example: Serifs Source: 31

32 Computer Issues: 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 32

33 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 33

34 Design Rules of Thumb Consider visual design from multiple distances Far away, nearby, reading-length Each distance should provide information 34

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

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

37 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 meanings for each font 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

38 Helpful Resource 38

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