type

Document Sample
type Powered By Docstoc
					The Joy of Typography:
An overview of typography elements and
issues




 Jennifer Bowie
Typography and Type Elements
 #1 one thing to remember:

 Typography exisits to honor content
 Typography exisits to honor content

 Typography exisits to honor content

 Typography exisits to honor content
Typography and Type Elements:
  Font Classifications
  There are four basic font classifications:
     • Serif: the oldest type, has serifs on the end of letter to
       guide reader’s eye, also has thick and thin strokes,
       considered more ―readable‖ than sans serif. Gives a more
       formal and traditional feel to documents. Good body text or
       contrast text. Serif includes Oldstyle, Modern, and Slab
       Serif categories. Examples: Times, Garamond, Georgia,
       Goudy Old Style, Book Antiqua, and many more.
     • Sans Serif: “without serif,” only about 100 years old,
       has stokes that have little to no variation in width,
       looks more modern and technical, used a body text in
       Europe. Makes a good body text or contrast text.
       Includes: Arial, Helvetica, Verdana, Tahoma,
       Century Gothic (and other Gothics), Trebuchet, and
       many more.
Typography and Type Elements:
  Font Classifications con.
   • Script: fonts that look they they are hand
     lettered, can connect or not. Should be used in
     small amounts for fancy documents (invitations),
     occasionally for headings, titles, logos, and drop
     caps. Most should never be set in long bodies of
     text. Use as a display font, or rarely a contrast.
     Includes: Comic Sans, Gigi, Brush Script (and other
     scripts), Forte, and more

   • Decorative: fun, distinctive fonts. Should never be
     used in long bodies of text. Best used as display fonts. Very
     powerful so use sparingly. Includes: Goudy
     Stout, Impact, Algerian, Juice ITC, Bauhaus 93,
     and many more.
Categories Table
Category     Larger       Structure                           Readability   Legibility   Voice-
             Category                                                                    over
Oldstyle     Serif        •Mod think/thin transitions         Very good     Good         Traditional,
                          •Diagonal stress                                               calm, formal
                          •Slanted [bracketed] serifs
Modern       Serif        •Radical think/thin transitions     Poor          Good/fair    Cold,
                          •Vertical stress                                               elegant,
                          •Serifs thin and horizontal                                    dazzling

Slab Serif   Serif        •Little/no think/thin transitions   Very good     Good         Straight-
                          •Vertical stress                                               forward,
                          •Horizontal and think slab serifs                              plain, clean,
                                                                                         athletic

Sans Serif   Sans Serif   •No/little thick/thin transitions   Good          Very Good    Modern,
                          (monoweight)                                                   technical,
                          •No stress                                                     clean,
                          •No serifs
             Script       • looks like handwriting            Often poor    Often poor   Varies
                          • Letters may connect or not                      to fair
Decorative   Decorative   •Structure varies greatly           Often poor    Often poor   Varies
                          •Fun, distinctive, strong faces                   to fair

Grunge or    Decorative   •Structure varies greatly           Often poor    Often poor   Varies
                          •Distorted, trashed,                              to fair
Distressed                schizophrenic, ugly, distinctive
Typography and Type Elements:
  General Categories
       Type is used for different things. General categories
        are:
        • body text- readable in long blocks of text and smaller sizes 9-
          12 pts for print, 12-14+ for screen. Can be Sans Serif or
          Serif fonts
        • display text- less readable and not designed to be read in
          long blocks. Used in advertising, for title or logo, and other
          display uses. Can be Script or Decorative fonts
        • contrast text- meant to contrast with your body text. Good
          for headings, subheadings, titles, and smaller blocks of text.
          Normally will be Serif or Sans Serif (opposite of body font)
          but can more more legible Script or Display fonts
Typography and Type Elements:
  Type Setting
     Leading: (space between lines) should be at least 120%
      for serifed fonts, and 135-140% for sans serif.
      • greater is better than lesser for body text
      • display fonts can handle little or even negative leading
      • typefaces with small x-heights do not need greater leading, but
        those with large may
      • leading should increase proportionally as line length increases
      • Auto leading for most programs is ~20%
                                                        Afford, old jiggly quarrel
Leading Examples                                        panhandle that farm

Afford, old jiggly quarrel panhandle that farm          gonna.Soap hayseed her
gonna.Soap hayseed her simple showed gal
fer.If chitlins rat, lament shed jig landlord           simple showed gal fer.If
frontporch drinkin' cold her sherrif salesmen,
that.Rat, mashed city-slickers frontporch go em
knickers jiggly buckshot neighbor's                     chitlins rat, lament shed jig
coonskin.Ain't hootch jail poor skinny shiney
sam-hell greasy rockinchair, rat marshal ya
come caboose.                                           landlord frontporch drinkin'
0.5 leading                                             cold her sherrif salesmen
                                                        that.Rat, mashed city-slickers.
1.5 leading

