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.

Transcript

1. Typography for Developers
   Marko Dugonjić @markodugonjic Rijeka, 2015
2. @markodugonjic speakerdeck.com/maratz
5. preview.typetester.org
6. Creative Nights
10. WE NEED TO TALK
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
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
28. h p://type.method.ac
29. serif
    — OR —
    sans-serif
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 Š
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
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 ?
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