Typography for Developers Munich 2013

A good proportion of web design today descends from print/graphic design and these influences are becoming even more prevalent. Typography for the web is now all the rage especially as we are (finally) able to use different fonts other than the tried and tested workhorses Arial, Verdana & Georgia. Therefore, solid knowledge of typography basics should really be a must for every internet professional today. Learn how to design a web page with type and impress your fellow designers.

Accompanying demo: http://webdesign.maratz.com/lab/typography-for-developers/

Transcript

1. Typography for Developers Marko Dugonjić @markodugonjic Munich, 2013 
4. Creative Nights
6. WE NEED TO TALK  
8. Preparation Selecting a typeface Paragraphs Text hierarchy Vertical rhythm Tabular data The layout THE PLAN 
9. PREPARATION  
10. Browser wars
12. Reset Everything™ #protip
13. * { margin: 0; padding: 0; } html { font-size: 62.5%; /* 16px x 62.5% = 10px */ }
15. HIGH CONTRAST
16. .white-on-black { color: #ccc; background: #000; } .black-on-white { color: #444; background: #fff; }
17. HIGH CONTRAST
18. HIGH CONTRAST
20. SELECTING a TYPEFACE  
22. Afrikaans Albanian Asturian Baraba Tatar Bislama Bokmal Norwegian Breton Catalan Chamorro Danish Dutch English Estonian Faeroese Finnish Franco- Provencal French Friulian Galician German Icelandic Irish Italian Ladin Luxembourgian Manx Gaelic Nynorsk Norwegian Occitan Portuguese Rhaeto- Romance Romansch Sco ish Gaelic Southern Sami Spanish Swedish Ume Sami Walloon West Frisian Balk Basque Bosnian Bulgarian Croatian Czech Erzya Esperanto Hungarian Inari Sami Karachay-Balkar Karaim Kashubian Kazan Tatar Kumyk Kurdish Lak Latvian (Le ish) Lithuanian Lule Sami Macedonian Maltese Moksha Moldavian Nogay Polish Romanian Russian Slovak Slovenian Sorbian Lower Sorbian Upper Turkish Ubykh Vamhusmal
23. keming. (kěm'-ĭng). n. The result of improper kerning. h p://bit.ly/Nabf4X
24. text-rendering: optimizeLegibility;
28. h p://type.method.ac
31. serif — OR — sans-serif
37. Because there’s a lot going on visually on SM — screenshots, bu ons and noisy ads — a sans-serif felt like a more sensible, unclu ered route for body copy. — ELLIOT JAY STOCKS + VITALY FRIEDMAN “ ”
38. PARAGRAPHS  
39. Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66- character line (counting both le ers and spaces) is widely regarded as ideal. For multiple column work, a be er average is 40 to 50 characters. — ROBERT BRINGHURST “ ”
40. letter space, word spac, line space LETTER SPACE WORD SPACE LINE SPACE
41. letter space, word spac, line space LETTER SPACE WORD SPACE LINE SPACE
42. B y p r e s e r v i n g t h e w h i t e s p a c e h i e r a r c h y , w e c a n a c h i e v e t h e b e s t r e a d i n g e x p e r i e n c e f o r v a r i o u s s c e n a r i o s . H o w e v e r , t h e s a t i s f a c t o r y l i n e l e n g t h o f 4 5 t o 7 5 c h a r a c t e r s p e r l i n e l i m i t s a n u m b e r o f a c c e p t a b l e c o m b i n a t i o n s , n o t t o c h a r a c t e r s … B y p r e s e r v i n g t h e w h i t e s p a c e h i e r a r c h y , w e c a n a c h i e v e t h e b e s t r e a d i n g e x p e r i e n c e f o r v a r i o u s s c e n a r i o s . H o w e v e r , t h e s a t i s f a c t o r y l i n e l e n g t h o f 4 5 t o 7 5 c h a r a c t e r s p e r l i n e l i m i t s a n u m b e r o f a c c e p t a b l e c o m b i n a t i o n s , n o t t o m e n t i o n 75 45
43. p, li, th, td { font-size: 1.6em; line-height: 1.5; /* 16px/24px */ } p, li { max-width: 38em; }
45. /* short line lenghts < 45 chars */ p { line-height: 1.4; } /* medium line lenghts cca. 45–66 chars */ p { line-height: 1.45; }
48. Don’t overdo it! #protip
49. L i n e h e i g h t f o r e a c h b r e a k p o i n t i s a d j u s t e d a c c o r d i n g t o t h e l i n e l e n g t h r e n d e r e d a t t h a t b r e a k p o i n t . S h o r t l i n e l e n g t h s r e q u i r e t i g h t e r l i n e s p a c i n g , b e c a u s e t h e r e a d e r ’ s e y e d o e s n ’ t h a v e t o t r a v e l m u c h t o r e a c h t h e n e x t l i n e o f t e x t . A s l i n e l e n g t h g e t s l o n g e r , m o r e l i n e s p a c i n g i s r e q u i r e d . L i n e h e i g h t f o r e a c h b r e a k p o i n t i s a d j u s t e d a c c o r d i n g t o t h e l i n e l e n g t h r e n d e r e d a t t h a t b r e a k p o i n t . S h o r t l i n e l e n g t h s r e q u i r e t i g h t e r l i n e s p a c i n g , b e c a u s e t h e r e a d e r ’ s e y e d o e s n ’ t L i n e h e i g h t f o r e a c h b r e a k p o i n t i s a d j u s t e d a c c o r d i n g t o t h e l i n e l e n g t h r e n d e r e d a t t h a t b r e a k p o i n t . S h o r t l i n e l e n g t h s r e q u i r e t i g h t e r l i n e s p a c i n g , b e c a u s e t h e r e a d e r ’ s e y e d o e s n ’ t h a v e t o t r a v e l m u c h t o r e a c h t h e n e x t l i n e o f t e x t . A s l i n e l e n g t h g e t s l o n g e r , m o r e l i n e s p a c i n g i s r e q u i r e d . L i n e h e i g h t f o r e a c h b r e a k p o i n t i s a d j u s t e d a c c o r d i n g t o t h e l i n e l e n g t h r e n d e r e d a t t h a t b r e a k p o i n t . S h o r t l i n e l e n g t h s r e q u i r e t i g h t e r l i n e s p a c i n g , b e c a u s e t h e r e a d e r ’ s e y e d o e s n ’ t
50. TEXT HIERARCHY  
51. 16 18 21 24 36 48 60 72
52. 16 18 21 24 36 48 60 72 16 24 36 54 81 121
53. h3, h2, h1 { font-weight: bold; line-height: 1.5em; } h3 { font-size: 1.6em; } h2 { font-size: 2.4em; } h1 { font-size: 3.6em; }
54. Why is PHP better than Python? Why is PHP be er than Python?
55. .display-text { font-size: 12em; letter-spacing: -.02em; line-height: 1em; text-rendering: optimizeLegibility; }
56. VERTICAL RHYTHM  
57. p { margin-bottom: 1.5em; /* margin-bottom = line-height */ } ul, ol { margin-bottom: 2.4em; /* 1.6em (<li>) x 1.5em */ }
60. html { background: #fff url(baseline.png); }
61. html { background-image: linear-gradient(top, #fff 0, #fff 95%, #f00 95%, #f00 100%); background-size: 100% 24px; background-repeat: repeat-y; } /* Note: prefix-omitted code */
63. DATA TABLES  
66. T o d a y W e e k M o n t h 1 2 3 1 2 3 4 1 2 3 4 5 3 4 5 3 4 5 6 3 4 5 6 7
67. <table cellspacing="0" cellpadding="0" /> table { border-collapse: collapse; margin-bottom: 2.4em; /* or 3.6em or 4.8em */ }
68. th, td { border-top: .1em solid #ccc; padding: .74em 1em .75em; /* .75em = 1.5em/2 */ vertical-align: top; } .numeric { text-align: right; font-family: 'Anonymous Pro', monospace; }
69. S i n g l e r o w v a l u e V e r t i c a l - a l i g n - t o p i s q u i t e h a n d y w i t h l a r g e r s t r i n g s o f t e x t w i t h i n e a c h t a b l e c e l l . I m a g i n e t h a t y o u h a v e c o n t a i n s a s i n g l e l i n e o f d a t a ? S i n g l e r o w v a l u e V e r t i c a l - a l i g n - t o p i s q u i t e h a n d y w i t h l a r g e r s t r i n g s o f t e x t w i t h i n e a c h t a b l e c e l l . I m a g i n e t h a t y o u h a v e c o n t a i n s a s i n g l e l i n e o f d a t a ?
71. <table cellspacing="0" cellpadding="0" /> table { border-collapse: collapse; margin-bottom: 2.4em; table-layout: fixed; width: 100%; }
73. THE LAYOUT  
74. text? (meta) data? images? video?
75. 4 : 3 16 : 9
77. 728 x 90
78. 160 x 600
79. 300 x 600
80. 300 x 250
81. YOUR CONTENT HERE
83. 300 * 1.61 = cca. 480px 300px Text
84. (300 + 20 + 20) * 1.61 ≈ 550 550 – 20 – 20 = 510
85. .main-content { float: left; width: 51em; padding: 2.4em 2em; } .supplementary-content { float: left; width: 30em; padding: 2.4em 2em; } #wrapper { width: 89em; margin: 0 auto; overflow: auto; }
89. ALMOST DONE!  
90. Preparation Selecting a typeface Paragraphs Text hierarchy Vertical rhythm Tabular data The layout THE PLAN 
91. thinkingwithtype.com fontfeed.com explorationsintypography.com typetester.org
92. Dankeschön! Marko Dugonjić @markodugonjic creativenights.com