Afford, old jiggly quarrel panhandle that farm gonna.Soap hayseed her simple showed
gal fer.If chitlins rat, lament shed jig landlord frontporch drinkin' cold her sherrif
salesmen, that.Rat, mashed city-slickers frontporch go em knickers jiggly buckshot
neighbor's coonskin.Ain't hootch jail poor skinny shiney sam-hell greasy rockinchair,
rat marshal ya come caboose.
Typography and Type Elements:
     Justification
   Justified left: flushed left and jagged right, this is the most
    readable for long segments of body text

        Justified right: flush right, jagged left, highly unreadable,
                                                            use rarely.

   Justified: flush left and right so the text forms a box. Can
    cause rivers in the text.

        Centered: ragged both sides. Use rarely and in small
                     amounts, very unreadable.
Rivers?
 This is an example of fully justified text. Can you find the
 rivers:

 Neo odio tation lobortis ne wisi nimis duis elit ludus ratis
 consequat.Diam et fere nulla, caecus sagaciter in abbas
 importunus ad molior.Wisi commodo aliquam iriure si eros
 duis aliquip quidem, velit reprobo letalis, volutpat
 consequat.Neque caecus enim genitus et ingenium tation,
 vereor te caecus facilisi occuro.Adipiscing cogo regula quis esse
 gemino, mauris commoveo ventosus diam praesent, nutus
 praesent comis.Mauris aliquip olim quibus ex aptent ut nullus
 foras, tation ullamcorper, ulciscor, nostrud.Enim ad voco capto
 suscipit accumsan ex.Saepius vereor vero tamen caecus melior
 mara blandit delenit.Bis, nibh adsum duis lucidus utrum
 interdico tation wisi epulae ideo, secundum.Praesent neo
 consequat damnum incassum, pneum voco.
Vocab:

   Type family: a generic term for all the faces in a family
     • Example: Franklin Gothic, which includes Franklin Gothic , Franklin
       Gothic Demi, Franklin Gothic Heavy, and variations like italics
   Typeface or face: a specific category of type, includes all
    variations within that category like bold and italics. So, the
    typeface Franklin Gothic would include all variations of that
    particular face including italics and bold
   Font: specific type in a type family with specific characteristics,
    like bolding or italic. Like Franklin Gothic Heavy Shadow
    or Franklin Gothic italics
Vocab:

   Type size: measured in points
   Point: 1/72 of an inch
   Kerning: space between letters
Anatomy Vocab:




image from:
http://graphicdesign.spokanefalls.edu/tutorials/process/type_basics/
default.htm
More Vocab

   Stress

                             Oblique, or angled, stress     Semi-oblique stress   Vertical stress




   Weight: thickness of strokes, area to contrast
Enim ad voco capto suscipit accumsan                      Enim ad voco capto suscipit
ex.Saepius vereor vero tamen caecus melior                accumsan ex.Saepius vereor vero
mara blandit delenit.Bis, nibh adsum duis                 tamen caecus melior mara blandit
lucidus utrum interdico tation wisi epulae                delenit.Bis, nibh adsum duis
ideo, secundum.Praesent neo consequat                     lucidus utrum interdico tation
damnum incassum, pneum voco.                              wisi epulae ideo, ecundum.
                                                          Praesent neo consequat damnum
                                                          incassum, pneum voco.
Even More Vocab
 Italics: Right slanted flowing for of a face, looks more like
  handwriting
 Roman: Normal non-slanted, straight up and down style of a
  face
 High-ratio and low-ratio typefaces: based on ratio of x-height to
  capital letters. High-ratio is a high x-height, low-ratio is low
 Width: length of letter
   • Monospaced fonts: Each character
      (letter) has the same width Courier is
      one example
   • Proportional fonts: different letters take up different
      amounts of space– like the i and the m. Goudy Old Style is
      one example, but most fonts are like this
 Line quality: includes thick/thinness of lines and whether lines
  vary in width or are constant
 Clarity: legibility— ―ease with which readers can pick up
  information in the text‖ Kostelnick & Roberts)
   • Example: good clarity poorer clarity
Yet More Vocab
   Readability: how easy reading extended amounts of text is, such as
    paragraphs of text. Important for basal/body text. If the typeface is
    noticeable is it less readable. The Crystal Goblet theory prefers readable
    faces.
   Legibility: how instantly recognizable short bursts of text are. Important for
    headings, titles, signs.
   Usability: measure of how well readers can use a document to complete a
    task. Includes both legibility and readability.
   Concordant Relationship: only use one face with limited variations in size,
    weight, and style. Creates a harmonious, sedate, and even dull look.
   Conflicting Relationship: combination of similar typefaces, often from the
    same category, and style, size, and weight. Similarities are distributing
    because they are not different or similar enough. Looks like a mistake and is
    sloppy.
   Contrasting Relationship: combination of very different typefaces, from
    different categories, and different styles, sizes, and weights. Result is clearly
    distinct differences and a visually appealing and exciting design.
Contrasts Types
   Size: big vs. little, make it obvious
   Weight: Contrast based on weight (thickness of
    strokes), creates value differences
   Structure: how built, includes thick/thin
    transitions and stress, contrast different
    categories
   Form: Shape of letters, contrasts include all
    caps vs. regular, italics/script vs. roman
   Direction: direction of all type elements, can be
    vertical, horizontal, or slanted. Contrast long
    lines with short, columns and rows,…
                      Type
            TypeType
Have fun and Design well
    The End

    Information from Sims 10, Guark & Lannon 8, and Web
    Typography, Kostelnic & Roberts



     Jennifer Bowie

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:3
posted:9/7/2011
language:English
pages:18