Universal Typography (June 2014)

The web is universal and, in this talk, Tim Brown shows us how to practice typography in a way that is equally universal. Focusing on traditional typographic principles, while also embracing progressive enhancement, Tim explains how fonts, CSS, web-enabled devices, and user contexts coexist. Together, we will reevaluate what it means to successfully set type — and inform our routine decisions about typefaces, font sizes, and white space.

Transcript

1. @nicewebtype Tim Brown Universal Typography
6. typotheque.com/articles/type_families
7. someplace.com/something-awesome
9. someplace.com/something-awesome
10. someplace.com/something-awesome
11. — John Allsopp “Underpinning all this is the belief that designers are controllers.” alistapart.com/articles/dao
12. — Mike Monteiro “As a designer you are responsible for what you put into the world.” abookapart.com/products/design-is-a-job
13. @espiekermann I say that all the time, because it’s true.” “
14. j.mp/better-than-free
15. — Thomas Phinney “People can be affected by good typography without being actively aware of it.” j.mp/phinney-commarts
16. Structure Presentation Behavior
17. someplace.com/something-awesome
18. someplace.com/something-awesome
20. — Tim Berners-Lee “The primary design principle underlying the Web’s usefulness and growth is universality.” j.mp/tbl-universality
21. zeldman.com/talent
23. someplace.com/something-awesome
24. someplace.com/something-awesome
25. someplace.com/something-awesome
26. someplace.com/something-awesome
27. insideparagraphs.com
28. The Stroke: Theory of Writing, by Gerrit Noordzij
29. someplace.com/something-awesome
30. beautiful group
31. someplace.com/something-awesome
32. size / leading × measure element { font: 1em/1.5 "Font name", serif; width: 36em; }
33. someplace.com/something-awesome
35. someplace.com/something-awesome
36. someplace.com/something-awesome
37. someplace.com/something-awesome
38. typekit.com
39. fontbureau.com/readingedge
40. — Erik Spiekermann “If you want good type on Retina displays, just search for faces that happen to look good.” @espiekermann
41. someplace.com/something-awesome
42. someplace.com/something-awesome
43. someplace.com/something-awesome
44. someplace.com/something-awesome
45. someplace.com/something-awesome
46. nicewebtype.com/x/4r
47. someplace.com/something-awesome
48. someplace.com/something-awesome
49. •What font should I use? •What’s a good font-size? •What’s a good line-height? •What are good breakpoints? •Should I use a grid?
50. karenmcgrane.com feltpresence.com
51. thegreatdiscontent.com
52. thegreatdiscontent.com
53. j.mp/stocks-spiekermann
54. set size / leading × measure
55. fit size / leading × measure
56. set set fit fit fit fit set
57. setting type size / leading × measure
58. alistapart.com/article/howtosizetextincss
59. — Scott Jehl “We [would] need to calculate em values differently when they’re used in a media query than in a CSS property value.” nicewebtype.com/x/7s
60. Setting type size CSS html { font-size: 100%; } p { font-size: 1em; } .wf-active p { font-size: 1.125em; }
61. Setting type size CSS html { font-size: 100%; } p { font-size: 1em; } .wf-active p { font-size: 1.125em; }
62. Setting type size CSS html { font-size: 100%; } p { font-size: 1em; } .wf-active p { font-size: 1.125em; }
63. j.mp/fontevents
64. someplace.com/something-awesome
65. em box
66. webfontspecimen.com
68. practice.typekit.com
69. fontmetrics.com
70. 10, 11, 12, 14, 16, 18, 21, 24, 30, 36
71. — Robert Bringhurst “Don’t compose without a scale.” The Elements of Typographic Style
72. modularscale.com
73. trentwalton.com
74. someplace.com/something-awesome
75. moltenleading.com $("p").moltenLeading({ minline: 1.3, maxline: 1.4, minwidth: 20em, maxwidth: 30em }); JS
76. 1. 2. 3. Size Measure Leading Relative to device default font-size Tailored to the type you’re using Inspired by a modular scale Let flex, determine limits Molten, via measure limits Loose by default
77. fitting type size / leading × measure
78. 1. 2. 3. Leading Measure Size
79. breakpoint! breakpoint! breakpoint! breakpoint! nt! nt! nt! nt! br br br br
80. fittextjs.com responsivemeasure.com
81. cdpn.io/EGjAm
82. cdpn.io/EGjAm
83. cdpn.io/EGjAm
84. cdpn.io/EGjAm
85. someplace.com/something-awesome
86. Heading with many words Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
87. 1. 2. 3. Measure Size Leading Satisfies graphic goals Fit to container Let flex, determine limits Adjust accordingly
88. containers size / leading × measure
89. gridsetapp.com singularity.gs
90. css-tricks.com/dont-overthink-it-grids
91. pressure
92. davatron5000.github.io/fitWeird
93. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum container too wide...
94. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum center text block?
95. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. let measure be wide?
96. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. extended typeface?
97. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. bigger font size?
98. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at container too narrow...
99. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at let viewport scroll?
100. let measure be narrow? Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at
101. condensed typeface? Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida
102. smaller font size? Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu
104. j.mp/ia-basics
105. j.mp/marko-face-demo
106. Core Text DirectWrite Rooney Sans Regular (400)
107. HTML .tr-coretext { font-weight: 300; } CSS <html class="tr-coretext tr-aa-subpixel"> typerendering.com
108. alistapart.com/article/content-out-layout
109. — Mark Boulton “Content, layout, behaviour, perception, brand, feel. All of those things are open for change if we have a good set of sensors.” markboulton.co.uk
110. — Jordan Moore “The most accurate sensor is user preference.” @jordanmoore
111. craigmod.com/bibliotype
112. j.mp/sherman-ala
113. @adobetype
115. someplace.com/something-awesome
116. Screenshots via smashingmagazine.com & tested.com
117. contentsmagazine.com
119. Thank you. @nicewebtype Tim Brown