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