Typography

• Choosing appropriate typeface is important to good design, effective communication.
  • Type breaks the white or background color of the paper or Website into various shapes.
  • Spaces between letters, words and lines of type contribute to design, readability, texture, tone.

Type terminology

• Typeface: A visual symbol for letters and characters on the printed page.
  • Characters: letters, numerals, punctuation marks, symbols $, %, &, etc.
  • Uppercase or caps (uc) and lower case (lc).
    • Text normally is clc (caps & lower case).

  

• x-height--depth of lowercase center body letters (a, r, x)
• Ascender--Stem of letters reaching above x-height, such as b, d, k.
• Descender--Stem of letters reaching below x-height, such as p, q, y.
• Baseline--Bottom of  x-height.
• Counter--white space within a letter, such as a or p (contrasted with l or i).
• Kerning--adjusting space(s) between letters.
• Hairline--the thin stem of a letter in some typefaces, especially Modern Roman.
  • Also thin line for rules, borders, less than 1/2-point.
• Serif--finishing stroke at the ends of the stems of letters in some typefaces
  • A, E, T, l, i.
• Sans serif--Sans = without. No finishing stroke at end of stems. 
  • A, E, T, l, i.
    
    

Typography Organization

• Type is organized into groups or styles; families; fonts and series.
  • Groups--based on historical development.
    • Text
    • Oldstyle Roman
    • Transitional Roman
    • Modern Roman
    • Sans Serif
    • Square-Serif
    • Script and Cursive
    • Novelty
      
      

Groups

• Text
  • Oldest, like calligraphy.
• Used by German monks in Gutenberg's time.
• Difficult to read in all caps or in several lines.
• Used on newspaper banners, specialty announcements, diplomas). 
• Old English Text:
  
  
  
• Oldstyle Roman
  • Lighter, more elegant.
• Designed in Italy, France and Germany.
• Variation in thickness of strokes.
• Dramatic serifs but retained angles similar to pen strokes, especially on serifs.
  • Serifs slant or curve and extend outward at top of T
    
    and top and/or bottom of E
    
  • Serif slanting or curved and terminates in point.
• Slight tilt to round letters.
• Little contrast: thin to thick.
• Variations of strokes make it legible (readable), especially for textual matter. 
• Bookman Old Style. 
  
• Garamond (AGaramond).
  
• Hallmarks of Old Style:
  • Little contrast between strokes
  • Swells of round letters tilt
  • Ascender serifs tilt
  • Serifs angle from stem & end in a point

  
  
  

• Transitional Roman
  • Type in transition from Oldstyle to Modern.
    • Little contrast.
    • Angle of thin strokes not as pronounced.
      
    • Baskerville is a transitional.
      
    • Times is a transitional Roman typeface. E S
      
      
      
      
      
• Modern Roman
  • Designs date from late 18th century.
• Straight, thin, unbracketed serif.
• High contrast: thick v. thin strokes.
  
• Bodoni is a Modern Roman typeface. 
  

 

• Transitional / Modern Roman

• Square Serif (also block type, slab serif)
• Heavier, bolder serif, squared serif.
• Clarendon designed in 1845.
• Modern slab serifs: Symie and Beton Extra Bold.
• Playbill:
  
  
  
  
• Sans Serif (also gothic or grotesque)
  • 1920s. First used for poster ads.
  • Uniform strokes, without serif.
  • Often preferred for display and headline type.
  • Best for Web
    
  • Avant Garde.
    
  • Century Gothic.
    
  • Geneva.
    
  • Verdana

   Verdana E S A R T O

 

• Serif (Modern & Oldstyle) v. Sans Serif
  
  
  

 

 

• Script/Cursive

• Emulates handwriting.
• Script letters appear to be joined. 
  
  • Brush Script MT.
    
  • Mistral.
    
  • Swing.
    
    
    
