Responsive Typography: Wrap-Up

Transcript

1. 1.

   Responsive Typography W R A P - U P Ilya

   Pukhalski May, 2014
2. 2.

   @pukhalski ! Solution Architect, EPAM Systems Lecturer, British Higher School

   of Art & Design
3. 3.

   — Mark Bowley “Good typography comes from paying “attention to

   tiny details as this can “make the difference between graphic “design work that is just acceptable “or really good.”
4. 4.

   Typography is something more than just choosing fonts.

5. 5.

   It is about making things legible and readable.

6. 6.

   Terminology

7. 7.

   None
8. 8.

   Typeface or font?

9. 9.

   Typeface or font? Arial Regular Arial Bold Arial Italic Arial

   Black … Arial Black
10. 10.

    sans-serif serif

11. 11.

    None
12. 12.

    Glyphs

13. 13.

    α an element of writing

14. 14.

    Kerning and tracking

15. 15.

    Ker ning and t r a c k i n

    g
16. 16.

    Alignment

17. 17.

    In typesetting and page layout, alignment or range, is the

    setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification. In typesetting and page layout, alignment or range, is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification. In typesetting and page layout, a l i g n m e n t o r r a n g e , i s t h e setting of text flow or image p l a c e m e n t relative to a page, c o l u m n (measure), table cell or tab. The type alignment s e t t i n g i s s o m e t i m e s referred to as text alignment, text justification or type justification. In typesetting and page layout, alignment or range, is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification. Flush left Centered Justified Flush right
18. 18.

    Measure

19. 19.

    Measure (or sometimes "The Measure") in typography is the length

    of a line of text. For a single-column design measure should ideally lie between 40 & 80 characters. Many typographers consider the perfect measure to be 65 characters. If the lines are too short then the text becomes disjointed, if they are too long the content Number of characters per line
20. 20.

    Leading

21. 21.

    Leading Leading x

22. 22.

    Ligatures

23. 23.

    Ligatures fi fi

24. 24.

    Hyphenation

25. 25.

    Hy- phe- nation

26. 26.

    Hyphens, en-dashes, em-dashes

27. 27.

    Hyphens, en-dashes, em-dashes - – —

28. 28.

    @viljamis

29. 29.

    En-Dash? • Ranges
 The contest runs July 7–21 • Second

    hyphen
 Firefox is an open-source–based browser
30. 30.

    Rag, widow, orphan

31. 31.

    Rag is the uneven edge of text that is aligned

    on only one side. In English, most text is left aligned and so the rag is on the right side of the text block. Text that is fully justified has no rag (some people say that the rag is completely even or straight, rather than not there), and centered text has rag on both the right and the left. Widow Orphan Rag
32. 32.

    Good ol’ days Pre-Web Era

33. 33.

    serif 40-85 CPL

34. 34.

    WHO THE FUCK SET THESE RULES?

35. 35.

    Enough time to try. ! 1450s

36. 36.

    None
37. 37.

    66 character golden rule 60-75 CPL 40-50 CPL for multi-column

    layout Fixed width Fixed dpi Fixed reading distance
38. 38.

    None
39. 39.

    None
40. 40.

    None
41. 41.

    Middle Ages B.RWD.

42. 42.

    Unwritten rules of web typography

43. 43.

    Body copy font size ~12-14px

44. 44.

    Leading ~1.5

45. 45.

    measure ÷ leading ~25

46. 46.

    paragraph spacing ÷ leading ~1.4

47. 47.

    Be careful with text justification

48. 48.

    Be careful with first line indention

49. 49.

    Measure 65-90 cpl 75-85 cpl — top picks

50. 50.

    None
51. 51.

    leading = font size × golden ratio

52. 52.

    measure = leading × leading

53. 53.

    None
54. 54.

    None
55. 55.

    Brave New World Post-PC Era

56. 56.

    Nothing really changed… Except one thing: we cannot rely on

    the fixed container width anymore.
57. 57.

    — Tim Brown “Breakpoints tailored to the design “often means

    breakpoints that occur “when clusters of typographic elements “become uncomfortable (way too close “together, too far apart, too narrow, “too wide, etc.).”
58. 58.

    — Elliot Jay Stocks,“Smashing Book 3” “The key attribute “for

    achieving perfect typesetting “is perfect measure: “a good average between 45 and 90 “characters per line — on all screen “resolutions.”
59. 59.

    Responsive Typography T H E B A S I C

    S
60. 60.

    Text size is not your personal preference

