Reading and Typography
Contributions from Bill Cowan, Byron Weber Becker, Michael Terry, and
Designing with the Mind in Mind.
Reading
2
CS349 - Reading and Typography
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
3
playing an instrument or juggling
CS349 - Reading and Typography
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 FeatureDriven
-  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
CS349 - Reading and Typography
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
CS349 - Reading and Typography
Poor Information Design Disrupts Reading
  Uncommon
  Example:
or unfamiliar vocabulary
“Your session has expired. Please reauthenticate.”
  Uncommon
non-geek terms such as:
-  penultimate
-  paradigm
6
CS349 - Reading and Typography
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
CS349 - Reading and Typography
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
CS349 - Reading and Typography
Information Buried in Repetition Disrupts Reading
  Too
much repetition hides what’s really important.
Keyboard and Documentation
Wireless
Wired
9
CS349 - Reading and Typography
English
Arabic
British
German
Western Spanish
French
Italian
Japanese
Norwegian
Swedish
Centred Text Disrupts Reading
We’re Wired for Language; not Reading
  Children
exposed to spoken language pick it up without formal
instruction.
-  Human
  Not
brain has evolved neural structures to support spoken
language
-  Particularly easy for children
true for reading: artificial skill learned by systematic
instruction and practise
-  like
10
playing an instrument or juggling
CS349 - Reading and Typography
A Lot of Reading is Unnecessary
  Many
software interfaces simply present too much text.
2002
2003
2007
11
CS349 - Reading and Typography
Designing with the Mind in Mind, p. 49
Typography
12
CS349 - Reading and Typography
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. 1440
Asian and Arab Cultures
•  Earliest dated, printed books from around 700-800 AD
•  Movable clay printing press invented ca. 1041 in China
•  By 1100-1200 AD, Arabic and Chinese libraries have
thousands of printed books
13
CS349 - Reading and Typography
Typography
  Practice
is >500 years old
  Lots
of terminology
  Lots
of tricks, tweaks to make type legible
14
CS349 - Reading and Typography
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
15
traditionally of variable width
CS349 - Reading and Typography
Terminology: Points vs. Pixels
0.351mm  1/72” (English speaking countries)
  Point:
– 
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
– 
16
and pixels often conflated
Not precisely the same
CS349 - Reading and Typography
Terminology
  Typeface
– 
Set of letters, numbers, symbols that make up a type design
– 
“Abstract shapes”
  Font
– 
  Font
– 
One weight, width, and style of a typeface
metrics
Information describing attributes such as spacing of letters
  “Typeface”
17
and “font” are often used interchangeably now
CS349 - Reading and Typography
Terminology
18
CS349 - Reading and Typography
Terminology
  Baseline
– 
Line on which most letters rest
  Leading
19
(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
CS349 - Reading and Typography
Terminology
  Descender
  Ascender
/ descent
/ ascent
  Monospacing
vs. proportional
spacing
CS349 - Reading and Typography
Kerning vs. Tracking
  Kerning
is distance
between pairs of letters
  Tracking
is average
spacing between all letters
From http://en.wikipedia.org/wiki/Kerning
21
CS349 - Reading and Typography
Ligatures
  Shapes
of some pairs of letters interfere with one another
  Ligatures
  Result
replace two adjacent letters with single printed unit
is more visually appealing
Illustration from: http://en.wikipedia.org/wiki/
Ligature_(typography)
22
CS349 - Reading and Typography
Font Attributes
  Angle
– 
Upright or slanted. Oblique, italic…
  Weight
– 
Regular vs. bold
  Size
– 
Height of sticks of type
  Style
– 
23
A particular combination of attributes over which
the typeface can vary
CS349 - Reading and Typography
Terminology
  x-height
– 
Height of letter “x”
  em-space
– 
Width of uppercase M
  em-dash
– 
Longer than hyphen (- vs. –)
  Drop
– 
24
cap
Illustration from http://
www.paratype.com/help/term/
terms.asp?code=106
Capital letter at start of section that descends several lines
CS349 - Reading and Typography
Terminology
  Serif
– 
Small, decorative stroke at end of main strokes
  Sans
– 
Serif
Lacks the small decorations
A Sans Serif font
A Serif Font
25
CS349 - Reading and Typography
26
CS349 - Reading and Typography
Late 20th Century
  Computers
  Increase
  But
arrive on scene
ease of setting type
introduce new challenges for typography
  Also
(initially) lose some of the previous conventions of visual
design
27
CS349 - Reading and Typography
Type and Computers
  First
terminals employed a 24x80 character grid
  Characters
– 
  No
Modeled after typewriter
real choice in fonts
  Convention
28
uniformly spaced
remains in terminal software programs
CS349 - Reading and Typography
High Resolution Displays
  High-res
– 
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
29
displays enabled wide variety of fonts
font
– 
Curve representation
– 
Must be converted to bitmap prior to display
CS349 - Reading and Typography
Representing Letter Forms
  Originally,
– 
Present problems in scaling to non-standard font sizes.
  Now,
30
represented as bit-maps.
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.
CS349 - Reading and Typography
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: http://www.microsoft.com/typography/TrueTypeHintingWhat.mspx
31
CS349 - Reading and Typography
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).
32
– 
Controversial
– 
Seem to be many interactions with other attributes
– 
We read best what we read most
CS349 - Reading and Typography
Screen Fonts
  Screen
fonts specifically designed for output on bitmap displays
  Examples:
– 
Verdana abc xyz 1lLiI
– 
Trebuchet abc xyz 1lLiI
  Common
33
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
CS349 - Reading and Typography
Design Rules of Thumb
  Consider
34
visual design from multiple distances
– 
Far away, nearby, reading-length
– 
Each distance should provide information
CS349 - Reading and Typography
Design Rules of Thumb
  At
a distance, should see a uniform display
  Headings
should stand out
  Whitespace
should guide eye,
separate sections
35
CS349 - Reading and Typography
Design Rules of Thumb
  Nearby,
distinct lines of text
should be visible
  At
reading distance, words
visible and clearly chunked
36
CS349 - Reading and Typography
Design Rules of Thumb
  Limit
  Do
number of fonts per page to 2-3
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
  Bullets
line spacing if you have long lines
useful for lists
CS349 - Reading and Typography
Helpful Resource
38
CS349 - Reading and Typography
Summary
  Reading
  Know
  Build
39
requires work. Support it (or at least don’t thwart it)
typographical terms
on lessons learned from print
CS349 - Reading and Typography