Typography

T G

k g

AArm

Stroke

Ascender

Serif

Descender

Counter

Crossbar

AdxpCapline

Meanline

Baseline

x-height

Type Anatomy

”The quality of typography is dependent onthe relationship between the printed andunprinted parts. It is a sign of professionalimmaturity to ignore the decisive contributionof the unprinted area.”– Emil Ruder

Type Anatomy: x-height

x x x Meanline

Baseline

x-height

162pt Palatino 162pt Univers 55162pt Bodoni

Lorem ipsum dolor sit amet, consectetueradipiscing elit. Morbi non est in sem blanditmattis. Morbi lacinia nonummy mauris.Integer sit amet libero. Aenean porta, sapieninterdum consectetuer elementum, ligulaodio feugiat quam, ac blandit enim puruset ante. Fusce pretium. Mauris neque lectus,convallis non, faucibus non, facilisis sitamet, eros. Vivamus tellus.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Morbi nonest in sem blandit mattis. Morbi lacinianonummy mauris. Integer sit ametlibero. Aenean porta, sapien interdumconsectetuer elementum, ligula odiofeugiat quam, ac blandit enim purus etante. Fusce pretium. Mauris nequelectus, convallis non, faucibus non,facilisis sit amet, eros. Vivamus tellus.

12pt Bodoni 12pt Univers 55

Decorative/Stylized

Dogma Hey Stupid!Elektrix Old 54Backspacer

Type Classifications

Old Style

Garramond CaslonGoudy PalatinoSabon

Modern

Bodoni

Slab-Serif (Egyptian)

City Medium Memphis BoldOblong

Transitional

Stone Serif Times New RomanBaskerville New Century Schoolbook

Script

Berthold ScriptBrush Script

Sans Serif

Univers HelveticaFutura Franklin GothicNews Gothic Gill Sans LightStone Sans Bell GothicOptima Frutiger

Janson

”Pretentious [typfaces] opposethe utilitarian task of typography.The more uninteresting a letteris in itself the more useful it is intypography”–Piet Zwart

transitional• medium thick/thin contrasts• finely bracketed serifs• almost vertical stress• capitals same height as lowercase ascenders• lowercase letters are short and wide

slab serif• little or no thick/thin contrast• square serifs• vertical stress

sans serif• no serifs• no or minimal thick/thin stress• large x-height

llll

old style• minimal thick/thin contrast• heavily bracketed serifs• oblique stress• capital height is shorter than lowercase acenders

modern• extreme thick/thin contrast• no bracketing of serifs• vertical stress

lType Classifications

Don’t Use Comic Sans,Don’t Use Jokerman,

Don’t Use Kidprint,Don’t Use Methyl,Don’t Use Party,

Don’t Use Textile,Don’t Use Techno,

Don’t Use Serpentine,And Don’t Use Sand!

(unless you want to look like an amateur)

Type Classification: Absolutely Awful

”Let’s say a French person comes up to youand starts talking. The first thing you noticeis that he’s speaking French – not the wordsthat he’s said. Just set a piece of text, first inGarramond, then in several different facesand observe exactly how the message changes.The choice of typeface is critical to theemotional response of the words.”– Neville Brody

Typographic Weight: Regular/Roman, Light, Bold, Ultra Bold

Univers Regular Garramond RomanUnivers BoldFutura Ultra BoldUnivers Light

True and Faux Weight

Garramond Faux BoldGarramond True Bold

Typographic Width: Normal, Condensed, Extended

Univers NormalUnivers BoldUnivers Extended

True and Faux Weight

Univers ExtendedUnivers Stretched

Typographic Weight, Width & Slant

Typographic Slant: Italic, Oblique

Sabon ItalicUnivers Oblique

Fonts & Type Families

FontA complete set of characters in one design, size,and style. In traditional metal type, a font meanta particular size and style; in digital typographya font can output multiple sizes and even alteredstyles of a typeface design.

TypefaceThe design of alphabetical and numericalcharacters unified by consistent visual properties.

Type FamilyThe complete range of variations of a typefacedesign, including roman, italic, bold, expanded,condensed, light, black and other versions.

univers family

