Ten Top Tips for Tidier Type

Ten Top Tips for Tidier Type at #TIDE, Scarborough. October 2013.

Transcript

1. Ten Top Tips for Tidier Type #TIDE – Scarborough, 2013
2. Ten Top Tips for Tidier Type on t’Internet #TIDE – Scarborough, 2013
3. Harry Roberts @csswizardry
6. A brief history of writing. Really , really brief…
13. What is good type?
14. It’s about allowing the eye to move uninterrupted.
15. It’s about being clear and without distractions.
16. It’s about stopping the eye from tiring.
17. The best typography goes unnoticed.
18. Choosing your face 1.
20. Only use serifs if you use a large enough font size.
21. The 100% Easy-2-Read Standard http://ia.net/blog/100e2r
23. Do not Set serif faces small enough that they lose clarity. Change the browser’s default size without good cause. Pick a face unsuitable for screen viewing.
24. Do Choose a face with wide counters and bowls. Keep an eye on serifs. Set type at a comfortable size for prolonged reading.
25. Setting your measure A.K.A. line length 2.
27. 52–78 characters (2–3 alphabets).
29. .wrapper { max-width: 40em; }
30. Do not Allow your measure to keep growing with the screen.
31. Do Set a measure that doesn’t tire the eye. Stick to the numbers where possible.
32. Setting your line height Not the same as leading. 3.
33. Needs to be wide enough to focus on one line at a time.
34. 140% (1.4) is generally pretty comfortable.
35. html { font-size: 100%; line-height: 1.4; }
36. /** * 1. Makes my maths a little easier. */ html { font-size: 100%; line-height: 1.5; /* [1] */ }
37. As the measure alters, so should the line height. Prevent the eye making awkward ‘jumps’.
48. Do not Pack lines too tightly. Allow lines to oat apart.
49. Do Make sure your line-height suits your measure.
50. The three (major) types of dash Hyphen, en, and em. 4.
51. The hyphen i.
52. -
53. The hyphen Double-barreled names. Words breaking over two lines. Compound modi ers (e.g. a light-green dress).
54. ‘I’m looking for an old ass banger.’
55. The en dash ii.
56. –
57. The en dash denotes ranges. Slides 54–62 will teach us all about the en dash.
58. Ranges e.g. pp. 117–158, ages 7–12
59. Relations e.g. New York–London, father–son
60. More*
61. HTML: – Mac: Alt+- Win: Alt+0150
64. The em dash iii.
65. —
66. The em dash separates a clause—or separate train of thought—within a sentence.
67. Set em dashes—like these ones—without spaces…
68. …or set them — like these ones — with hair spaces.
69. Never set them — like these ones — fully spaced.
70. Some people uses en dashes – like these – with spaces…
71. But it all depends on the face.
72. HTML: — Mac: Alt+Shi +- Win: Alt+0151
75. Do not Use the hyphen for everything.
76. Do Learn the di erences and uses for each type of dash. Consider the face when choosing which to use.
77. Quotes Sixty-sixes and ninety-nines. 5.
78. Dumb quotes i.
79. ''
80. ""
81. That looks nothing like a 66 or a 99!
84. Single quotes ii.
85. ‘’
97. HTML: ‘ / ’ Mac: Alt+] / Alt+Shi +] Win: Alt+0145 / Alt+0146
98. Double quotes iii.
99. “”
104. HTML: “ / ” Mac: Alt+[ / Alt+Shi +[ Win: Alt+0147 / Alt+0148
108. Do not Use dumb quotes!
109. Do Spend time setting quotes and apostrophes.
110. Quote convention “‘’” or ‘“”’? 6.
111. ‘This is the typical “British quote” style.’
112. “This is the typical ‘American quote’ style.”
114. A more attractive appearance is achieved by using single quotation marks for the more frequently occurring quotations, and the double version for the less frequent occurrence of quotations within quotations. —Jost Hochuli
115. Do not Nest the same quote marks.
116. Do Pick a convention sympathetic to the face.
117. Primes 7.
118. I am 6'4"
119. Primes are not the same as straight quotes. They are used to denote measurements.
120. I am 6′4″
121. I am 6′4″ I am 6'4" I am 6’4”
122. HTML: ′ / ″ Mac: Win: Alt+8242 / Alt+8243
123. Ellipses 8.
124. …
125. Ellipses are not three full stops. But it could be worse.
128. HTML: … Mac: Alt+; Win: Alt+0133
129. Hung punctuation 9.
130. Hung punctuation preserves the ow of text, making it quicker and smoother for a user to read.
136. ul, ol { list-style-position: outside; }
145. blockquote { text-indent: -0.4em; }
149. Do not Inset bullets. Ever.
150. Do Hang punctuation into the margin where you can. Otherwise hang it relative to the body of text.
151. Double spacing Dante’s tenth circle… 10.
154. Do not Double space your sentences.
155. Resources Learn more about typography. a.
156. The Elements of Typographic Style —Robert Bringhurst
157. Detail in Typography —Jost Hochuli
158. Twenty-Two Tips on Typography —Enric Jardi
159. The Penguin Guide to Punctuation —R L Trask
160. Wikipedia http://en.wikipedia.org/wiki/Punctuation
161. Typography for Lawyers http://typographyforlawyers.com
162. The Elements of Typographic Style Applied to the Web http://webtypography.net
163. Ten Top Tips for Tidier Type Harry Roberts – @csswizardry