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
   

   View Slide

2. Ten Top Tips for Tidier Type on t’Internet
   #TIDE – Scarborough, 2013
   

   View Slide

3. Harry Roberts
   @csswizardry
   

   View Slide

4. View Slide

5. View Slide

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

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. What is good type?
    

    View Slide

14. It’s about allowing the eye to move uninterrupted.
    

    View Slide

15. It’s about being clear and without distractions.
    

    View Slide

16. It’s about stopping the eye from tiring.
    

    View Slide

17. The best typography goes unnoticed.
    

    View Slide

18. Choosing your face
    1.
    

    View Slide

19. View Slide

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

    View Slide

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

    View Slide

22. View Slide

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.
    

    View Slide

24. Do
    Choose a face with wide counters and bowls.
    Keep an eye on serifs.
    Set type at a comfortable size for prolonged reading.
    

    View Slide

25. Setting your measure
    A.K.A. line length
    2.
    

    View Slide

26. View Slide

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

    View Slide

28. View Slide

29. .wrapper {
    max-width: 40em;
    }
    

    View Slide

30. Do not
    Allow your measure to keep growing with the screen.
    

    View Slide

31. Do
    Set a measure that doesn’t tire the eye.
    Stick to the numbers where possible.
    

    View Slide

32. Setting your line height
    Not the same as leading.
    3.
    

    View Slide

33. Needs to be wide enough to focus on one line at a time.
    

    View Slide

34. 140% (1.4) is generally pretty comfortable.
    

    View Slide

35. html {
    font-size: 100%;
    line-height: 1.4;
    }
    

    View Slide

36. /**
    * 1. Makes my maths a little easier.
    */
    html {
    font-size: 100%;
    line-height: 1.5; /* [1] */
    }
    

    View Slide

37. As the measure alters, so should the line height.
    Prevent the eye making awkward ‘jumps’.
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. Do not
    Pack lines too tightly.
    Allow lines to oat apart.
    

    View Slide

49. Do
    Make sure your line-height suits your measure.
    

    View Slide

50. The three (major) types of dash
    Hyphen, en, and em.
    4.
    

    View Slide

51. The hyphen
    i.
    

    View Slide

52. -
    

    View Slide

53. The hyphen
    Double-barreled names.
    Words breaking over two lines.
    Compound modi ers (e.g. a light-green dress).
    

    View Slide

54. ‘I’m looking for an old ass banger.’
    

    View Slide

55. The en dash
    ii.
    

    View Slide

56. –
    

    View Slide

57. The en dash denotes ranges. Slides 54–62 will teach us
    all about the en dash.
    

    View Slide

58. Ranges
    e.g. pp. 117–158, ages 7–12
    

    View Slide

59. Relations
    e.g. New York–London, father–son
    

    View Slide

60. More*
    

    View Slide

61. HTML: –
    Mac: Alt+-
    Win: Alt+0150
    

    View Slide

62. View Slide

63. View Slide

64. The em dash
    iii.
    

    View Slide

65. —
    

    View Slide

66. The em dash separates a clause—or separate train of
    thought—within a sentence.
    

    View Slide

67. Set em dashes—like these ones—without spaces…
    

    View Slide

68. …or set them — like these ones — with hair spaces.
    

    View Slide

69. Never set them — like these ones — fully spaced.
    

    View Slide

70. Some people uses en dashes – like these – with spaces…
    

    View Slide

71. But it all depends on the face.
    

    View Slide

72. HTML: —
    Mac: Alt+Shi +-
    Win: Alt+0151
    

    View Slide

73. View Slide

74. View Slide

75. Do not
    Use the hyphen for everything.
    

    View Slide

76. Do
    Learn the di erences and uses for each type of dash.
    Consider the face when choosing which to use.
    

    View Slide

77. Quotes
    Sixty-sixes and ninety-nines.
    5.
    

    View Slide

78. Dumb quotes
    i.
    

    View Slide

79. ''
    

    View Slide

80. ""
    

    View Slide

81. That looks nothing like a 66 or a 99!
    

    View Slide

82. View Slide

83. View Slide

84. Single quotes
    ii.
    

    View Slide

85. ‘’
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

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

    View Slide

98. Double quotes
    iii.
    

    View Slide

99. “”
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

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

     View Slide

105. View Slide

106. View Slide

107. View Slide

108. Do not
     Use dumb quotes!
     

     View Slide

109. Do
     Spend time setting quotes and apostrophes.
     

     View Slide

110. Quote convention
     “‘’” or ‘“”’?
     6.
     

     View Slide

111. ‘This is the typical “British quote” style.’
     

     View Slide

112. “This is the typical ‘American quote’ style.”
     

     View Slide

113. View Slide

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
     

     View Slide

115. Do not
     Nest the same quote marks.
     

     View Slide

116. Do
     Pick a convention sympathetic to the face.
     

     View Slide

117. Primes
     7.
     

     View Slide

118. I am 6'4"
     

     View Slide

119. Primes are not the same as straight quotes.
     They are used to denote measurements.
     

     View Slide

120. I am 6′4″
     

     View Slide

121. I am 6′4″
     I am 6'4"
     I am 6’4”
     

     View Slide

122. HTML: ′ / ″
     Mac:
     Win: Alt+8242 / Alt+8243
     

     View Slide

123. Ellipses
     8.
     

     View Slide

124. …
     

     View Slide

125. Ellipses are not three full stops.
     But it could be worse.
     

     View Slide

126. View Slide

127. View Slide

128. HTML: …
     Mac: Alt+;
     Win: Alt+0133
     

     View Slide

129. Hung punctuation
     9.
     

     View Slide

130. Hung punctuation preserves the ow of text, making it
     quicker and smoother for a user to read.
     

     View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

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

     View Slide

137. View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

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

     View Slide

146. View Slide

147. View Slide

148. View Slide

149. Do not
     Inset bullets. Ever.
     

     View Slide

150. Do
     Hang punctuation into the margin where you can.
     Otherwise hang it relative to the body of text.
     

     View Slide

151. Double spacing
     Dante’s tenth circle…
     10.
     

     View Slide

152. View Slide

153. View Slide

154. Do not
     Double space your sentences.
     

     View Slide

155. Resources
     Learn more about typography.
     a.
     

     View Slide

156. The Elements of Typographic Style
     —Robert Bringhurst
     

     View Slide

157. Detail in Typography
     —Jost Hochuli
     

     View Slide

158. Twenty-Two Tips on Typography
     —Enric Jardi
     

     View Slide

159. The Penguin Guide to Punctuation
     —R L Trask
     

     View Slide

160. Wikipedia
     http://en.wikipedia.org/wiki/Punctuation
     

     View Slide

161. Typography for Lawyers
     http://typographyforlawyers.com
     

     View Slide

162. The Elements of Typographic Style Applied to the Web
     http://webtypography.net
     

     View Slide

163. Ten Top Tips for Tidier Type
     Harry Roberts – @csswizardry
     

     View Slide