My presentation about typography and responsive web design for Fronteers Belgium at Inventis, April 2012

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

2. 2011. This is how it all started...

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

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

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

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

7. 1997

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

9. www.alistapart.com/articles/dao/ 2000

10. “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

11. clagnut.com/blog/1663/ 2006

12. “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

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

14. This was done with javascript, measuring the viewport width.

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

16. “... increasing a page’s flexibility 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.

17. www.simplebits.com/publications/bulletproof

18. This is the book’s example site.

19. Bulletproof test: increase the font size by a few notches

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

23. So what happened between 2006 and 2010?

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

26. How do we keep our texts readable
in such a flexible environment?

27. Responsive Web Design
and Typography

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

29. A great example of readability.

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

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

32. How do we know it’s readable?

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

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

35. One font

36. aworkinglibrary.com

37. seedconference.com

38. Two fonts

39. lostworldsfairs.com/atlantis

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

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

42. www.informationarchitects.jp/en/100e2r/

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

44. 16px ≠ 16px

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

46. M
288px Georgia
288px Times New Roman

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

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

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

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

52. 36
48
24

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

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

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

60. 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.

61. 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.

62. 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.

63. caniuse.com

64. Readable text
font size
line length
line spacing

65. “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

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

67. Readable text
font size
line length: columns
line spacing

69. @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.

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

72. @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.

74. Side note: hyphenation

75. blog.fontdeck.com/post/9037028497/hyphens

76. p{
-webkit-hyphens:auto;
}

78. <!DOCTYPE HTML>
<html lang="en-US">
<head>
Hyphenation uses the page’s language to look up the dictionary.

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

80. Too long lines to read...

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

82. Aaah. Perfect.

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

84. Readable text
font size
line length
line spacing

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

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

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

94. “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.

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

96. Better line spacing
Wider paragraphs need more line height.

97. Headlines
fittext

98. fittextjs.com

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

100. <script src="js/jquery.fittext.js"></script>
<script>
jQuery(document).ready(function($){
$(".fit").fitText(0.7);
});
</script>
You have to play around with the value. A bigger value makes the text smaller.

103. Details
lettering
kerning
other

104. Details
lettering
kerning
other

105. letteringjs.com

106. <script src="js/jquery.lettering-0.6.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("h2").lettering();
});
</script>
.char1, .char4, .char19, .char26, .char30 {
color: #FF0067;
}
You can use lettering to target and style individual letters...

107. <script src="js/jquery.lettering-0.6.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("h2").lettering();
});
</script>
.char1, .char4, .char19, .char26, .char30 {
color: #FF0067;
}
Always remember that you
are absolutely unique.
Just like everyone else.

108. <script src="js/jquery.lettering-0.6.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("h2").lettering("words");
});
</script>
.word4, .word9 {
color: #FF0067;
}
... or words ...

109. <script src="js/jquery.lettering-0.6.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("h2").lettering("words");
});
</script>
.word4, .word9 {
color: #FF0067;
}
Always remember that you
are absolutely unique.
Just like everyone else.

110. <script src="js/jquery.lettering-0.6.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("h2").lettering("lines");
});
</script>
.line2 {
color: #FF0067;
}
... or lines.

111. <script src="js/jquery.lettering-0.6.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$("h2").lettering("lines");
});
</script>
.line2 {
color: #FF0067;
}
Always remember that you
are absolutely unique.
Just like everyone else.

112. trentwalton.com/css3/type

113. www.strangenative.com/foldup

114. Details
lettering
kerning
other

115. aestheticallyloyal.com/public/optimize-legibility

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

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

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

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

123. trentwalton.com/category/notes

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

126. Fittext used in combination with CSS3 goodness.

127. Selected text colour matches the article’s colours.

130. The future?

131. beta.typecastapp.com

132. Setting type in an infinite canvas...

133. with access to thousands of web fonts...

134. and CSS automagically created for you!

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

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

137. simpleasmilk.co.uk

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

139. webtypography.net/toc/

140. jasonsantamaria.com/articles/

141. trentwalton.com

142. nicewebtype.com

143. 8faces.com

144. Thank you
t @dannycalders