typography dos & don'ts
Post on 22-Apr-2015
3.531 Views
Preview:
DESCRIPTION
TRANSCRIPT
TYPOGRAPHYDOS AND DON'TS
TYPE RULES (AND WHEN TO BREAK THEM)
TYPOGRAPHYDOS AND DON'TS
TYPE RULES (AND WHEN TO BREAK THEM)
×
TYPOGRAPHYDOS AND DON’TS
TYPE RULES (AND WHEN TO BREAK THEM)
SMART QUOTES:‘TOY STORY 3’
“HUH?”
SMART QUOTES:‘TOY STORY 3’
“HUH?”
DUMB QUOTES:6'4"
THE BASICS
WIDE LOAD
TIGHT WAD
WIDE LOAD
TIGHT WAD
WIDE LOAD
TIGHT WAD
WIDE LOADInterstate Black
TIGHT WADInterstate Black Compressed
There’s that. And this.But then... there’s that.
There’s that. And this.But then... there’s that.
There’s that. And this.But then... there’s that. There’s that. And this.But then… there’s that.
ELLIPSIS
There’s that. And this.But then… there’s that.
LIGATURE
fidgetwafflefluff
f idgetwaf f lef luf f
“Emphasizing a word or phrase within a body of text usually requires only one symbol. Italic is the standard form of emphasis. There are many alternatives, however, including boldface, small caps or a change in color.”
–Thinking with Type, Ellen Lupton
BOLD, ITALIC, UNDERLINED CAPS!IN COLOR!
HYPHENVS.
EN DASHVS.
EM DASH
-–—
HYPHEN
EN DASH
EM DASH
-–—
HYPHEN
EM: Equal to the point size, or width of the ‘M’ EN: Half the width of EM, or width of the ‘n’
EN DASH
EM DASH
“Three-em rule”“6:00–9:35 pm”
“It happened — trust me.”Minion Pro
“It happened -- trust me.”
“It happened – trust me.”“It happened — trust me.”“It happened — trust me.”
‘MESSAGING’ TYPE
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series.
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series.
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series. WIDOW
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series.
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series.
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series.
May Reilly Parker-Jameson, commonly known as Aunt May, is a supporting character in Marvel Comics’ Spider-Man series. Created by writer Stan Lee and artist Steve Ditko, she first appeared as May Parker in Amazing Fantasy #15 (August 1962). She has appeared in most other media adaptations of the character as an important part of the Spider-Man series.
SMALL CAPSVS.
TEXT FIGURESVS.
UPPERCASE
“6:00–9:35 PM”“6:00–9:35 pm”
SMALL CAPSTEXT FIGURESOLD-STYLE FIGURESHANGING FIGURES
“So the date is 23 August 1832; it could be 3:00 am in Apartment 6-b, 213-a Beacon Street; it is 27° c or 81° f; the price is $47,000 usd or £28,000; the postal codes are nl 1034 wr Amsterdam, sf 00170 Helsinki 17, Honolulu 96814, London wci 2nn, New Delhi 100 033, Toronto m5s 2g5, and Dublin 2.”
“BuT IT IS 1832 AND 81° IN FuLL CAPS.”
–The Elements of Typographic Style, Robert Bringhurst
“Thus: 3:00 am, 3:00 pm, the ninth century ce, 450 bc to ad 450, the oas and nato; World War ii or wwii; but JFK and Fr J.A.S. O’Brien, omi; hms Hypothesis and uss Ticonderoga; Washington, DC, and Mexico, DF; J.S. Bach’s Prelude and Fugue in B" minor, bwv 867.”
–The Elements of Typographic Style, Robert Bringhurst
“Thus: 3:00 am, 3:00 pm, the ninth century ce, 450 bc to ad 450, the oas and nato; World War ii or wwii; but JFK and Fr J.A.S. O’Brien, omi; hms Hypothesis and uss Ticonderoga; Washington, DC, and Mexico, DF; J.S. Bach’s Prelude and Fugue in B" minor, bwv 867.”
–The Elements of Typographic Style, Robert Bringhurst
HANGING QUOTES
UPPERCASEVS.
LOWERCASE
Typography
TYPOGRAPHY
TYPOGRAPHY
Ty pog raphy
Typography
TYPOGRAPHY
TYPOGRAPHY
Ty pog raphy
TYPESETTING
“Being a famous designer is like being a famous dentist.”
Being a famous designer is like Being a famous dentist.
Archer
Being a famous designer
is like Being a famous dentist.
B e i n g a f a m o u s d e s i g n e r is like Being a famous d e n t i s t .
Being a famous
is like Being a famous
dentist.designer
Bei ng a fa mous
designerdentist.is like Being a famous
FLUSH LEFT, RAGGED RIGHTVS.
FLUSH RIGHT, RAGGED LEFTVS.
JUSTIFIEDVS.
CENTERED
Lorem ipsum dolor sit amet, consectetuer zzril adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
Lorem ipsum dolor sit amet, consectetuer zzril adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
IRREGULAR SHAPE: PREFERRED
REGULAR SHAPE: NOT PREFERRED
Lorem ipsum dolor sit amet, consectetuer zzril
adipiscing elit, sed lobortis nonummy nibh dolore
magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
Lorem ipsum dolor sit amet, consectetuer zzril
adipiscing elit, sed lobortis nonummy nibh dolore
magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
FLUSH RIGHT,RAGGED LEFTNOT PREFERRED
Lorem ipsum dolor sit amet, consectetuer zzril adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
Lorem ipsum dolor sit amet, consectetuer zzril adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
NOT GREAT
Lorem ipsum dolor sit amet, consectetuer zzril adipiscing elit, sed lobor-tis nonummy nibh dolo-re magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud ex-erci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
NOT MUCH BETTER
Lorem ipsum dolor sit amet, consectetuer zzril
adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
Lorem ipsum dolor sit amet, consectetuer zzril
adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.
ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut commodo consequat.
USE SPARINGLYWHEN SETTING PARAGRAPHS
HANDWRITTEN FONTSVS.
SCRIPTS
Dear John,
Dear John,This handwritten letter is for you to tell you how I really feel about you...
Dear John,This handwritten letter is for you to tell you how I really feel about you...
Hello!
Hello!Hello!
Hello!
Hello!Hello!
Hello!
Hello!
Hello!
hello!
hello!
hello!
Hello!
Hello!Hello!
Hello!
Hello!Hello!
Hello!
Hello!
Hello!
hello!
hello!
hello!
BUT WAIT…
HEY, what’s this…
LiebeErika
Strangelove Next
Salmiak
this isn’t so bad……and neither is this!
HEY what’s this?Strangelove Next
Strangelove NextCUSTOM MADE
Fenway ParkBusiness Penmanship
Carpenter
MetroScriptCompendium
PAIRING TYPEFACES
SUPERFAMILIES
EXAMPLES OF SUPERFAMILIES
FF META (Sans, Serif, Headline)FF QUADRAAT (Sans, Serif, Display, Headliner)
FF SCALA (Sans, Serif)FF TISA (Sans, Serif)
HTF KNOCKOUT (32 Sans weights)ITC OFFICINA (Sans, Serif, Display)
PENUMBRA (Sans, Serif, Half Serif, Flare)NEUTRAFACE (Neutraface1, Neutraface2, Slab)
STONE (Sans, Serif, Informal)THESIS (TheSans, TheSerif, TheMix, TheAntiqua)
LOOK ALIKES
SIMILAR CAN BE NICE…
LOOK ALIKES
…BUT NOT TOO SIMILAR!
INCREASED CONTRAST
INCREASED CONTRAST
HISTORICAL SIMILARITIES
SAME FOUNDRY OR TYPOGRAPHER
MORRIS FULLER BENTONMATTHEW CARTER
HOEFLER & FRERE-JONESHOUSE INDUSTRIESROBERT SLIMBACHERIK SPIEKERMANN
TYPE TOGETHER
BREAKING THE RULES
Davi
d Ca
rson
Davi
d Ca
rson
Davi
d Ca
rson
Davi
d Ca
rson
WRD
BNR.
COM
WRD
BNR.
COM
Shah
ir Za
g
Crai
g W
ard
Crai
g W
ard
Crai
g W
ard
Vaug
hn H
ocke
y
Mar
ian
Bant
jes
Alex
Troc
hut
Shau
n Fly
nn
KELL
ERHO
USE
Janu
zzi S
mith
Ed F
ella
Kyle
Karg
ov
THANK YOU
top related