Typography Dos and Don'ts: Type Rules and When to Break Them
•
16 j'aime•5,651 vues
The document discusses typography rules and guidelines related to typesetting, including proper use of punctuation marks, dashes, quotation marks, capitalization, alignment, line spacing, font pairing and more. It provides examples of both conventional and unconventional typographic styles, noting that while rules exist, sometimes breaking them can be effective.
Recommandé
Contenu connexe
Tendances
Tendances (18)
En vedette
En vedette (12)
Similaire à Typography Dos and Don'ts: Type Rules and When to Break Them
Similaire à Typography Dos and Don'ts: Type Rules and When to Break Them (10)
Dernier
Dernier (20)
Typography Dos and Don'ts: Type Rules and When to Break Them
- 1. TYPOGRAPHY DOS AND DON'TS TYPE RULES (AND WHEN TO BREAK THEM)
- 2. TYPOGRAPHY DOS AND DON'TS TYPE RULES (AND WHEN TO BREAK THEM) ×
- 3. TYPOGRAPHY DOS AND DON’TS TYPE RULES (AND WHEN TO BREAK THEM)
- 4. SMART QUOTES: ‘TOY STORY 3’ “HUH?”
- 5. SMART QUOTES: ‘TOY STORY 3’ “HUH?” DUMB QUOTES: 6'4"
- 6. THE BASICS
- 9. WIDE LOAD TIGHTWAD WIDE LOADInterstate Black TIGHT WAD Interstate Black Compressed
- 10. There’s that. And this. But then... there’s that.
- 11. There’s that. And this. But then... there’s that.
- 12. There’s that. And this. But then... there’s that. There’s that. And this. But then… there’s that. ELLIPSIS
- 13. There’s that. And this. But then… there’s that. LIGATURE
- 15. “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
- 16. BOLD, ITALIC, UNDERLINED CAPS! IN COLOR!
- 19. - – — 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
- 20. “Three-em rule” “6:00–9:35 pm” “It happened — trust me.” Minion Pro
- 21. “It happened -- trust me.” “It happened – trust me.” “It happened — trust me.” “It happened—trust me.”
- 22. ‘MESSAGING’ TYPE
- 23. 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.
- 24. 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.
- 25. 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
- 28. 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.
- 29. 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.
- 30. 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.
- 31. 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.
- 33. “6:00–9:35 PM” “6:00–9:35 pm” SMALL CAPSTEXT FIGURES OLD-STYLE FIGURES HANGING FIGURES
- 35. “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
- 36. “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
- 37. “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
- 40. Typography TYPOGRAPHY T Y POGR A PH Y Ty pography
- 41. Typography TYPOGRAPHY T Y POGR A PH Y Ty pography
- 42. TYPESETTING
- 43. “Being a famous designer is like being a famous dentist.”
- 44. Being a famous designer is like being a famous dentist. Archer
- 45. Being a famous designer is like being a famous dentist.
- 46. 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 .
- 47. Being a famous is like being a famous dentist. designer
- 48. Being a famous designer dentist. is like being a famous
- 49. FLUSH LEFT, RAGGED RIGHT VS. FLUSH RIGHT, RAGGED LEFT VS. JUSTIFIED VS. CENTERED
- 50. 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.
- 51. 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
- 52. 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.
- 53. 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 LEFT NOT PREFERRED
- 54. 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.
- 55. 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
- 56. 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
- 57. 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.
- 58. 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 SPARINGLY WHEN SETTING PARAGRAPHS
- 60. Dear John,
- 61. Dear John, This handwritten letter is for you to tell you how I really feel about you...
- 62. Dear John, This handwritten letter is for you to tell you how I really feel about you...
- 65. BUT WAIT…
- 71. SUPERFAMILIES
- 72. 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)
- 73. LOOK ALIKES SIMILAR CAN BE NICE…
- 74. LOOK ALIKES …BUT NOT TOO SIMILAR!
- 78. SAME FOUNDRY OR TYPOGRAPHER Morris Fuller Benton matthew carter HOEFLER & FRERE-JONES HOUSE INDUSTRIES Robert Slimbach erik spiekermann TYPE TOGETHER
- 80. DavidCarson
- 81. DavidCarson
- 82. DavidCarson
- 83. DavidCarson
- 84. WRDBNR.COM
- 85. WRDBNR.COM
- 86. ShahirZag
- 87. CraigWard
- 88. CraigWard
- 89. CraigWard
- 90. VaughnHockey
- 91. MarianBantjes
- 92. AlexTrochut
- 93. ShaunFlynn
- 94. KELLERHOUSE
- 95. JanuzziSmith
- 96. EdFella
- 97. KyleKargov
- 98. THANK YOU