Responsive Typography: Wrap-Up

Transcript

1. Responsive Typography W R A P - U P Ilya Pukhalski May, 2014
2. @pukhalski ! Solution Architect, EPAM Systems Lecturer, British Higher School of Art & Design
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. Typography is something more than just choosing fonts.
5. It is about making things legible and readable.
6. Terminology
8. Typeface or font?
9. Typeface or font? Arial Regular Arial Bold Arial Italic Arial Black … Arial Black
10. sans-serif serif
12. Glyphs
13. α an element of writing
14. Kerning and tracking
15. Ker ning and t r a c k i n g
16. Alignment
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. Measure
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. Leading
21. Leading Leading x
22. Ligatures
23. Ligatures fi fi
24. Hyphenation
25. Hy- phe- nation
26. Hyphens, en-dashes, em-dashes
27. Hyphens, en-dashes, em-dashes - – —
28. @viljamis
29. En-Dash? • Ranges
 The contest runs July 7–21 • Second hyphen
 Firefox is an open-source–based browser
30. Rag, widow, orphan
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. Good ol’ days Pre-Web Era
33. serif 40-85 CPL
34. WHO THE FUCK SET THESE RULES?
35. Enough time to try. ! 1450s
37. 66 character golden rule 60-75 CPL 40-50 CPL for multi-column layout Fixed width Fixed dpi Fixed reading distance
41. Middle Ages B.RWD.
42. Unwritten rules of web typography
43. Body copy font size ~12-14px
44. Leading ~1.5
45. measure ÷ leading ~25
46. paragraph spacing ÷ leading ~1.4
47. Be careful with text justification
48. Be careful with first line indention
49. Measure 65-90 cpl 75-85 cpl — top picks
51. leading = font size × golden ratio
52. measure = leading × leading
55. Brave New World Post-PC Era
56. Nothing really changed… Except one thing: we cannot rely on the fixed container width anymore.
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. — 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. Responsive Typography T H E B A S I C S
60. Text size is not your personal preference
61. 100% of device width Liquid Layout
62. Set of fixed containers Adaptive Layout
63. Readability is more important than having a layout that is always as wide as the viewport
64. New players… Constants grew up into variables.
65. 1. Reading distance 2. DPI 3. User context
66. Source: iA
67. Reading distance by device type • Phone — close distance reading • Tablet — medium distance reading* • Desktop — far distance reading • TV — 10-foot experience
68. iPad vs iPhone
69. Source: iA
70. 1. iPad is a little bit further away 2. iPad context: breakfast table, sofa, in bed 3. Less screen estate on iPhone
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. It’s not possible to create perfect responsive typography. It’s all about finding a compromise.
73. Prototyping Responsive Typography
74. — @viljamis “Typography for the Web “is really hard to design anywhere “else than inside the browser”
75. Process: 1. Put the content with markup 2. Choose typefonts 3. Define breakpoints 4. Define fixed-width containers
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. Choosing a typeface
78. serif or sans-serif?
79. < 12px sans-serif better rendering
80. WHO THE FUCK IS USING 12PX FOR BODY TEXT?
81. Both can work great
82. — Oliver Reichenstein “The serifed typeface is a priest, “the sans is a hacker”
83. System fonts on desktop
85. System fonts on mobile devices
86. iOS Android Windows Phone Helvetica Neue Roboto Segoe UI
89. body { font-family: "Times", "Times New Roman", serif; } ! ! h1, h2, h3, h4, h5, h6 { font-family: "Helvetica", "Arial", sans-serif; }
90. Modular Scale
92. ‘66 characters’ rule 16px (1em) text and a measure of 60–75 characters long
98. Leading
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. On high dpi displays text looks thiner
101. more dpi less weight smaller line-height
102. Using different font grades for devices with different dpi can help to achieve the same visual appearance
103. Source: iA
104. Readability & Legibility
105. Readability and legibility • text-rendering: auto, optimizeSpeed, optimizeLegibility, geometricPrecision • text-size-adjust: auto, none, x% • -webkit-font-smoothing: none, subpixel- antialiased, antialiased
106. Legibility issues
107. MicroSoft ClearType
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
110. Result
116. Future of Responsive Typography
117. Typography is Math
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. Distance
120. Luminosity @media (luminosity: normal) { body { background: #f5f5f5; color: #262626; } } ! @media (luminosity: dim) { body { background: #e9e4e3; } } ! @media (luminosity: washed) { body { background: #ffffff; } }
121. Q&A