1. A
Touch
of
Typography
a story about responsive typography

2. What is
Responsive Typography
A Touch of Typography
by mark de jong

3. What is
It's a piece of the large
Responsive Web Design puzzle
A Touch
by

4. What is
A Touch
by

5. What is
Layout flow
A Touch
by

6. What is
Layout flow
Responsive images
A Touch
by

7. What is
Layout flow
Responsive images
Device orientation
A Touch
by

8. What is
Layout flow
Responsive images
Device orientation
Responsive Content
A Touch
by

9. What is
CSS Media queries
A Touch
by

10. What is
But what does the term
actually mean?
A Touch
by

11. What is
Responsive Typography | rɪˈspɒnsɪv tʌɪˈpɒgrəfi |
technical term
1. is the use of fonts adapting to different environments
while maintaining legibility with the overall layout still
intact.
A Touch
by

12. What is
It’s not about
pixel-perfection anymore
A Touch
by

13. What is
A Touch
by

14. What is
Keeping content legible
across devices
A Touch
by

15. What is
Keeping content legible
across devices
A Touch
by

16. What is
Keeping content legible
across devices
A Touch
by

17. What is
The Current Situation
A Touch of Typography
by mark de jong

18. What is
Ever-increasing
number of devices
A Touch
by

19. What is
A Touch
by

20. What is
A Touch
by

21. What is
A Touch
by

22. What is
A Touch
by

23. What is
A Touch
by

24. What is
A Touch
by

25. What is
A Touch
by

26. What is
Different reading distances
A Touch
by

27. What is
half arm-length
A Touch
by

28. What is
arm-length
A Touch
by

29. What is
1½ arm-length
A Touch
by

30. What is
Doesn’t stop at
current popular devices
A Touch
by

31. What is
A Touch
by

32. What is
A Touch
by

33. What is
A Touch
by

34. What is
A Touch
by

35. What is
Perceived size matters
A Touch
by

36. What is
A Touch
by

37. What is
A Touch
by

38. What is
A Touch
by

39. What is
A Touch
by

40. What is
Wrong examples
A Touch
by

41. What is
A Touch
by

42. What is
Navigation too tiny
A Touch
by

43. What is
Navigation too tiny
Redirect to mobile site
A Touch
by

44. What is
Navigation too tiny
Redirect to mobile site
Wrong spacing
A Touch
by

45. Coming up with
A Viable Solution
A Touch of Typography
by mark de jong

46. Coming up with
Set a benchmark for size
A Touch
by

47. Coming up with
Don’t go below
a 12 pixel font size
A Touch
by

48. Coming up with
aaa
It’s not only about font-size
A Touch
by

49. Coming up with
Take things in perspective
A Touch
by

50. Coming up with
A good foundation
is half the business
A Touch
by

51. Coming up with
Decide on your font
A Touch
by

52. Coming up with
Decide on your font
A Touch
by

53. Coming up with
Good Examples
A Touch
by

54. Coming up with
A Touch
by

55. Coming up with
+ Good first impression
A Touch
by

56. Coming up with
+ Good first impression
+ Very clear form styles
A Touch
by

57. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
A Touch
by

58. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

59. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

60. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

61. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

62. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

63. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

64. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

65. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

66. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

67. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

68. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

69. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

70. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

71. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

72. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

73. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

74. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

75. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

76. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

77. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

78. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

79. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

80. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

81. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

82. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

83. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

84. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

85. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

86. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

87. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

88. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

89. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

90. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

91. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

92. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

93. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

94. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

95. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

96. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

97. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

98. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

99. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

100. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

101. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

102. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

103. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

104. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

105. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

106. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

107. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

108. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

109. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

110. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

111. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

112. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

113. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

114. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

115. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

116. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

117. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

118. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

119. Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch
by

120. Coming up with
A Touch
by

121. Coming up with
+ Pleasant to the eye
A Touch
by

122. Coming up with
+ Pleasant to the eye
+ Nice letter spacing/margin
A Touch
by

123. Coming up with
+ Pleasant to the eye
+ Nice letter spacing/margin
– Some headers too small
A Touch
by

124. Coming up with
A Touch
by

125. Coming up with
+ Good reading content
+ Clear font size
A Touch
by

126. Coming up with
+ Good reading content
+ Clear font size
+ Nice white-spacing
A Touch
by

127. Coming up with
+ Good reading content
+ Clear font size
+ Nice white-spacing
– Order image/title
A Touch
by

128. What is it
That We Can Do
A Touch of Typography
by mark de jong

129. Coming up with
Design or develop responsively
and responsibly
A Touch
by

130. Coming up with
Widgets are hitchhiking on
global or page styling
A Touch
by

131. Coming up with
Be aware of content styling
and spacing
A Touch
by

132. Thank you
A Touch
by

133. Thank you
Master of Moustache
http://moteam.co/master-of-moustache
A Touch
by