Designing for Words: Elements of Typographic Style for the Web

At the beginning of the web, all we had was words on a screen. 22 years later, the web we design for is a far more complicated place, but words still lie at the very heart of what we do.

In recent years, we’ve been given far more control over the way we style our content, allowing us to do things we haven’t been able to before via JavaScript, HTML and CSS. However, it’s not just from an aesthetic point of view that we need to be looking at this, but from a simple point of legibility as well.

Looking at some of the fundamentals of typography and layout design, I plan to look at how we can make the words we display beautiful and user friendly, looking at how to choose the right font for the job and pitfalls of web fonts to look out for, to how we implement print-based rules of thumb using CSS and JS, to how to tackle some of the trickier problems such as orphans, widows, rivers, columns and how to tackle responsive from a content point of view.

Transcript

1. Designing for Words Elements of Typographic Style for the Web Luke Murphy-Wearmouth @lurkmoophy
2. I am not an expert. I am an enthusiast.
3. leave the road when you wish.
4. break the rules, break them 
 beautifully, deliberately 
 and well.
5. The sections: 1. An Introduction to Type 2. Choosing the Right Tool 3. Typesetting for the Web 4. Typesetting for RWD
6. An Introduction to Type
7. Typeface vs Font 1. Typeface — the overall design of a collection
 Helvetica is a typeface
8. Typeface vs Font 1. Typeface — the overall design of a collection
 Helvetica is a typeface 2. Font — The physical embodiment of a collection of letters, numbers, symbols etc.
 Helvetica Bold is a font
