Typography for Developers Rijeka 2015

10a4285792e47c507ab4782b6716c0d1?s=47 Marko Dugonjić
September 05, 2015

Typography for Developers Rijeka 2015

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.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

September 05, 2015
Tweet

Transcript

  1. Typography for Developers Marko Dugonjić @markodugonjic Rijeka, 2015

  2. @markodugonjic speakerdeck.com/maratz

  3. None
  4. None
  5. preview.typetester.org

  6. Creative Nights

  7. None
  8. None
  9. None
  10. WE NEED TO TALK

  11. None
  12. Preparation Selecting a typeface Paragraphs Text hierarchy Tabular data THE

    PLAN
  13. PREPARATION

  14. Browser wars

  15. Reset Everything™ #protip

  16. * { margin: 0; padding: 0; }

  17. HIGH CONTRAST

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

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

  20. HIGH CONTRAST

  21. SELECTING a TYPEFACE

  22. None
  23. 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
  24. keming. (kěm'-ĭng). n. The result of improper kerning. h p://bit.ly/Nabf4X

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

  29. serif  — OR — sans-serif

  30. None
  31. None
  32. None
  33. None
  34. None
  35. 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 “ ”
  36. PARAGRAPHS

  37. 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 “ ”
  38. letter space, word spac, line space LETTER SPACE WORD SPACE

    LINE SPACE
  39. letter space, word spac, line space LETTER SPACE WORD SPACE

    LINE SPACE
  40. 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
  41. 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
  42. Line height for each breakpoint is adjusted according to the

    line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. qqqqqqqqqqqqqqqqqqqqqqqqqq dddddddddddddddddddddddddd Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ q d j Š
  43. None
  44. TEXT HIERARCHY

  45. w e b t y p o g r p

    h y T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . L e t m e a s k y o u s o m e t h i n g … H a v e y o u e v e r s a v e d a n a r t i c l e w i t h t h e i n t e n t i o n t o r e a d i t l a t e r o n a m o b i l e d e v i c e i n t h e p a r k a s s u m i n g t h a t i t s r e s p o n s i v e w e b d e s i g n i s a l l i t t a k e s f o r t h e b e s t p o s s i b l e r e a d i n g e x p e r i e n c e ? H a v e y o u e v e r b e e n d i s a p p o i n t e d w h e n y o u r e a l i z e d t h a t a r t i c l e s o n m o b i l e a r e h a r d t o r e a d b e c a u s e o f t h e p o o r l y c h o s e n l e t t e r s i z e a n d l a y o u t t h a t a p p e a r t o b e d i s p r o p o r t i o n a l t o t h e s c r e e n ? S o , w h y i s t h i s h a p p e n i n g ? H o w d o s u c h , o t h e r w i s e b e a u t i f u l r e s p o n s i v e d e s i g n s , e n d u p b e i n g s o p o o r l y e x e c u t e d o n m o b i l e ? T h e a n s w e r i s i n f a c t q u i t e c l e a r — s u c h w e b s i t e s w e r e d e v e l o p e d o n t h e d e s k t o p c o m p u t e r , w i t h d e s k t o p r e a d i n g d i s t a n c e , w i t h a _ d e s k t o p d o w n _ , r a t h e r t h a n a _ m o b i l e u p _ a p p r o a c h . I t ’ s o b v i o u s t h a t t h e c o r e r e s p o n s i v e w e b d e s i g n a r s e n a l o f m e d i a q u e r i e s , f l e x i b l e l a y o u t s a n d f l e x i b l e i m a g e s i s n o t s u f f i c i e n t . w e b t y p o g r p h y a j s d h j a h s g d T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . L e t m e a s k y o u s o m e t h i n g … H a v e y o u e v e r s a v e d a n a r t i c l e w i t h t h e i n t e n t i o n t o r e a d i t l a t e r o n a m o b i l e d e v i c e i n t h e p a r k a s s u m i n g t h a t i t s r e s p o n s i v e w e b d e s i g n i s a l l i t t a k e s f o r t h e b e s t p o s s i b l e r e a d i n g e x p e r i e n c e ? H a v e y o u e v e r b e e n d i s a p p o i n t e d w h e n y o u r e a l i z e d t h a t a r t i c l e s o n m o b i l e a r e h a r d t o r e a d b e c a u s e o f t h e p o o r l y c h o s e n l e t t e r s i z e a n d l a y o u t t h a t a p p e a r t o b e d i s p r o p o r t i o n a l t o t h e s c r e e n ? S o , w h y i s t h i s h a p p e n i n g ? H o w d o s u c h , o t h e r w i s e b e a u t i f u l r e s p o n s i v e d e s i g n s , e n d u p b e i n g s o p o o r l y e x e c u t e d o n m o b i l e ? T h e a n s w e r i s i n f a c t q u i t e c l e a r — s u c h w e b s i t e s w e r e d e v e l o p e d o n t h e d e s k t o p c o m p u t e r , w i t h d e s k t o p r e a d i n g d i s t a n c e , w i t h a _ d e s k t o p d o w n _ , r a t h e r t h a n a _ m o b i l e u p _ a p p r o a c h . I t ’ s o b v i o u s t h a t t h e c o r e r e s p o n s i v e w e b d e s i g n a r s e n a l o f m e d i a q u e r i e s , f l e x i b l e l a y o u t s a n d f l e x i b l e i m a g e s i s n o t s u f f i c i e n t . # # M A N Y M O R E V A R I A B L E S A p a r t f r o m t h e o b v i o u s v a r i a b l e s — v i e w p o r t w i d t h a n d v i e w p o r t h e i g h t — t h e r e a r e o t h e r s , s u c h a s r e a d i n g d i s t a n c e , p i x e l d e n s i t y ( o r s c r e e n c r u d e n e s s ) , d e v i c e o r i e n t a t i o n a n d v i e w p o r t a s p e c t r a t i o , b u t a l s o t h e c o n t e n t h i e r a r c h y a n d i n f o r m a t i o n d e n s i t y . B e f o r e I e l a b o r a t e e a c h , l e t m e b r i e f l y e x p l a i n t h e r u l e s o f t h e p a r a g r a p h . # # # R e a d i n g d i s t a n c e T h e r e a r e t h r e e w h i t e s p a c e s i n s i d e t h e p a r a g r a p h t h a t a r e i n t e r d e p e n d e n t — t h e l e t t e r s p a c e , t h e w o r d s p a c e a n d t h e l i n e s p a c e . I f a n y o f t h e t h r e e i s c h a n g e d , a l l t h e o t h e r s s h o u l d b e r e a s s e s s e d , t o o . 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
  46. 16 18 21 24 36 48 60 72

  47. 16 16 24 36 54 81 121

  48. modularscale.com

  49. SETTING SUBHEADS WITH CSS  blog.typekit.com/2013/07/25/setting-subheads-with-css/ webdesign.maratz.com/lab/subheads/

  50. DATA TABLES

  51. None
  52. None
  53. Today Week Month 123 1234 12345 345 3456 34567

  54. 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 ?
  55. None
  56. table { border-collapse: collapse; table-layout: fixed; width: 100%; } th,

    td { border-top: .1em solid #ccc; padding: .74em 1em .75em; vertical-align: top; } td.numeric { text-align: right; }
  57. ALMOST DONE!

  58. Preparation Selecting a typeface Paragraphs Text hierarchy Tabular data THE

    PLAN
  59. thinkingwithtype.com  fontfeed.com explorationsintypography.com typetester.org

  60. Hvala! Marko Dugonjić @markodugonjic creativenights.com