Typography
description
Transcript of 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
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. 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. 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.
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