Scribd Logo
Upload

Welcome to Scribd!

  • 152 views

    Human Computer Interaction (HCI) : Lectures Taken From

    Uploaded by

    Iam developer
    This document discusses typography and factors that influence the legibility of text. It covers topics such as serif vs. sans serif fonts, appropriate font sizes, line spacing, line length, justification, overall layout, and use of typographic distinction. Key recommendations include using serif fonts for body text and sans serif for headings, 10-12pt font sizes, 2pt line spacing, 60 character line length for books and 30 for newspapers, justified text with hyphenation, a consistent grid-based layout, and ample margins.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    Human Computer Interaction (HCI) : Lectures Taken From

    Uploaded by

    Iam developer
    152 views19 pages
    This document discusses typography and factors that influence the legibility of text. It covers topics such as serif vs. sans serif fonts, appropriate font sizes, line spacing, line length, justification, overall layout, and use of typographic distinction. Key recommendations include using serif fonts for body text and sans serif for headings, 10-12pt font sizes, 2pt line spacing, 60 character line length for books and 30 for newspapers, justified text with hyphenation, a consistent grid-based layout, and ample margins.

    Original Title

    HCI Lec 19 Typography

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses typography and factors that influence the legibility of text. It covers topics such as serif vs. sans serif fonts, appropriate font sizes, line spacing, line length, justification, overall layout, and use of typographic distinction. Key recommendations include using serif fonts for body text and sans serif for headings, 10-12pt font sizes, 2pt line spacing, 60 character line length for books and 30 for newspapers, justified text with hyphenation, a consistent grid-based layout, and ample margins.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    152 views19 pages

    Human Computer Interaction (HCI) : Lectures Taken From

    Uploaded by

    Iam developer
    This document discusses typography and factors that influence the legibility of text. It covers topics such as serif vs. sans serif fonts, appropriate font sizes, line spacing, line length, justification, overall layout, and use of typographic distinction. Key recommendations include using serif fonts for body text and sans serif for headings, 10-12pt font sizes, 2pt line spacing, 60 character line length for books and 30 for newspapers, justified text with hyphenation, a consistent grid-based layout, and ample margins.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 19

    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

    You might also like