TypographyLecture by: Penny Tan and Joby Provido

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 stylistic unity

They usually comprise an alphabet of letters, numbers, punctuation marks, and special characters (~ @ # $ % ^ & * _ + = «  ‘ { } [ ] <

> / )

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

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

x-heightascender

descender baseline

Typeface terms

roman italic

Point size

Point sizes are not exactly the same height. The following are all 50 points.

size in 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

Serifs (feet)

bracketed

Palatino

Weight

Condensed and extended

Typeface categories

Old styleModern Slab serif Sans serif Script Décorative Distressed

Old style

Formed the way scribes held their pens in the late 1400s Most readable because they were meant for long lines of

text Warm and graceful

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

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 thick typefaces

Thickening the modern typefaces made it

impossible to read Thickened the serifs

instead Mostly Egyptian names

because archeology was the in thing due to finding the rosetta stone

Most slab serifs are called Clarendons because it epitomizes the letterform

Slab serif

thick, fat serifs subtle thick to thin

vertical stresshorizontal lowercase serifs

Slab serif samples

Sans serif

Sans is French for without  in 1816 William Caslon created the 2-line Egyptian

where he removed the serifs because he hated them. 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

no serifs subtle or no transition from thick to thin

large x-height

Sans serif sample

Script

Emulates handwriting Classy and formal In the 1400s only the rich could

afford books Books were made by scribes who

wrote in script

Script samples

Decorative

Enhances a theme Not meant for anything but for

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 samples

Distressed

Mac put desktop publishing in the hands of the masses.

Rules of traditional typography were demolished Users became more interested in typefaces and

many manipulated their own

also called fringe, grunge, garage, deconstructed, lawless

distorted, deliberately trashed beauty in their ugliness

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)Letter spacing ItalicWeight

Typists also refer 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

Vert

ically

upw

ard

Horizontal

Vertica

lly d

ow

nw

ardDia

gona

lly U

p

Diagonally Down

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

Contrast big type with small type Make the contrast obvious

Contrast by size samples

Arial

Lithe | Classic Typewriter

Rockwell | Century Gothic

Old English | Edwardian Script

Contrast by size samples

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 3 families

Contrast by structure samples

TREBUCHET | GARAMONDBODONI | CLARENDON

Contrast by structure samples

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

Put it all together.

Contrast by weight samples

Contrast by weight samples

Contrast by weight samples

Contrast by weight samples

More Samples