61. 61.

    100% of device width Liquid Layout

62. 62.

    Set of fixed containers Adaptive Layout

63. 63.

    Readability is more important than having a layout that is

    always as wide as the viewport
64. 64.

    New players… Constants grew up into variables.

65. 65.

    1. Reading distance 2. DPI 3. User context

66. 66.

    Source: iA

67. 67.

    Reading distance by device type • Phone — close distance

    reading • Tablet — medium distance reading* • Desktop — far distance reading • TV — 10-foot experience
68. 68.

    iPad vs iPhone

69. 69.

    Source: iA

70. 70.

    1. iPad is a little bit further away 2. iPad

    context: breakfast table, sofa, in bed 3. Less screen estate on iPhone
71. 71.

    Context & reading distance Tablets and variety of distance •

    Close distance reading — lying in bed • Medium distance reading — sitting, public transportation • Far distance reading — propped on a table while eating Source: BBC
72. 72.

    It’s not possible to create perfect responsive typography. It’s all

    about finding a compromise.
73. 73.

    Prototyping Responsive Typography

74. 74.

    — @viljamis “Typography for the Web “is really hard to

    design anywhere “else than inside the browser”
75. 75.

    Process: 1. Put the content with markup 2. Choose typefonts

    3. Define breakpoints 4. Define fixed-width containers
76. 76.

    Process: 5. Calculate body font size using desired CPL 6.

    Set typography hierarchy, scale, leading and white space 7. Adjust for devices and displays
77. 77.

    Choosing a typeface

78. 78.

    serif or sans-serif?

79. 79.

    < 12px sans-serif better rendering

80. 80.

    WHO THE FUCK IS USING 12PX FOR BODY TEXT?

81. 81.

    Both can work great

82. 82.

    — Oliver Reichenstein “The serifed typeface is a priest, “the

    sans is a hacker”
83. 83.

    System fonts on desktop

84. 84.

    None
85. 85.

    System fonts on mobile devices

86. 86.

    iOS Android Windows Phone Helvetica Neue Roboto Segoe UI

87. 87.

    None
88. 88.

    None
89. 89.

    body { font-family: "Times", "Times New Roman", serif; } !

    ! h1, h2, h3, h4, h5, h6 { font-family: "Helvetica", "Arial", sans-serif; }
90. 90.

    Modular Scale

91. 91.

    None
92. 92.

    ‘66 characters’ rule 16px (1em) text and a measure of

    60–75 characters long
93. 93.

    None
94. 94.

    None
95. 95.

    None
96. 96.

    None
97. 97.

    None
98. 98.

    Leading

99. 99.

    Leading size • Golden Ratio Scale
 pearsonified.com/typography/ • Any other

    modular scale
 modularscale.com • Magic formulas
 nicewebtype.com/notes/2012/02/03/molten-leading-or- fluid-line-height/ ((current width − 
 min-width)÷(max-width − min-width)) × 
 (line-height − 
 min-line-height) + 
 min-line-height
100. 100.

     On high dpi displays text looks thiner

101. 101.

     more dpi less weight smaller line-height

102. 102.

     Using different font grades for devices with different dpi can

     help to achieve the same visual appearance
103. 103.

     Source: iA

104. 104.

     Readability & Legibility

105. 105.

     Readability and legibility • text-rendering: auto, optimizeSpeed, optimizeLegibility, geometricPrecision •

     text-size-adjust: auto, none, x% • -webkit-font-smoothing: none, subpixel- antialiased, antialiased
106. 106.

     Legibility issues

107. 107.

     MicroSoft ClearType

108. 108.

     h1 { text-shadow:-1px -1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(255,255,255,0.2),

     1px 1px 1px rgba(0,0,0,0.7); } Old hack for old systems with modern browsers
109. 109.

     None
110. 110.

     Result

111. 111.

     None
112. 112.

     None
113. 113.

     None
114. 114.

     None
115. 115.

     None
116. 116.

     Future of Responsive Typography

117. 117.

     Typography is Math

118. 118.

     The problem of responsive typography today is the impossibility to

     get exact values of all necessary variables, ! e.g. reading distance, luminosity, etc.
119. 119.

     Distance

120. 120.

     Luminosity @media (luminosity: normal) { body { background: #f5f5f5; color:

     #262626; } } ! @media (luminosity: dim) { body { background: #e9e4e3; } } ! @media (luminosity: washed) { body { background: #ffffff; } }
121. 121.

     Q&A