Responsive Typography: Wrap-Up

Responsive Typography: Wrap-Up

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

May 24, 2014
Tweet

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

  7. None
  8. Typeface or font?

  9. Typeface or font? Arial Regular Arial Bold Arial Italic Arial

    Black … Arial Black
  10. sans-serif serif

  11. None
  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

  36. None
  37. 66 character golden rule 60-75 CPL 40-50 CPL for multi-column

    layout Fixed width Fixed dpi Fixed reading distance
  38. None
  39. None
  40. None
  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

  50. None
  51. leading = font size × golden ratio

  52. measure = leading × leading

  53. None
  54. None
  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

  84. None
  85. System fonts on mobile devices

  86. iOS Android Windows Phone Helvetica Neue Roboto Segoe UI

  87. None
  88. None
  89. body { font-family: "Times", "Times New Roman", serif; } !

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

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

    60–75 characters long
  93. None
  94. None
  95. None
  96. None
  97. None
  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
  109. None
  110. Result

  111. None
  112. None
  113. None
  114. None
  115. None
  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