Advanced Typesetting for the Web @ ParisWeb 2012.

Slide 1

Slide 1 text

Advanced Typesetting for the Web Marko Dugonjić Paris Web 2012.

Slide 2

Slide 2 text

@markodugonjic

Slide 3

Slide 3 text

Creative Nights

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Jared M. Spool “Designers should know how to code” ≠ “Designers need to be expert coders.”

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

READING EXPERIENCE

Slide 9

Slide 9 text

Oliver Reichenstein Good typography does not look nice to please type nerds. Primarily, well set type reads well.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

CONTENT

Slide 12

Slide 12 text

200 wpm

Slide 13

Slide 13 text

WordPress reading time script http://bit.ly/MvLwOk

Slide 14

Slide 14 text

Readability index

Slide 15

Slide 15 text

Kandel & Moles Reading Ease 209 - 1.15(words/sentences) - 0.68(syllables/words) ————————————————————————— = reading ease for French

Slide 16

Slide 16 text

Check readability online http://bit.ly/Nd1jI6

Slide 17

Slide 17 text

90.0–100.0 easily understood by an average 11-year-old student 60.0–70.0 easily understood by 13- to 15-year-old students 0.0–30.0 best understood by university graduates

Slide 18

Slide 18 text

Article readability stats with PHP http://bit.ly/SVTFmd

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

CONTEXT

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

PEOPLE

Slide 24

Slide 24 text

return retour zurückkommen

Slide 25

Slide 25 text

http://dyslexicfonts.com Your brain can sometimes do funny things to letters. OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to add a kind of "gravity" to each letter, helping to keep your brain from rotating them around in ways that can make them look like other letters. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

CHOOSING A TYPEFACE

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Julian Hansen Start out by choosing the kind of project that you’ll need your typeface for.

Slide 33

Slide 33 text

type-together.com

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

Vitaly Friedman Elliot Jay Stocks Because there’s a lot going on visually on SM — screenshots, buttons and noisy ads — a sans-serif felt like a more sensible, uncluttered route for body copy.

Slide 38

Slide 38 text

1Illustration 1Illustration

Slide 39

Slide 39 text

aegh! iIl1 aegh! iIl1 aegh! iIl1 Gill Sans Myriad Pro Adelle Hat tip: Jon Tan

Slide 40

Slide 40 text

ms-studio.com

Slide 41

Slide 41 text

Je n'achète pas ici!* *pardon my french

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

lucasfonts.com

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

COMBINING TYPEFACES

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Erik Spiekermann Designers like even grayness, which is the worst thing for a reader.

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

TYPE SIZE

Slide 54

Slide 54 text

0,26mm 1,3mm 71cm 350cm

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

As seen on iA

Slide 58

Slide 58 text

16px

Slide 59

Slide 59 text

WORDS

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

text-rendering: optimizeLegibility;

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Erik Spiekermann The line breaks. Make it 2 lines, range left. This doesn’t read as one item, but 3 separate ones. Kerning is overrated.

Slide 64

Slide 64 text

YELLING IS NECESSARY SOMETIMES

Slide 65

Slide 65 text

Type DELETE to confirm deletion.

Slide 66

Slide 66 text

Expertsexchange 028759829819 Experts Exchange 028 759 829 819

Slide 67

Slide 67 text

TEXT

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

100 abc 70 abc

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Factual information bits Quick reading TIGHTEN Novels, reading for pleasure Slow reading LOOSEN

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

HEADLINES

Slide 77

Slide 77 text

WATCH HERE, CANDIES! WATCH HERE, CANDIES!

Slide 78

Slide 78 text

WATCH WATCH

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

TOO TIGHT

Slide 81

Slide 81 text

TOO TIGHT

Slide 82

Slide 82 text

TOO TIGHT

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

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

font-size: 7.2em; line-height: 1.1em; letter-spacing: -.02em; word-spacing: .15em; text-rendering: optimizeLegibility;

Slide 90

Slide 90 text

MAKE IT RESPONSIVE

Slide 91

Slide 91 text

VIEWPORT-PERCENTAGE LENGHT vw, vh, vmin, vmax The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the viewport is changed, they are scaled accordingly.

Slide 92

Slide 92 text

:root { font-size: 2.5vw; /* 2.5% of viewport’s width */ } h1 { font-size: 2rem; } p { font-size: 1rem; }

Slide 93

Slide 93 text

Viewport Sized Typography http://bit.ly/MABc8Q

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

@media (viewport size) and (pixel density) /* and (proximity sensor) */ { /* sizing based on the reading distance */ /* dpi adjusted fonts */ /* hierarchy based on the information density */ /* contrast based on the number of typographic elements */ }

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

ACTION ITEMS

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

#iseebadkerning

Slide 103

Slide 103 text

Dan Cederholm Web design is getting f’ing complex. Biggest concern is for those just starting to learn.

Slide 104

Slide 104 text

Merci! Marko Dugonjić @markodugonjic creativenights.com

Slide 105

Slide 105 text

Credits Jared M. Spool, http://bit.ly/U1FRZl Trent Walton, http://trentwalton.com Elliot Jay Stocks, http://elliotjaystocks.com Oliver Reichenstein, http://bit.ly/MBjmUA Jerry Jordan, Phone Call from God, http://bit.ly/Nvla2u Comic Sans, http://bit.ly/XlEFyT Julian Hansen, http://bit.ly/RT3v5y Type Together, http://type-together.com Smashing Book #3, http://bit.ly/U1FzBA Jon Tan, Big Type, Little Type, http://bit.ly/PBcuMt Mark Simonson studio, http://ms-studio.com Lucas fonts, http://lucasfonts.com LEGO X-men, http://bit.ly/QT3rTq Erik Spiekermann, https://vimeo.com/49744848 Jesse Taggert, http://bit.ly/WoUi97 MailChimp, http://mailchimp.com/ Dan Cederholm, http://bit.ly/RRFImA Erik Spiekermann, E.M. Ginger, Stop Stealing Sheeps & Find Out How Type Works Chris Coyer, http://css-tricks.com/examples/ViewportTypography/