Introduction to Typography 09/5/2013 Typography IIntroduction to Typography.
Typography
description
Transcript of Typography
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