9. Typeface vs Font font is what you use Typeface is what you see
10. Typesetting 1. Typesetting is the composition of text by means of arranging physical types or the digital equivalents.
11. Anatomy of a character 1. x-height — the space between the baseline and the mean line. The height of a lowercase x.
12. x baseline meanline
13. Anatomy of a character 1. x-height — the space between the baseline and the mean line. The height of a lowercase x. 2. ascenders and descenders — the tops and bottoms of letters like b, d, j, q
14. b ascender q descender
15. Anatomy of a character 1. x-height — the space between the baseline and the mean line. The height of a lowercase x. 2. ascenders and descenders — the tops and bottoms of letters like b, d, j, q 3. cap-height — height of a capital letter
16. Hcap-height
17. Anatomy of a character 4. counter — the open space within a letter, both partially closed (c) and closed (o)
18. dcounter
19. Anatomy of a character 4. counter — the open space within a letter, both partially closed (c) and closed (o) 5. serif — a little stroke found at the end of main vertical and horizontal strokes of some letterforms
20. dserif serif
21. Kerning 1. adjusting the space between characters in a proportional font to achieve a visually pleasing result
22. War
23. War
24. Leading 1. The space between baselines
25. Choosing the Right Tool
26. A type that stops you in the middle of a sentence and asks you to admire its smartness is a bad type “
27. Legibility & Beauty
28. The way we read
29. rods cones
30. rods cones process detail register sharpness
31. detect movement sensitive in low light rods cones process detail register sharpness
32. foveal
33. foveal parafoveal
34. foveal parafoveal peripheral
35. this is a sentence made of words saccade
36. this is a sentence made of words fixation point
37. The morning had dawned clear and cold, with a crispness that hinted at the end of summer. They set forth at daybreak to see a man beheaded, twenty in all, and Bran rode among them, nervous with excitement. This was the first time he had been deemed old enough to go with his lord father and his brothers to see the king's justice done. It was the ninth year of summer, and the seventh of Bran's life. The man had been taken outside a small holdfast in the hills. Robb thought he was a wildling, his sword sworn to Mance Rayder, the King-beyond-the-Wall. It made Bran's skin prickle to think of it. He remembered the hearth tales Old Nan told them. The wildlings were cruel men, she said, slavers and slayers and thieves. They consorted with giants and ghouls, stole girl children in the dead of night, and drank blood from polished horns. And their women lay with the Others in the Long Night to sire terrible half-human children.
38. Testing 1. greater understanding > speed
39. the Rules 1. Read the text before designing it
40. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text
41. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements
42. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements 4. Honour and elucidate the character of the text
43. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements 4. Honour and elucidate the character of the text 5. Shape the page
44. the Rules 1. Read the text before designing it 2. Work out the inner logic of the text 3. Consider the other elements 4. Honour and elucidate the character of the text 5. Shape the page 6. Give full attention to incidental details
45. Learn the basics of identification
46. 3 contexts 1. Technical
47. What was the original intended use?
48. Special effects
49. Consider usage
50. Licensing
51. 3 contexts 1. Technical 2. Thematic
52. Suit the task as well as the subject
53. 3 contexts 1. Technical 2. Thematic 3. Historical
54. the natural idiom
55. Echos & associations
56. Webfonts 1. Rendering
57. Type Rendering Mix typerendering.com
58. Webfonts 1. Rendering 2. FOUT http://help.typekit.com/customer/portal/articles/6853-styling-fallback-fonts-using-font-events http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/
59. Typesetting for the Web
60. Modular scale
61. Use ems not pt 1. EU law
62. Use ems not pt 1. EU law 2. It keeps everything relative and scalable
63. Use ems not pt 1. EU law 2. It keeps everything relative and scalable 3. ems vs rems
64. Choosing your scale 0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5 http://www.type-scale.com/
65. Choosing your scale 0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5 p h4 h3 h2 h1
66. Choosing your scale body { font-size: 16px; } p { font-size: 1em; } h1 { font-size: 3em; }
67. Margins 1. Lock the text block
68. Margins 1. Lock the text block 2. Frame the text block
69. Margins 1. Lock the text block 2. Frame the text block 3. Protect the text block
70. Margins Rule of thumb: 5% either way
71. Margins p { font-size: 1em; width: 90%; margin: 0 auto; }
72. Measure 1. Ideal line length is 45-75 characters http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
73. Measure 1. Ideal line length is 45-75 characters 2. Dependent on the font, alignment etc.
74. Measure 1. Ideal line length is 45-75 characters 2. Dependent on the font, alignment etc. 3. Use ems not pxs/percentages
75. Measure p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; }
76. Letterspacing 1. Don’t letterspace lowercase letters without a reason
77. Letterspacing 1. Don’t letterspace lowercase letters without a reason 2. Letterspace strings of capitals, small caps and 
 strings of digits
