Responsive Web Design & Typography

Slide 1

Slide 1 text

Responsive Web Design and Typography Fronteers meeting @ Inventis, 10 april 2012

Slide 2

Slide 2 text

2011. This is how it all started...

Slide 3

Slide 3 text

www.alistapart.com/articles/responsive-web-design/

Slide 4

Slide 4 text

Responsive web design + fluid grids + media queries + flexible images I won’t be talking about flexible media today.

Slide 5

Slide 5 text

Back to 1994. This early website was completely ﬂuid ( we might even say responsive? ).

Slide 6

Slide 6 text

This is what a 640px wide window looks like today (on a 13” MacBook Air)

Slide 7

Slide 7 text

1997

Slide 8

Slide 8 text

“The web’s content must be build to travel across vast networks to unknown devices and browsers.” - Jeffrey Veen, Hotwired Style, 1997

Slide 9

Slide 9 text

2000 www.alistapart.com/articles/dao/

Slide 10

Slide 10 text

“Make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages.” - John Allsopp, A List Apart, 2000

Slide 11

Slide 11 text

2006 clagnut.com/blog/1663/

Slide 12

Slide 12 text

“There’s an different approach to web page layout which is gradually getting some traction. The idea is that the layout is changed to best accommodate the window size.” - Richard Rutter, own blog, 2006

Slide 13

Slide 13 text

Example: when the screen was wide enough, a third column was shown www.jrvelasco.com

Slide 14

Slide 14 text

This was done with javascript, measuring the viewport width.

Slide 15

Slide 15 text

Also in 2006. A smart man wrote a smart book.

Slide 16

Slide 16 text

“... increasing a page’s ﬂexibility and taking necessary steps to ensure that it’s readable in as many circumstances as possible...” - Dan Cederholm, Bulletproof Web Design, 2006 This time focusing on readability instead of layout.

Slide 17

Slide 17 text

www.simplebits.com/publications/bulletproof

Slide 18

Slide 18 text

This is the book’s example site.

Slide 19

Slide 19 text

Bulletproof test: increase the font size by a few notches

Slide 20

Slide 20 text

The latest release of the book incorporates responsive web design principles.

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

So what happened between 2006 and 2010?

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

I truely believe that we would not be were we are today if it weren’t for the iPhone.

Slide 26

Slide 26 text

How do we keep our texts readable in such a ﬂexible environment?

Slide 27

Slide 27 text

Responsive Web Design and Typography

Slide 28

Slide 28 text

Typography readability + character Character: does it represent the client or message?

Slide 29

Slide 29 text

A great example of readability.

Slide 30

Slide 30 text

If people need this to be able to read your website...

Slide 31

Slide 31 text

...you did something wrong. (example: 11px grey Arial body text)

Slide 32

Slide 32 text

How do we know it’s readable?

Slide 33

Slide 33 text

“Read!” - me Read your text. Read it a lot. Is it easy to read?

Slide 34

Slide 34 text

Typography number of fonts Hint: don’t use too many.

Slide 35

Slide 35 text

One font

Slide 36

Slide 36 text

aworkinglibrary.com

Slide 37

Slide 37 text

seedconference.com

Slide 38

Slide 38 text

Two fonts

Slide 39

Slide 39 text

lostworldsfairs.com/atlantis

Slide 40

Slide 40 text

Readable text font size measure leading Measure and leading [pronounced: ledding] come from the days of typesetting.

Slide 41

Slide 41 text

Readable text font size line length line spacing In more human language.

Slide 42

Slide 42 text

www.informationarchitects.jp/en/100e2r/

Slide 43

Slide 43 text

1em ≠ 1em 1 em was originally the width of an uppercase letter M set in lead.

Slide 44

Slide 44 text

16px ≠ 16px

Slide 45

Slide 45 text

The Adventures of Sherlock Holmes 48px Georgia The Adventures of Sherlock Holmes 48px Times New Roman

Slide 46

Slide 46 text

M 288px Georgia 288px Times New Roman M

Slide 47

Slide 47 text

The Adventures of Sherlock Holmes 48px Georgia The Adventures of Sherlock Holmes 48px Helvetica

Slide 48

Slide 48 text

M 288px Georgia 288px Helvetica M Today, in the digital world, it is harder to deﬁne what 1 em exactly is.

Slide 49

Slide 49 text

... 16 18 21 24 36 48 The typographic scale The typographic scale is a standard also going back to the days of typesetting.

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

16px 18px 21px 24px 36px 48px The typographic scale More suitable for titles on larger screens

Slide 52

Slide 52 text

48 36 24

Slide 53

Slide 53 text

16px 18px 21px 24px 36px 48px The typographic scale Looking better on smaller screens (tablets, iPad,...)

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

16px 18px 21px 24px 36px 48px The typographic scale Even smaller for mobile and small screens.

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Better font size Larger screens need a larger font size, smaller screens need a smaller font size.

Slide 60

Slide 60 text

