Ten Top Tips for Tidier Type

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

4. None
5. None

6. A brief history of writing. Really , really brief…

7. None
8. None
9. None
10. None
11. None
12. None

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.

19. None

20. Only use serifs if you use a large enough font

    size.

21. The 100% Easy-2-Read Standard http://ia.net/blog/100e2r

22. None

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.

26. None

27. 52–78 characters (2–3 alphabets).

28. None

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’.
38. None
39. None
40. None
41. None
42. None
43. None
44. None
45. None
46. None
47. None

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

62. None
63. None

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

73. None
74. None

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!

82. None
83. None

84. Single quotes ii.

85. ‘’

86. None
87. None
88. None
89. None
90. None
91. None
92. None
93. None
94. None
95. None
96. None

97. HTML: ‘ / ’ Mac: Alt+] / Alt+Shi +] Win:

    Alt+0145 / Alt+0146

98. Double quotes iii.

99. “”

100. None
101. None
102. None
103. None

104. HTML: “ / ” Mac: Alt+[ / Alt+Shi +[ Win:

     Alt+0147 / Alt+0148
105. None
106. None
107. None

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

113. None

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.
126. None
127. None

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.
131. None
132. None
133. None
134. None
135. None

136. ul, ol { list-style-position: outside; }

137. None
138. None
139. None
140. None
141. None
142. None
143. None
144. None

145. blockquote { text-indent: -0.4em; }

146. None
147. None
148. None

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.

152. None
153. None

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