typography dos & don'ts

TYPOGRAPHYDOS AND DON'TS

TYPE RULES (AND WHEN TO BREAK THEM)

TYPOGRAPHYDOS AND DON'TS


×

TYPOGRAPHYDOS AND DON’TS


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 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.

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. 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.

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.”


“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.”


HANGING QUOTES

UPPERCASEVS.

LOWERCASE

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.



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.


adipiscing elit, sed lobortis nonummy nibh dolore

magna erat volutpat.



FLUSH RIGHT,RAGGED LEFTNOT PREFERRED



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


adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.




adipiscing elit, sed lobortis nonummy nibh dolore magna erat volutpat.



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...

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

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

WRD

BNR.

COM

Shah

ir Za

g

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

typography dos & don'ts

Design