body { font-size: 100%; } p { font-size: 1em; //16px } Great way of working. If you ever need to scale, you just need to change the root size.

Slide 61

Slide 61 text

body { font-size: 100%; } ul { font-size: 1em; //16px } footer ul { font-size: 0.75em; //12px } footer ul p { font-size: 1.33em; //? } But it can get complicated when nesting elements.

Slide 62

Slide 62 text

body { font-size: 100%; } ul { font-size: 1rem; //16px } footer ul { font-size: 0.75rem; //12px } footer ul p { font-size: 1rem; //16px } rem (root em) relates back to the root, not to the parent element.

Slide 63

Slide 63 text

caniuse.com

Slide 64

Slide 64 text

Readable text font size line length line spacing

Slide 65

Slide 65 text

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page...” - The Elements of Typographic Style Applied to the Web

Slide 66

Slide 66 text

A handy way of showing character 45 and 75 within a text. Hat tip to Trent Walton

Slide 67

Slide 67 text

Readable text font size line length: columns line spacing

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

@media only screen and (min-width: 35em) { #container { -webkit-column-count: 2; -webkit-column-gap: 20px; } } One way of dealing with long lines of text is to create columns.

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

The drawback is that people might need to scroll down the ﬁrst column, up the second...

Slide 72

Slide 72 text

@media only screen and (min-width: 35em) and (min-height: 40em) { #container { -webkit-column-count: 2; -webkit-column-gap: 20px; } } That’s why you can combine columns with a minimum height.

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Side note: hyphenation

Slide 75

Slide 75 text

blog.fontdeck.com/post/9037028497/hyphens

Slide 76

Slide 76 text

p { -webkit-hyphens:auto; }

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Hyphenation uses the page’s language to look up the dictionary.

Slide 79

Slide 79 text

Readable text font size line length: max-width line spacing

Slide 80

Slide 80 text

Too long lines to read...

Slide 81

Slide 81 text

#container { max-width: 45em; margin: 0 auto; }

Slide 82

Slide 82 text

Aaah. Perfect.

Slide 83

Slide 83 text

Better line length Create columns when height allowed, use maximum width otherwise.

Slide 84

Slide 84 text

Readable text font size line length line spacing

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

p { line-height: 1.5; } Generally a good line height for larger screen sizes.

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

@media only screen and (max-width: 45em) { p { line-height: 1.45; } } Adjusted for smaller screens...

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

@media only screen and (max-width: 22em) { p { line-height: 1.4; } } ... and even more for mobile and very small screens.

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

“What we need is a fluid way to set line height. ... Molten leading would maintain a specific font- size while adjusting line-height based on width. ... What I’m talking about is augmenting CSS with range rules (effectively, min/max line-height) that don’t yet exist, but should for the sake of fluidity.” - Tim Brown, Molten Leading, 2012 It would be nice if we had a min-line-height, like we have a min-width.

Slide 95

Slide 95 text

A jQuery plugin until CSS catches up. github.com/jimjeffers/jQuery-minLineHeight

Slide 96

Slide 96 text

Better line spacing Wider paragraphs need more line height.

Slide 97

Slide 97 text

Headlines ﬁttext

Slide 98

Slide 98 text

ﬁttextjs.com

Slide 99

Slide 99 text

Fittext makes sure the title scales automatically when the screen is resized.

Slide 100

Slide 100 text

jQuery(document).ready(function($){ $(".fit").fitText(0.7); }); You have to play around with the value. A bigger value makes the text smaller.

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

Details lettering kerning other

Slide 104

Slide 104 text

Details lettering kerning other

Slide 105

Slide 105 text

letteringjs.com

Slide 106

Slide 106 text

jQuery(document).ready(function($) { $("h2").lettering(); }); .char1, .char4, .char19, .char26, .char30 { color: #FF0067; } You can use lettering to target and style individual letters...

Slide 107

Slide 107 text

jQuery(document).ready(function($) { $("h2").lettering(); }); .char1, .char4, .char19, .char26, .char30 { color: #FF0067; } Always remember that you are absolutely unique. Just like everyone else.

Slide 108

Slide 108 text

jQuery(document).ready(function($) { $("h2").lettering("words"); }); .word4, .word9 { color: #FF0067; } ... or words ...

Slide 109

Slide 109 text

jQuery(document).ready(function($) { $("h2").lettering("words"); }); .word4, .word9 { color: #FF0067; } Always remember that you are absolutely unique. Just like everyone else.

Slide 110

Slide 110 text

jQuery(document).ready(function($) { $("h2").lettering("lines"); }); .line2 { color: #FF0067; } ... or lines.

Slide 111

Slide 111 text

jQuery(document).ready(function($) { $("h2").lettering("lines"); }); .line2 { color: #FF0067; } Always remember that you are absolutely unique. Just like everyone else.

Slide 112

Slide 112 text

trentwalton.com/css3/type

Slide 113

Slide 113 text

www.strangenative.com/foldup

Slide 114

Slide 114 text

Details lettering kerning other

Slide 115

Slide 115 text

aestheticallyloyal.com/public/optimize-legibility

Slide 116

Slide 116 text

h2 { text-rendering: optimizeLegibility; } You can use CSS for kerning...

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

could cause a performance hit! ... but be aware of the side effects. Use only on titles.

Slide 121

Slide 121 text

... or you could use a jQuery plugin in the meanwhile. Still, only use on titles. typebutter.com

Slide 122

Slide 122 text

Details lettering kerning other Alias “everything else Trent Walton does is awesome”.

Slide 123

Slide 123 text

trentwalton.com/category/notes

Slide 124

Slide 124 text

The date format changes with the available space. Told you, it’s a detail!

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

Fittext used in combination with CSS3 goodness.

Slide 127

Slide 127 text

Selected text colour matches the article’s colours.

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

The future?

Slide 131

Slide 131 text

beta.typecastapp.com

Slide 132

Slide 132 text

Setting type in an inﬁnite canvas...

Slide 133

Slide 133 text

with access to thousands of web fonts...

Slide 134

Slide 134 text

and CSS automagically created for you!

Slide 135

Slide 135 text

An example of a page made entirely in Typecast without...

Slide 136

Slide 136 text

... and with a grid to show the vertical rhythm.

Slide 137

Slide 137 text

simpleasmilk.co.uk

Slide 138

Slide 138 text

Resources Interested and wanting to read more on web typography? Look no further!