Typography
Transcript of Typography
by Joby Provido
And Penny Tan
TYPOGRAPHY
TYPOGRAPHY
• Etymology: typos (type) and graphos (written)
• Performed by typesetters, compositors, typographers, graphic designers, comic book artists, grafitti artists, and clerical workers
TYPOGRAPHY• The art and technique of:
• Arranging type – involves the selection of:• Typefaces
• Point size
• Leading – line spacing
• Tracking – adjusting the space between a group of letters
• Kerning – adjusting the space between a pair of letters
• Type design
• Modifying type glyphs
TYPEFACES
• A set of one or more fonts, in one or more sizes, designed with stylistic unity
• Usually comprised of an alphabet of letters, numbers, punctuation
Variations of a typeface
• Arial
• Arial bold
• Arial italics
• Arial underline
Families of fonts
• Times New Roman
• Arial
TYPEFACES VS. FONTS
Typefaces Fonts
TYPEFACE TERMS
TYPEFACE TERMS
TYPEFACE TERMS
• Horizontal guideline indicating where the bottom of characters without descenders appear to align
• Height of 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 baseline
x-heightascender
descender baseline
TYPEFACE TERMS
roman italic
POINT SIZE
size in points
POINT SIZE DISCREPANCY
• 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 the font
• Could be diagonal (oblique or biased), vertical, or horizontal
stress
SERIFS• Serif
• A short line or finishing stroke that crosses or projects from stems or strokes in a character
• Bracket• Also called a fillet
• Shape that appears at the junction of a serif and a main stroke
• Hairline• Thinnest stroke of a letter
SERIFS
• Slab• Bold rectangular appearance and sometimes has
fixed widths
• All characters occupy the same amount of horizontal space
• Wedge• Where the junction of the serif and the stem are
diagonal, rather than a bracket
SERIFS AND BRACKETS
Serifs (feet)
bracketed
Palatino
WEIGHT
CONDENSED AND EXTENDED
TYPEFACE CATEGORIES
• Formed the way scribes held their pens in the 1400s
• Warm and graceful
• Most readable because they were meant for long lines of text
OLD STYLE
OLD STYLE
serifs bracketed gentle transition from thick to thin
lowercase serifs are slanted diagonal stress
OLD STYLE
OLD STYLE SAMPLES
MODERN
• Industrial revolution = mechanical point of view
• Old style typefaces were becoming obsolete
• Elegant but severe and cold
• Not very readable
MODERN
serifs subtle or no bracketing
lowercase serifs are horizontalvertical stress
radical thick to thin
MODERN
MODERN SAMPLES
SLAB SERIF• Also known as square serif
• All characters occupy the same amount of horizontal space, as printed by a typewriter
• Industrial revolution = advertising
• Advertising needed thicker typefaces
• Thickening the modern typefaces made it impossible to read
• Thickened the serifs instead
• Often called CLARENDONS as it epitomizes the letterform
SLAB SERIF
thick, fat serifs subtle thick to thin
vertical stresshorizontal lowercase serifs
SLAB SERIF SAMPLES
SANS SERIF
• Sans means “without” in French
• Created by William Caslon in 1816 because he hated serifs
• The Bauhaus motto “form follows function” stripped typefaces to their bare essentials
• Large x-height creates a presence
• Futura is the epitome of this letterform
SANS SERIF
no serifs subtle or no transition from thick to thin
large x-height
SANS SERIF SAMPLES
• Emulates handwriting
• Classy and formal
• In the 1400s books were made by scribes who wrote in script
SCRIPT
SCRIPT SAMPLES
DECORATIVE
• Enhances a theme
• Not meant for anything but decoration
• Not to be used as text
• Adds punch to a publication
• Creates a look or emphasizes content
• If overused it can destroy a design
DECORATIVE SAMPLE
DISTRESSED
• Rules of original typography were demolished
• Also called fringe, grunge, garage, deconstructed, or lawless
distorted, deliberately trashed beauty in their ugliness
DISTRESSED SAMPLE
Com
bini
ng ty
pefa
ces
• 2 or more typefaces that are similar in style, size, weight, etc.
• Visually disturbing
CONFLICTING
• One family
• Safe but dull
CONCORDANT
• Typefaces are clear and distinct from each other
CONTRASTING
• Color
• Direction
• Form
• Size
• Structure
• Weight
WAYS TO ACHIEVE CONTRAST
CONTRAST BY COLOR
• Typists refer to density of text as color
CONTRAST BY COLOR
You can change the color of a typeface by modifying any of the following:
• Leading
• Tracking
• Kerning
• Italicizing
• Weight
• Etc.
CONTRAST BY COLOR
CONTRAST BY COLOR
CONTRAST BY COLOR
CONTRAST BY DIRECTION
Direction by which text is read
Vert
ically
upw
ard
Horizontal
Vertica
lly d
ow
nw
ard
Diago
nally
Up
Diagonally Down
Verdana
CONTRAST BY DIRECTION
CONTRAST BY DIRECTION
A tall thin column of text has a vertical direction
CONTRAST BY DIRECTION
Refers to the shape of the blocks of letters
CONTRAST BY FORM
CONTRAST BY FORM
Templar
CONTRAST BY FORM
Oxford
CONTRAST BY FORM
Oxford
CONTRAST BY FORM
CONTRAST BY FORM
Contrast b
y size
•Contra
st big ty
pe with sm
all type
•Make th
e contra
st obvio
us
CONTRAST BY SIZE
Arial
Lithe | Classic Typewriter
Rockwell | Century Gothic
Old English | Edwardian Script
CONTRAST BY STRUCTURE
• Use typefaces from families with different structures
• Never put typefaces from the same family structure on the same page
• Ensure that the contrast is emphasized
• Limit to only three families
CONTRAST BY STRUCTURE
Trebuchet | Garamond Bodoni | Clarendon
CONTRAST BY STRUCTURE
CONTRAST BY WEIGHT
• Refers to the thickness of the strokes
• Strokes can be bold, semi-bold, extra-bold, regular, light, etc.
• Great for organizing information
• Again, emphasize the contrast
CONTRAST BY WEIGHT
CONTRAST BY WEIGHT
CONTRAST BY WEIGHT
CONTRAST BY WEIGHT
SAMPLES
SAMPLES
SAMPLES
SAMPLES
SAMPLES
SAMPLES
SAMPLES