Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

JDF_Typography

VIEWS: 7 PAGES: 38

									Typography




 Vocabulary and Guidelines
Acknowledgements

• The presentations and assignments have
  been develop by the Georgia Tech HCI
  faculty over a period of years, and
  continue to evolve. Contributors include:
            – Gregory Abowd, Jim Foley, Diane Gromala,
              Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris
              Shaw, John Stasko, Bruce Walker
• Feedback is most welcome!

Fall 2003                   CS / PSYCH 4750 Foley                 2
Agenda

•   Font                        •   Linespacing
•   Case                        •   Alignment
•   Style                       •   Line length
•   Size                        •   Margins
•   Letterforms                 •   Hierarchy
•   Letterspacing               •   Examples




Fall 2003           CS / PSYCH 4750 Foley         3
Fonts

• Serif font – readability for long, extended text
• Sans serif font – legibility for headlines,
  headings, captions
      (both are variable spaced)
•Monospace         font




Fall 2003            CS / PSYCH 4750 Foley           4
Font Guidelines

• Use serif for long, extended text; sans serif for
  “headlines”
• Use 1-2 fonts/typefaces (3 max)
• Use of normal, italics, bold is OK
• Never use bold, italics, capitals for large sections
  of text
• Use 1-3 point max
• Be careful of text to background color issues

Fall 2003           CS / PSYCH 4750 Foley            5
Font Examples

Use regularly                    Don’t use regularly

Serif: Times,                    Decorative: Comic Sans,


Sans serif: Arial,               Script:
  Verdana
                                 Monospaced:
                                  Courier,Lucida

Fall 2003            CS / PSYCH 4750 Foley             6
Fontitis

• Too many fonts is bad




Fall 2003       CS / PSYCH 4750 Foley   7
Fontitis ctd.

• Unless for artistic effect




Fall 2003         CS / PSYCH 4750 Foley   8
Case

• UPPER and lower case
• AVOID HEAVY USE OF ALL UPPER CASE!!
• Studies have found that mixed case
  promotes faster reading
      HOW MUCH FUN IS IT            How much fun is it
      TO READ ALL THIS TEXT         to read all this text
      WHEN IT’S ALL IN              when it’s all in
      CAPITALS AND YOU              capitals and you
      NEVER GET A REST. USE         never get a rest. So
      ALL CAPS FOR HEADLINES        use lower case for
      AND HEADINGS                  regular text
Fall 2003               CS / PSYCH 4750 Foley               9
Style

• Plain text
• Italic text
• Bold text

• (Purists consider these as different fonts)



Fall 2003        CS / PSYCH 4750 Foley          10
Size

• Type is measured in points
                10 Point Times

                12 Point Times

                14 Point Times

                16 Point Times
                18 Point Times
                20 Point Times

                24 Point Times



Fall 2003       CS / PSYCH 4750 Foley   11
Size

• Type sizes are not standard, but are
  based on old measurements of the piece
  of metal




• So it appears to be larger

Fall 2003        CS / PSYCH 4750 Foley     12
Size Guidelines for Legibility

• Characters must subtend 10-20 minutes
• 10 minutes:
            – 0.1” character at 36”
            – 0.05” character at 18”
            – 70-90% recognition accuracy
• 20 minutes:
            – 0.1” character at 18”
            – 0.05” character at 9”
            – 96-98% recognition accuracy

Fall 2003                 CS / PSYCH 4750 Foley   13
Size Guidelines for Legibility

• Relationship between number of scan
  lines per character and recognition
  accuracy
• 6 lines       79-88%
• 8 lines       92-94%
• 10 lines 97-99%


Fall 2003      CS / PSYCH 4750 Foley    14
Letterforms

• Because of optical illusions, spacing between
  letterforms are not standard or one
  measurement, but are adjusted according to the
  shape of the letter (kern pairs).




Fall 2003         CS / PSYCH 4750 Foley        15
Letterforms




Fall 2003     CS / PSYCH 4750 Foley   16
Letterforms




Fall 2003     CS / PSYCH 4750 Foley   17
Letterforms




Fall 2003     CS / PSYCH 4750 Foley   18
Letterforms




Fall 2003     CS / PSYCH 4750 Foley   19
Letterspacing – Kerning

• Because of optical illusions, spacing
  between letterforms are not fixed, but are
  adjusted according to the shapes of the
  two letters, which are called kern pairs.




Fall 2003       CS / PSYCH 4750 Foley      20
 Letterspacing – Kerning, Tracking

• The space between TWO letters is kerning




• The space AMONG more than 2 letters is
  tracking
Fall 2003       CS / PSYCH 4750 Foley      21
Letterspacing

• Strive for regular spacing and a uniform texture




Fall 2003          CS / PSYCH 4750 Foley         22
Letterspacing – Mono and Variable

• Monospaced fonts: typewriters, not very
  legible:
      The quick brown fox jumped over the lazy dog.


• Variably spaced fonts: spaces between
  each letterform varies with the shape of
  that letterform (called “kerning pairs”).
  Also called proportional spacing:
      The quick brown fox jumped over the lazy dog.


Fall 2003                   CS / PSYCH 4750 Foley      23
Letterspacing – Examples