• Cursives do not appear to join. 
  • Nadianne.
    
    
  • Monotype Corsiva.
    
    
  • Apple Chancery.
    
    
    
    
• Novelty
  • Not precise.
• Creates sense of mood, time or decoration.
  
  
  • Braggadocio.
    
    
  • Britannic Bold.
    
    
  • Colonna MT. 
    
    
  • Comic Sans MS
    
    
  • Matura MT Script Capitals. 
    
    
  • Omega.
    
    
  • Wall Street.
    
    
  • San Francisco, a style once possible only by hand-rendering.
    
    
  • Stencil is all caps.
    
    
  • Papyrus
    
    
    
    
• What's new?
  • PostScript, page description, 1976
  • TrueType, Apple, late 80’s
  • OpenType, 1996: scalable
    
    
    
  • Fonts for sale (all three pages below open in a new window)
    • http://www.fonthaus.com/
  • Best selling
    • http://www.fonthaus.com/products/fonts/2008top10fonts.cfm
  • Best selling in 2007
  • https://app.e2ma.net/app/view:CampaignPublic/id:17726.895311314/rid:6ff27c7c25d2c9a742e3b1663b01710e

Type Families

• Families: Arial, Bodoni, Times New Roman, etc.
• Family variations (branches)--
  • Basic family design characteristics remain.
  • Variations involve width, weight and posture.
    • Width: condensing or narrowing; and extended or widening;.
    • Weight: light, semibold or demibold, bold, and extrabold (bold [bf] most common); and
    • Posture: italic,[i] or roman [r] (roman is assumed unless marked).
  • Normal typestyle is "normal" or "full face" (Regular in Word and InDesign).
  • Some families come in a number of variations.
    • Most come in roman, italic and bold.
  • Also, as in Word: shaded, shadowed and outlined letterforms.
    

  
  
  
  

Fonts

• Font--the letters, numerals, punctuation marks, and other symbols that constitute a branch of a family in one size.
• Some fonts have large [c] and small caps [sc] (used in legal citations).
  
  
  
• Pi characters or sorts, pi fonts--special characters not available in standard fonts. Also dingbats.
  
• Type series--ranges in sizes in a family branch available for composition.
• 8-72 points most common.
  
  

Measurements

• In graphics, units of measurement are the point, pica, em, en, unit, and agate line.
  • Type size is measured in points.
    • From top of ascender to bottom of descender.
    • Usually 4-pts. to 72-pts. Now 144 pts and above
    • Type sizes 14 pts and larger are called display type.
    • Body copy is 4 pts. to 13 pts.
    • Most readable body type is 10 points to 12 points.
  • Line length (measure) is measured in picas.
    • Pica: 1 pica =12 points.
      • 10p6 = 10.5 picas
      • 6 picas = 1 inch
    • Points: 72 pts = 1 inch.
  • Em--A square of typesize being used.
    • Measure for paragraph indentation and spacing.
    • 10 pt. em is 10 points wide and 10 points high.
    • Em-dash (—) = two hyphens (--) joined
    • In metal typesetting, em was square, blank.
  • En--half an em.
    

Type Layout

• Kerning or letterspacing
  • Spacing between letters
    • Legibility most important.
    • Tightening to fit more copy into given space.
    • Spacing measured in units or points.
    • Greater freedom in letterspacing display type.
      
• Ragged right, or flush left [fl]:
  • Common starting point on left.
  • Lines of different lengths
  • Uniform word-spacing.
    
• Justified
  • All lines even, flush left and flush right.
  • Achieved by wordspacing and letterspacing.
    
• Ragged left [fr]: Less common.
  
• Leading
  • Interline spacing or line-spacing.
    • Measured in points.
    • From metal or "hot" typesetting.
    • Type without leading is "set solid."
    • Can do reverse leading (minus or back leading).
  • Display type line-spaced with greater freedom
    • But not headlines.
  • Expressing type size:
    • If type is set 10 points with 1-point leading; 10/11.
      • 11 is "slug" size: Typface plus leading.
    • Reverse leading is 10/9.
    • Set solid, 10/10.
      
      