Adobe Garramond RomanAdobe Garramond BoldAdobe Garramond ItalicAdobe Garramond Bold ItalicAdobe Garramond SemiboldAdobe Garramond Semibold Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789! @ # $ % ^ & * ( ) _ + - = [ ] \ | ; : ’” , < . > / ? ¡ ™ £ ¢ ∞ § ¶ • ª º – ≠ œ∑ ´ ® † ¥ ¨ ˆ ø π “ « å ß ∂ ƒ © ˙ ∆ ˚ ¬ …æ Ω ≈ ç √ ∫ ˜ µ ≤ ≥ ÷ ⁄ ‹ › fi fl ‡ ° · ‚ —± Œ „ ´ ‰ ˇÁ ¨ ˆ Ø ∏ ” ’ » ÅÍ Î Ï ˝ Ó ÔÒ Ú Æ ¸ ˛ Ç ◊ ı ˜ Â ¯ ˘ ¿

Typographic Measurements

12 Points = 1 Pica

6 Point8 Point

10 Point12 Point14 Point

18 Point24 Point

30 Point36 Point42 Point48 Point54 Point60 Point

72 Point

Text Type (10pt Standard)

Display Type

72 Points = 1 Inch

Horizontal Rules: .25pt, .5pt, 1pt, 2pt, 4pt, 6pt, 72pt

Typographic Measurements: Letterspacing,Wordspacing & Kerning

Letterspacing (Tracking)

Expeditious L a g u b r i o u sAbstracted

Word Spacing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aliquam dignissim odio sed risus. Donec tortor odio, mattisquis, porta a, luctus quis, erat. Nunc interdum. Ut id elit. Cumsociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Integer eros nibh, suscipit in, portaeget, imperdiet ac, enim. Cras mi lorem, tristique vitae, laoreetin, dapibus ac, ipsum. Aenean ullamcorper est quis nibh.Donec purus. Phasellus est ipsum, varius eget, egestas at,tristique quis, nulla.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aliquam dignissim odio sed risus. Donec tortor odio, mattisquis, porta a, luctus quis, erat. Nunc interdum. Ut id elit.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Integer eros nibh, suscipitin, porta eget, imperdiet ac, enim. Cras mi lorem, tristiquevitae, laoreet in, dapibus ac, ipsum. Aenean ullamcorperest quis nibh. Donec purus. Phasellus est ipsum, varius eget,egestas at, tristique quis, nulla.

Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aliquam dignissim odio sed risus. Donec tortorodio, mattis quis, porta a, luctus quis, erat. Nuncinterdum. Ut id elit. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Integer eros nibh, suscipit in, porta eget, imperdietac, enim. Cras mi lorem, tristique vitae, laoreet in,dapibus ac, ipsum. Aenean ullamcorper est quis nibh.Donec purus. Phasellus est ipsum, varius eget, egestasat, tristique quis, nulla.

When word spacing is greater thanthe linespacing the eye reads downthrough the gaps rather than leftto right.

Tight letterspacing makesreading difficult for text-typebut tighter than normalletterspacing is needed fordisplay type.

Loose letterspacing slowsreading in text-type, but is oftenused for display type and othercreative purposes.

”You can do a good ad withpoor typography, but youcan’t do a great ad with poortypography”– Herb Lubalin

”The essecence of typographyis clarity”– Alex White

Typographic Measurements: Letterspacing,Wordspacing & Kerning

Kerning

Typographic Sushi with Soy Sauce and Wasabi.Typographic Sushi with Soy Sauce and Wasabi.

YodaYoda

Display TypeDisplay Type

Letterspacing Display Type

Kerned

Un-kerned

AC AT AV AW AY FA Fa Fe Fi Fo Fu LT LV LW LY OAOV OW OY PA Ta Te Ti To Tr Tu Tw Th Ty Wo Wi WrWe Wu Wy Wa W. Wh W: W; W- W– Ya Ye Yi Yo YuAl An AG AO AQ AU AV AJ IO IG IC OI OL OX

Typographic Measurements: Leading/Linespacing

STEALSCLOCK,FACESTIME

STEALSCLOCK,FACESTIME




Leading/Linespacing

12/14Easy to read with even mediumgrey value.

12/12 (Set Solid)Too dense and confusing to theeye.

12/16Increased leading eases readingand creates a lighter value onthe page. Too much leading willdisconnect lines of text,especially if the paragraphspacing is the same or less thanthe leading.

Display type needs negativeleading as well as less letter-spacing to maintain the textas a visual unit.Left: 48/50Right: 48/42

Project 1: Personal Typographic Symbol

Documents

Typography