The document discusses responsive typography and keeping content legible across different devices. It notes the increasing number of devices with different screen sizes and how perceived size of text matters. Wrong examples of non-responsive typography are shown such as navigation text being too small. The document recommends setting a minimum font size of 12 pixels and choosing fonts carefully. Both good and bad examples of responsive websites are displayed and analyzed. Overall, the document provides guidance on designing responsive typography that maintains readability as screen sizes change.

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