Human Computer Interaction

(HCI)
Lectures taken from [1]
 Visual Design and Typography
Typography: the style and appearance of text
Font Sizes
• Font sizes are traditionally expressed in
printers’ points (pt):
1 pt = 1/72 inch = 0.35 mm
 Typography
• Serif and Sans Serif Fonts
• A serif is a slight projection or embellishment at the end of a letter stroke.
• Examples of serif fonts include Times Roman and Georgia.
• A sans serif (French = without serif) font does not have such embellishments.
• Examples of sans serif fonts include Arial, Helvetica, and Verdana.
• When reading passages of text on paper (very high resolution), serif text may be easier
to read than san serif, but the evidence is not conclusive [Schriver, 1997, Chapter 5].
• Advice: Use serif for body text and san serif for headings (Scott Klemer)
• If you’re putting down a long block of text, It’s best to use a typeface that many people
will be familiar with; and if you’re working online.
• On the other hand, if you’re making a logo or a sign, or something that’s short and
intended to be dramatic, then you probably want to use something a little bit funkier as
your typeface —something that’s going to catch attention and be unique, memorable.
(Scott Klemer)
• Typefaces that have a higher x-height will be easier to read at smaller point sizes and on
low resolution devices like most screens (Scott Klemer)
Typography
Factors Influencing the Legibility of Text

Font Type
• Proportional fonts consume less space and are
more legible than fixed width fonts.
• Example:
Factors Influencing the Legibility of Text
Font Size
• 10 pt is legible, 11 pt or 12 pt is better.
• The distinction between font sizes should be at least 2
pt. [smaller changes cannot be discriminated by the eye]
• For example, use:
• 12 pt for flowing text
• 10 pt for subscripts and footnotes
• 14 pt for section headings
• 16 pt or larger for titles
Example
 Case
• Mixed case is more compact and legible than
all upper case.
• [all upper case slows reading speed by about
12%]
• Word recognition is based partly on word
shape. Lower and mixed case words have
more irregular and thus more recognizable
word shapes
Case
Character, Word, and Line Spacing

• Character spacing depends largely on font.

• Word spacing width
• Line spacing 2 pt.
Spacing
 Line Length
• 10 words (60 chars.) per line for books.
• 5 words (30 chars.) per line for newspapers.
 Justification
• Justification is the insertion of extra space within a line to create flush left
and right margins.
• Justification without hyphenation slows reading due to gaps between
words.
• Use either flush left, or justified with hyphenation.
Justification
 Overall Text Environment

Maximum of:
• two typefaces,
• two slants (normal, italic),
• two weights (medium, bold),
• and four sizes (title, subtitle, text, footnote).
 Layout
• Use an underlying spatial grid to ensure consistent location and extent of
text, columns, titles, illustrations, etc.
Margins
• Avoid “word processor syndrome” (text right up to edge of the window)!
leave ample margins.
 Typographic Distinction
• Use typographic distinction such as bold,
italics, font change, etc. only if it conveys extra
information.
 References
[1] Lecture Notes of Prof. Keith Andrews,
Available at: www.iicm.tugraz.at/hci