Typography

1
Typography

• Lisa Kleinman
• 17 September 2002
• LIS 385T

2
Definition of Typography

• Classic Layout of letters and spacing to convey
  meaning and understanding
• Modern A dynamic system of contrasts resulting
  from the relationship of the type (its color,
  form, rhythm, and style) to its background

Classic definition from www.cbbag.ca/Typography.
html Modern definition from Kahn Lenk, 1998
3
Typography in Info Architecture

• Type is a visual system
• Gives meaning and context
• Organization, labeling, navigation
• Hypertext link
• Heading
• Content information to be read by end user.
• This is some HTML code.
• Structural design of information

This is one section of information.
This information is a descriptor for the bold
text to the left.
4
Info Architecture Deliverables

• Conceptual Models
• Content Inventory and Organization
• User Flows and Scenarios
• Task Analysis
• Site Map
• Page Architecture (Wireframes)

Boxes and Arrows, Defining Information
Architecture Deliverables (www.webmasterbase.com/a
rticle/326/15)
5
Conceptual Model Example
By Noel Franus, CarbonIQ
6
Site Map Example
Designed by Chris Noessel
7
User Interface Design

• Visual structure
• Organizational landmarks
• Graphic cues and reader aids
• Differentiated information types
• Captions and annotated diagrams

Watzman, 1994
8
Page Architecture (Wireframes)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
Reading on the Web

• Legibility
• Identification of letters, words
• Readability
• Typically measured by reading comprehension and
  speed
• People are scanning the page

13
Microsoft ClearType

• Redraws each pixel to smooth out font edges
• Setting in Windows XP

www.microsoft.com/typography/cleartype
14
Xerox PARC Enhanced Thumbnails

• Improving search results

15
Applying Typographic Principles

• Serif vs Sans Serif
• Serif fonts have a stronger baseline
• Serif generally better for body text
• Depending on screen resolution, serifs may get
  lost
• Letter and Word Spacing
• We read by distinguishing patterns
• Appropriate spacing allows the eye to read over
  text easily

Watzman, 1994
16
Applying Typographic Principles

• Justified text vs Ragged right
• Justified columns distract the eye to move
  downwards instead of horizontally
• Black on White vs White on Black
• White type is usually less legible
• White text appears smaller

Watzman, 1994
17
Choosing Fonts for Web Sites

• A study of fonts designed for screen display,
  Boyarski, Neuwirth et al., CHI Proceedings, 1998
  (acm.org)
• This paper also has some good references for how
  people read on screens. See Gould, Dillon,
  Mills.
• Web typography lesson
• http//hotwired.lycos.com/webmonkey/01/45/index4a.
  html?twdesign

18
Appendix

• Detailed information about
• typography history of fonts
• and technical terms

19
History of Type Styles

• Classical/Old Style 1450-1700
• Type sets based on handwriting/calligraphy styles
• Transitional 1700-1800
• Greater contrast between thick and thin strokes
• Increased type delicacy required improved
  letterpresses
• Modern 1800-1900
• Sharp contrast between thick and thin strokes
• Hairline thin serifs
• Bauhaus/Swiss Modern 1900-1960
• Geometrically designed sans serfis
• Contemporary 1960-Present
• Development of fonts specific to purpose or
  medium (eg Adobe Postscript fonts)

20
Typography Terms (1 of 3)

• Letter Spacing
• Kerning fixes uneven spacing between letters
• Tracking adds or removes letter spacing between
  all the letters

Before Kerning
After Kerning
Type examples from Paul Baker Typography
(www.pbtweb.com)
21
Typography Terms (2 of 3)

• Word Spacing
• Leading is the vertical space between lines

Type examples from Paul Baker Typography
(www.pbtweb.com)
22
Typography Terms (3 of 3)

• Ascender - The part of some lower-case letters,
  such as a "b" or a "d" which rises above the
  x-height.
• Descender - The part of some lower-case letters,
  such as a "g" or a "q" which drop below the
  baseline.

Definitions from typoGRAPHIC (www.rsub.com/typogra
phic/)