Ten Top Tips for Tidier Type

Bb854891c46db72f4a6f9da4504e879a?s=47 Harry Roberts
October 25, 2013

Ten Top Tips for Tidier Type

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

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

October 25, 2013
Tweet

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. The en dash denotes ranges. Slides 54–62 will teach us

    all about the en dash.
  57. Ranges e.g. pp. 117–158, ages 7–12

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

  59. More*

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

  61. None
  62. None
  63. The em dash iii.

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

    a sentence.
  65. Set em dashes—like these ones—without spaces…

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

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

  68. Some people uses en dashes – like these – with

    spaces…
  69. But it all depends on the face.

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

  71. None
  72. None
  73. Do not Use the hyphen for everything.

  74. Do Learn the di erences and uses for each type

    of dash. Consider the face when choosing which to use.
  75. Quotes Sixty-sixes and ninety-nines. 5.

  76. Dumb quotes i.

  77. ''

  78. ""

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

  80. None
  81. None
  82. Single quotes ii.

  83. ‘’

  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. HTML: ‘ / ’ Mac: Alt+] / Alt+Shi +] Win:

    Alt+0145 / Alt+0146
  96. Double quotes iii.

  97. “”

  98. None
  99. None
  100. None
  101. None
  102. HTML: “ / ” Mac: Alt+[ / Alt+Shi +[ Win:

    Alt+0147 / Alt+0148
  103. None
  104. None
  105. None
  106. Do not Use dumb quotes!

  107. Do Spend time setting quotes and apostrophes.

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

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

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

  111. None
  112. 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
  113. Do not Nest the same quote marks.

  114. Do Pick a convention sympathetic to the face.

  115. Primes 7.

  116. I am 6'4"

  117. Primes are not the same as straight quotes. They are

    used to denote measurements.
  118. I am 6′4″

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

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

  121. Ellipses 8.

  122. Ellipses are not three full stops. But it could be

    worse.
  123. None
  124. None
  125. HTML: … Mac: Alt+; Win: Alt+0133

  126. Hung punctuation 9.

  127. Hung punctuation preserves the ow of text, making it quicker

    and smoother for a user to read.
  128. None
  129. None
  130. None
  131. None
  132. None
  133. ul, ol { list-style-position: outside; }

  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. blockquote { text-indent: -0.4em; }

  143. None
  144. None
  145. None
  146. Do not Inset bullets. Ever.

  147. Do Hang punctuation into the margin where you can. Otherwise

    hang it relative to the body of text.
  148. Double spacing Dante’s tenth circle… 10.

  149. None
  150. None
  151. Do not Double space your sentences.

  152. Resources Learn more about typography. a.

  153. The Elements of Typographic Style —Robert Bringhurst

  154. Detail in Typography —Jost Hochuli

  155. Twenty-Two Tips on Typography —Enric Jardi

  156. The Penguin Guide to Punctuation —R L Trask

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

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

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

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