•The quick brown fox
 jumped over the lazy
 dog.

• The quick brown fox jumped
  over the lazy dog.
Fall 2003   CS / PSYCH 4750 Foley   24
Letterspacing at End of Sentences

• Use ONE space between sentences.

• Two spaces are a TYPEWRITING convention
  only. In the digital realm, the space between
  sentences is variable, and is calculated to work
  with one space. Using two spaces between
  sentences in the digital realm creates “rivers” of
  white space that impede legibility.


Fall 2003           CS / PSYCH 4750 Foley          25
Linespacing (aka Leading)

• Line spacing is measured in points from
  baseline to baseline

• It is usually 20% larger than the point size
  of text (10 point type generally defaults to
  12 point leading)


Fall 2003        CS / PSYCH 4750 Foley      26
Linespacing Guidelines

• More line spacing generally results in greater
  legibility, until the lines seem to be separate
  lines.


    Lines of text are generally       Lines of text are generally       Lines of text are generally more
    more legible with more line
    spacing than defaults, until      more legible with more line
    they appear to separate into                                        legible with more line spacing
    distinct lines. When squinting,   spacing than defaults, until
    the paragraph should appear
    as regular and “gray” texture.    they appear to separate into      than defaults, until they appear

                                      distinct lines. When squinting,
                                                                        to separate into distinct lines,
                                      the paragraph should appear

                                      as regular and “gray” texture.    like these lines here. When


Fall 2003                             CS / PSYCH 4750 Foley                                                27
Line Spacing & Alignment – Arabic




Fall 2003     CS / PSYCH 4750 Foley   28
Alignment

• Justified type results in irregular spacing between
  words, or between words and letters, for mono-spacing
  without hyphenation. It also results in “rivers” of white
  space.
• Both impede legibility.

 Justified type results in irregular spacing
 between words, or between words and letters.
 It also results in “rivers” of white space.
 both      impede      legibility. Newspapers
 historically only justify type for reasons of
 tradition and visual real estate ($ per inch).




Fall 2003                             CS / PSYCH 4750 Foley   29
Alignment
• Flush left, ragged right most legible to western
  eyes.
• Centered type (except in small amounts)
  generally impedes legibility.
        Justified type results in irregular            This is because most of us (Western
     spacing between words, or between               cultures) are trained to read left to right,
      words and letters. It also results in           and because the shape created on the
     “rivers” of white space. Both impede            left side becomes a figure or shape that
       legibility. Newspapers historically            competes for attention (figure/ground).
         only justify type for reasons of                The shape of the paragraph itself
    tradition and visual real estate ($ per                dominates, impeding legibility.
    inch). Try writing your thesis this way
            and see how far you get.




Fall 2003                               CS / PSYCH 4750 Foley                                       30
Line length

• For text, the optimum line length is 55 –
  75 characters per line (counting spaces).
    These three sample text
    blocks displayed in 12
    pt. Times show a line
    length of ~25 characters
    wide, ~65 characters
    wide and ~104
    characters wide.


    These three sample text blocks displayed in 12 pt. Times show a
    line length of ~25 characters wide, ~65 characters wide and ~104
    characters wide.



    These three sample text blocks displayed in 12 pt. Times show a line length of ~25 characters wide, ~65
    characters wide and ~104 characters wide.


Fall 2003                                      CS / PSYCH 4750 Foley                                          31
   Margins
                                                                 Here is a some
                     ALWAYS provide a margin                     flush-left text
                     Lack of margins interfere with              that does not
                       readability and legibility                have a margin
                                                                 on the right
                                                                 side. Not right


                ALWAYS provide a margin                      Here is a some
                                                             flush-left text
                Lack of margins interfere with               that does have
                  readability and legibility                 a margin on
                                                             the right. Much
                                                             better
Images from http://www.geocities.com/Paris/Louvre/1680/bw.html
   Fall 2003                   CS / PSYCH 4750 Foley                     32
Typographical Hierarchy
• Provides structure based on similarity

  This is a level 1 heading
  This is a level 2 heading
  This is a level 2 heading
  This is a level 3 heading

  This is a level 2 heading

Fall 2003                 CS / PSYCH 4750 Foley   33
Typographical Hierarchy plus
Indentation

• 2 types of similarity - better
            This is a level 1 heading
               This is a level 2 heading
               This is a level 2 heading
                  This is a level 3 heading

               This is a level 2 heading
Fall 2003               CS / PSYCH 4750 Foley   34
Wow




                      Yuk

Fall 2003   CS / PSYCH 4750 Foley   35
More Wow




Fall 2003   CS / PSYCH 4750 Foley   36
Font Control




Fall 2003      CS / PSYCH 4750 Foley   37
                                       Which do you prefer?
   Example

                 CRAFTS AND GAMES               Crafts and Games
                   ARTS FESTIVAL
              OF ATLANTA AND DECATUR
                                                Arts Festival
                                                Of Atlanta and Decatur
SEPTEMBER 19-24                                            September 19-24

                                                           Come and Enjoy!
         COME AND ENJOY




                      Applies lots of these principles
    Fall 2003                      CS / PSYCH 4750 Foley                     38

								
To top