78. letter-spacing: 1. You can use positive and negative values 2. It’s animatable 3. Not entirely cross-browser
79. letter-spacing: h1 { font-size: 3em; letter-spacing: 1em; } .string-of-digits { letter-spacing: 0.05em; }
80. letter-spacing: $( document ).ready( function() {
 var rex = new RegExp( "([0-9]{3,})", “gm" );
 $( “*” ).each( function(){
 var $this = $( this );
 var content = $this.html();
 $this.html( content.replace( rex, “<span class=
 “string-of-digits”>$1</span>” ) );
 });
 });

81. Leading 1. Music is the space between notes
82. Leading 1. Music is the space between notes 2. It’s about vertical rhythm and feel
83. Leading 1. Music is the space between notes 2. It’s about vertical rhythm and feel 3. My rule of thumb: 140%
84. Leading p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; line-height: 1.4em; }
85. Kerning 1. Kern consistently or not at all 2. It’s more about font choice than technical solutions
86. text-rendering: 1. auto
87. text-rendering: 1. auto 2. optimizeSpeed
88. text-rendering: 1. auto 2. optimizeSpeed 3. optimizeLegibility
89. text-rendering: 1. auto 2. optimizeSpeed 3. optimizeLegibility 4. geometricPrecision
90. text-rendering: p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; line-height: 1.4em; /*probably not a good idea yet */ text-rendering: optimizeLegibility }
91. Kerning 1. Kern consistently or not at all 2. It’s more about font choice than technical solutions 3. kerning.js (if you’re a control freak) #pixel-perfect { -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0; }
92. Vertical space and rhythm 1. Tempo should not change arbitrarily in music
93. Vertical space and rhythm 1. Tempo should not change arbitrarily in music 2. Even multiples of the basic leading
94. Vertical space and rhythm p { font-size: 1em; width: 90%; margin: 0 auto; max-width: 33em; line-height: 1.4em; margin-bottom: 0.7em; }
95. Vertical space and rhythm p { font-size: 1em; width: 90%; margin: 0 auto 0.7em auto; max-width: 33em; line-height: 1.4em; }
96. Vertical space and rhythm 1. Tempo should not change arbitrarily in music 2. Even multiples of the basic leading 3. Don’t interrupt the rhythm of the page
97. Vertical space and rhythm p { font-size: 1em; width: 90%; margin: 0 auto 0.7em auto; max-width: 33em; line-height: 1.4em; hanging-punctuation: first; }
98. Vertical space and rhythm blockquote p, .hanging-punctuation { text-indent: -0.5em; }
99. Vertical space and rhythm ul, ol { padding-left: 0; overflow: visible; }
100. Types of dashes 1. Pedantry at its finest
101. Types of dashes subtraction sign/hyphen - en dash – &ndash; em dash — &mdash; http://en.wikipedia.org/wiki/Dash
102. Types of dashes 1. Pedantry at its finest 2. Use an en dashes with space either side in copy, 
 or a close set em dash
103. Types of dashes 1. Pedantry at its finest 2. Use an en dashes with space either side in copy, 
 or a close set em dash 3. Use a close set en dash for ranges
104. Quotation marks 1. " — straight quotes 2. &lsquo; &rsquo; and &ldquo; &rdquo;
105. Quotation marks str = str.replace(/"(?=\w|$)/g, "&#8220;"); 
 str = str.replace(/(?<=\w|^)"/g, "&#8221;"); 
 str = str.replace(/(?<=[\w,.?!\)]|^)"/g, "&#8221;");
106. Columns 1. Now possible with CSS3 and column-count:
107. Columns p { font-size: 1em; width: 90%; margin: 0 auto 0.7em auto; max-width: 33em; line-height: 1.4em; column-count: 3; column-gap: 1.4em; -moz-column-count: 3; -moz-column-gap: 1.4em; -webkit-column-count: 3; -webkit-column-gap: 1.4em; }
108. Columns 1. Now possible with CSS3 and column-count: 2. A word of caution…
109. Rivers 1. Still manual
110. Widows & orphans 1. Widows still manual, using &nbsp;
111. Widows & orphans 1. Widows still manual, using &nbsp; 2. There are other solutions, but they come with a price https://github.com/matthewlein/jQuery-widowFix
112. Widows & orphans 1. Widows still manual, using &nbsp; 2. There are other solutions, but they come with a price 3. Orphans apparently sorted by the column algorithm
113. Widows & orphans 1. Widows still manual, using &nbsp; 2. There are other solutions, but they come with a price 3. Orphans apparently sorted by the column algorithm 4. Don’t forget print
114. Widows & orphans @media print { p { orphans: 3; widows: 3; } }
115. Typesetting and Responsive Web Design
116. The things that don’t matter (don’t hit me)
117. Aim for consistency in quality
118. The things that do matter
119. Typographic scale http://typecast.com/blog/a-more-modern-scale-for-web-typography
120. Context http://alistapart.com/column/responsive-typography-is-a-physical-discipline
121. The rabbit hole
122. colophon The body text was set in Minion Pro Medium, Medium Italic, Semibold and Semibold Italic Code was set in Andale Mono Regular.
123. Designing for Words Elements of Typographic Style for the Web Luke Murphy-Wearmouth @lurkmoophy