Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Typography for Developers Munich 2013

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/

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

March 15, 2013
Tweet

Transcript

  1. Typography for Developers Marko Dugonjić @markodugonjic Munich, 2013 

  2. None
  3. None
  4. Creative Nights

  5. None
  6. WE NEED TO TALK  

  7. None
  8. Preparation Selecting a typeface Paragraphs Text hierarchy Vertical rhythm Tabular

    data The layout THE PLAN 
  9. PREPARATION  

  10. Browser wars

  11. None
  12. Reset Everything™ #protip

  13. * { margin: 0; padding: 0; } html { font-size:

    62.5%; /* 16px x 62.5% = 10px */ }
  14. None
  15. HIGH CONTRAST

  16. .white-on-black { color: #ccc; background: #000; } .black-on-white { color:

    #444; background: #fff; }
  17. HIGH CONTRAST

  18. HIGH CONTRAST

  19. None
  20. SELECTING a TYPEFACE  

  21. None
  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;

  25. None
  26. None
  27. None
  28. h p://type.method.ac

  29. None
  30. None
  31. serif — OR — sans-serif

  32. None
  33. None
  34. None
  35. None
  36. None
  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; }
  44. None
  45. /* short line lenghts < 45 chars */ p {

    line-height: 1.4; } /* medium line lenghts cca. 45–66 chars */ p { line-height: 1.45; }
  46. None
  47. None
  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 */ }
  58. None
  59. None
  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 */
  62. None
  63. DATA TABLES  

  64. None
  65. None
  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 ?
  70. None
  71. <table cellspacing="0" cellpadding="0" /> table { border-collapse: collapse; margin-bottom: 2.4em;

    table-layout: fixed; width: 100%; }
  72. None
  73. THE LAYOUT  

  74. text? (meta) data? images? video?

  75. 4 : 3 16 : 9

  76. None
  77. 728 x 90

  78. 160 x 600

  79. 300 x 600

  80. 300 x 250

  81. YOUR CONTENT HERE

  82. None
  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; }
  86. None
  87. None
  88. None
  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