Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Creative Nights

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WE NEED TO TALK  

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Preparation Selecting a typeface Paragraphs Text hierarchy Vertical rhythm Tabular data The layout THE PLAN 

Slide 9

Slide 9 text

PREPARATION  

Slide 10

Slide 10 text

Browser wars

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Reset Everything™ #protip

Slide 13

Slide 13 text

* { margin: 0; padding: 0; } html { font-size: 62.5%; /* 16px x 62.5% = 10px */ }

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

HIGH CONTRAST

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

HIGH CONTRAST

Slide 18

Slide 18 text

HIGH CONTRAST

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

SELECTING a TYPEFACE  

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

keming. (kěm'-ĭng). n. The result of improper kerning. h p://bit.ly/Nabf4X

Slide 24

Slide 24 text

text-rendering: optimizeLegibility;

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

h p://type.method.ac

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

serif — OR — sans-serif

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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 “ ”

Slide 38

Slide 38 text

PARAGRAPHS  

Slide 39

Slide 39 text

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 “ ”

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

p, li, th, td { font-size: 1.6em; line-height: 1.5; /* 16px/24px */ } p, li { max-width: 38em; }

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

/* short line lenghts < 45 chars */ p { line-height: 1.4; } /* medium line lenghts cca. 45–66 chars */ p { line-height: 1.45; }

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Don’t overdo it! #protip

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

TEXT HIERARCHY  

Slide 51

Slide 51 text

16 18 21 24 36 48 60 72

Slide 52

Slide 52 text

16 18 21 24 36 48 60 72 16 24 36 54 81 121

Slide 53

Slide 53 text

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; }

Slide 54

Slide 54 text

Why is PHP better than Python? Why is PHP be er than Python?

Slide 55

Slide 55 text

.display-text { font-size: 12em; letter-spacing: -.02em; line-height: 1em; text-rendering: optimizeLegibility; }

Slide 56

Slide 56 text

VERTICAL RHYTHM  

Slide 57

Slide 57 text

p { margin-bottom: 1.5em; /* margin-bottom = line-height */ } ul, ol { margin-bottom: 2.4em; /* 1.6em (
  • ) x 1.5em */ }

    • Slide 58

    Slide 58 text

    No content

    Slide 59

    Slide 59 text

    No content

    Slide 60

    Slide 60 text

    html { background: #fff url(baseline.png); }

    Slide 61

    Slide 61 text

    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 */

    Slide 62

    Slide 62 text

    No content

    Slide 63

    Slide 63 text

    DATA TABLES  

    Slide 64

    Slide 64 text

    No content

    Slide 65

    Slide 65 text

    No content

    Slide 66

    Slide 66 text

    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

    Slide 67

    Slide 67 text

    table { border-collapse: collapse; margin-bottom: 2.4em; /* or 3.6em or 4.8em */ }

    Slide 68

    Slide 68 text

    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; }

    Slide 69

    Slide 69 text

    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 ?

    Slide 70

    Slide 70 text

    No content

    Slide 71

    Slide 71 text

    table { border-collapse: collapse; margin-bottom: 2.4em; table-layout: fixed; width: 100%; }

    Slide 72

    Slide 72 text

    No content

    Slide 73

    Slide 73 text

    THE LAYOUT  

    Slide 74

    Slide 74 text

    text? (meta) data? images? video?

    Slide 75

    Slide 75 text

    4 : 3 16 : 9

    Slide 76

    Slide 76 text

    No content

    Slide 77

    Slide 77 text

    728 x 90

    Slide 78

    Slide 78 text

    160 x 600

    Slide 79

    Slide 79 text

    300 x 600

    Slide 80

    Slide 80 text

    300 x 250

    Slide 81

    Slide 81 text

    YOUR CONTENT HERE

    Slide 82

    Slide 82 text

    No content

    Slide 83

    Slide 83 text

    300 * 1.61 = cca. 480px 300px Text

    Slide 84

    Slide 84 text

    (300 + 20 + 20) * 1.61 ≈ 550 550 – 20 – 20 = 510

    Slide 85

    Slide 85 text

    .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; }

    Slide 86

    Slide 86 text

    No content

    Slide 87

    Slide 87 text

    No content

    Slide 88

    Slide 88 text

    No content

    Slide 89

    Slide 89 text

    ALMOST DONE!  

    Slide 90

    Slide 90 text

    Preparation Selecting a typeface Paragraphs Text hierarchy Vertical rhythm Tabular data The layout THE PLAN 

    Slide 91

    Slide 91 text

    thinkingwithtype.com fontfeed.com explorationsintypography.com typetester.org

    Slide 92

    Slide 92 text

    Dankeschön! Marko Dugonjić @markodugonjic creativenights.com