• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Typography
 

Typography

on

  • 5,921 views

Addendum to COM 637 report in Summer 2010

Addendum to COM 637 report in Summer 2010

Statistics

Views

Total Views
5,921
Views on SlideShare
5,749
Embed Views
172

Actions

Likes
10
Downloads
348
Comments
0

5 Embeds 172

https://blackboard.robertmorris.edu 127
http://moodle.cqu.edu.au 34
http://www.slideshare.net 7
http://www.linkedin.com 3
http://unadocenade.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Typography Typography Presentation Transcript

    • Typography
      Lecture by: Penny Tan and JobyProvido
    • Things to know
      Terms used
      Categorizing typefaces
      Combining typefaces
    • Typography
      Etymology: from the Latin words typos (type) and graphos (written)
      The art and technique of
      Arranging type that involves the selection of:
      Typefaces
      Font size
      Leading (line space)
      Tracking (adjusting the space between a group of letters)
      Kerning (adjusting the space between two letters)
      Type design
      Modifying type glyphs
    • Typefaces
      A set of one or more fonts, in one or more sizes, designed with stylisticunity
      Theyusually comprise an alphabet of letters, numbers, punctuation marks, and specialcharacters
      (~ @ # $ % ^ & * _ + = «  ‘ { } [ ] < > / )
    • Typefaces vs. Fonts
      Typefaces
      These are families of fonts.
      Times New Roman
      Arial
      fonts
      These are variations of a typeface.
      Arial
      Arial bold
      Arial italics
      Arial underline
    • Typeface terms
      x-height
      ascender
      descender
      baseline
      The horizontal guideline indicating where the bottom of characters without descenders appear to align
      Height of the lower case letters with no ascender or descender
      Part of the lower case letter that extends above the x-height
      Part of the lower case letter that extends below the x-height
    • Typeface terms
      italic
      roman
    • Point size
      size in points
      Point sizes are not exactly the same height. The following are all 50 points.
    • Stress
      The direction and degree of incline in the axis of a font with contrast
      It could be diagonal (oblique or biased), vertical, or horizontal
      stress
    • Serifs
      N
      A short line or finishing stroke that crosses or projects from stems or strokes in a character
      Also called a fillet; it is a shape that appears in a character at the junction of a serif and a main stroke
      The thinnest stroke of a letter
      serif
      bracket
      hairline
    • Serifs
      Slab
      Bold, rectangular appearance and sometimes has fixed widths, meaning all characters occupy the same amount of horizontal space
      Wedge
      Where the junction of the serif and the stem are diagonal rather than bracketed
      N
    • Serifs and brackets
      bracketed
      Serifs (feet)
      Palatino
    • Weight
    • Condensed and extended
    • Typeface categories
      Old style
      Modern
      Slabserif
      Sans serif
      Script
      Décorative
      Distressed
    • Old style
      lowercase serifs are slanted
      diagonal stress
      serifs
      bracketed
      gentle transition from thick to thin
      Formed the way scribes heldtheirpens in the late 1400s
      Most readablebecausetheyweremeant for long lines of text
      Warm and graceful
    • Old style
    • Old style samples
    • Modern
      lowercase serifs are horizontal
      vertical stress
      radical thick to thin
      serifs
      subtle or no bracketing
      Industrialrevolution = mechanical point of view
      Old style typefaceswerebecomingobsolete
      Elegant but severe and cold
      Not veryreadable
    • Modern
    • Modern samples
    • Slab serif
      Alsoknown as square serif
      All charactersoccupy the sameamount of horizontal space, as printed by a typewriter
      Industrialrevolution = advertising
      Advertisingneededthicktypefaces
      Thickening the modern typefaces made it impossible to read
      Thickened the serifsinstead
      MostlyEgyptiannamesbecausearcheologywas the in thing due to finding the rosetta stone
      Most slabserifs are calledClarendonsbecauseitepitomizes the letterform
    • Slab serif
      horizontal lowercase serifs
      vertical stress
      thick, fat serifs
      subtle thick to thin
    • Slab serif samples
    • Sans serif
      large x-height
      no serifs
      subtle or no transition from thick to thin
      Sansis French for without 
      in 1816 William Caslon created the 2-line Egyptianwhereheremoved the serifsbecausehehatedthem. Not an instant hit
      The Bauhaus motto“form follows function” stripped typefaces to their bare essentials
      Futura is the epitome of this letterform
      Large x-height creates a presence
    • Sans serif sample
    • Script
      Emulateshandwriting
      Classy and formal
      In the 1400s only the richcouldafford books
      Books were made by scribes whowrote in script
    • Script samples
    • Decorative
      Enhances a theme
      Not meant for anything but for decoration
      Not to beused as text
      Adds punch to a publication
      Creates a look or emphasizes content
      If overused, itcan destroy a design
    • Decorative samples
    • Distressed
      distorted, deliberately trashed
      beauty in their ugliness
      Mac put desktop publishing in the hands of the masses.
      Rules of traditionaltypographyweredemolished
      Usersbecame more interested in typefaces and manymanipulatedtheirown
      also called fringe, grunge, garage, deconstructed, lawless
    • Distressed
    • Distressed samples
    • Combining typefaces
    • Combining typefaces
      concordant
      One family
      Safe but dull
      contrast
      Typefaces are clear and distinct from each other
    • Combining typefaces: Conflicting
      2 or more typefaces that are similar in style, size, weight, etc.
      Disturbing because visual attraction is not concordant nor contrasting
    • Ways to achieve contrast
      Color
      Direction
      Form
      Size
      Structure
      Weight
    • Contrast by color
      You can change the ‘color’ of one typeface
      Leading (line spacing)
      Letterspacing
      Italic
      Weight
      Typistsalsorefer to density of text as color
    • Contrast by color samples
    • Contrast by color samples
    • Contrast by color samples
    • Contrast by direction
      Direction of how a text is read
      Horizontal
      Vertically downward
      Vertically upward
      Diagonally Down
      Diagonally Up
      Verdana
    • Contrast by direction samples
    • Contrast by direction samples
      A tall thin column of text has a vertical direction
    • Contrast by direction samples
    • Contrast by form
      Refers to the shape of the block of letters
      Templar
    • Contrast by form
      Oxford
    • Contrast by form samples
    • Contrast by form samples
    • Contrast by size
      Contrastbig type withsmall type
      Make the contrastobvious
    • Contrast by size samples
      Arial
      Lithe | Classic Typewriter
      Rockwell | Century Gothic
      Old English | Edwardian Script
    • Contrast by size samples
    • Contrast by structure
      Use typefacesfromfamilieswithdifferent structures
      Never put typefacesfrom the samefamily structure on the same page
      Ensurethat the contrastisemphasized
      Limit to only 3 families
    • Contrast by structure samples
      Trebuchet | Garamond
      Bodoni | clarendon
    • Contrast by structure samples
    • Contrast by weight
      Refers to the thickness of the strokes
      Strokescanbebold, semi-bold, extra bold, regular, light, etc.
      Great for organizing information
      Again, emphasize the contrast
      Put it all together.
    • Contrast by weight samples
    • Contrast by weight samples
    • Contrast by weight samples
    • Contrast by weight samples
    • More Samples