Layout: Measurements

• Picas used to measure
  • The measure: the width (horizontal) of a column.
  • Depth of columns (also inches or centimeters).
  • Space between columns.
  • Space between type area & edge of page (margins—also inches or centimeters).
  • Illustrations (also inches or centimeters, especially depth).
    
    

Choosing type

• Most important--Readability
  • Speed and accuracy of recognizing and comprehending printed material.
    • Comprehension is key.
  • Pretest choice
  • Tests show public preference for Roman over sans serif  in print.
    • Can read faster 75% of time in both 10 & 14 pica measures.
• Test for suitable body copy is:
  • 1) comfortable to read?
  • 2) monotonous?
  • 3) too light?
  • 4) too dark?
  • 5) call too much attention to itself?
    • (If yes, then better as display).
• Typesize considerations for body copy:
  • 10-12 pt most readable for continuous type.
  • Newspapers 9 pt.
  • Classifieds 6 pt.
• Economic considerations.
  • Larger sizes occupy more space; consume more paper (and ink).
• Can use larger type size with lead paragraph or quote out--14 to 18 pt
  • Give prominence to lead, inviting reader into article, which is set normally.
• Should use larger typesize with reversed copy block--white on black, or light color against darker background
  • Keeps type from being overwhelmed.
    
    

Setting type

• Leading in body copy
  • 1 to 2 points adequate for most.
  • Word and InDesign are automatic
    • About 20% of typesize
      • Slug size is 120% of typesize.
    • Can re-set.
• Line length: 1-1/2 alphabets
  • Standard and most readable.
• Short measure (less than a full alphabet of the type in a designated size) hurts flow.
• Too long (in excess of two full alphabets of a designated typesize) hurts readability:
  • Hurts rhythm and
  • Causes reader to lose track of line.
    
• Justified text:
  • May create awkward letterspacing, wordspacing and too many hyphenations.
  • Use of ragged right increasing
    • No adverse effect on readability
    • Reduces hyphenations.

Design & readability

• Tips
  • Caps and lower case (clc) preferred to all caps.
    • If use all-caps at all, use sparingly & only in display.
  • Avoid vertical (stacked or tilted horizontal)
    • Hard to read.
  • Boldface, italics, more effective for emphasis than in long runs.
  • Avoid excessive display--hurts readability.
  • Avoid too many typefaces in one work
  • Avoid reversing (white on black) on long runs
    • Exception: Projections, electronic displays
  • Careful with text over illustrations, tint blocks.
    • Words need sufficient contrast and a clean field.
  • Break up long runs of copy for easy reading.
    • Indent paragraphs at least one em.
    • If first line is flush left, linespace between paragraphs.
    • Use subheads of contrasting face or weight.
    • Use boldface and italics at points for emphasis.
      
      

Selecting typefaces

• 1. psychological implications--subjective.
  • Type should match mood and aim of message
    • Strong, bold, light, fanciful, raw, delicate, simple, sophisticated.
  • Consider audience.
• 2. Use readability rules to fit age and education levels of readers:
  • Older and very young: larger
  • Younth: bolder.
• 3. Use typefaces harmonious with other elements in design
  • margins, indents, leading, word-spacing, paper choice, printing process, ink.
    
    

Creative Uses of Type

• Larger, dominant, artistic display faces.
• More daring combinations in logos, titles.
• Type should
  • attract reader,
  • be easy to read,
  • emphasize important information,
  • be expressive, and
  • create recognition.
    
• Initial letters, initial caps or drop caps
  • Create point of focus.
  • Display type integrated into text.
  • Should not attract too much attention.
  • Emphasize function.
    • Form follows function.
      
      

Back to top

Lectures Index

Schedule