Responsive Typography: Wrap-Up

Responsive Typography: Wrap-Up

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

May 24, 2014
Tweet

Transcript

  1. 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.”
  2. 7.
  3. 11.
  4. 12.
  5. 16.
  6. 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
  7. 18.
  8. 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
  9. 20.
  10. 22.
  11. 28.
  12. 29.

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

    hyphen
 Firefox is an open-source–based browser
  13. 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
  14. 36.
  15. 37.

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

    layout Fixed width Fixed dpi Fixed reading distance
  16. 38.
  17. 39.
  18. 40.
  19. 50.
  20. 53.
  21. 54.
  22. 56.
  23. 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.).”
  24. 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.”
  25. 67.

    Reading distance by device type • Phone — close distance

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

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

    context: breakfast table, sofa, in bed 3. Less screen estate on iPhone
  27. 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
  28. 74.

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

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

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

    3. Define breakpoints 4. Define fixed-width containers
  30. 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
  31. 84.
  32. 87.
  33. 88.
  34. 89.

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

    ! h1, h2, h3, h4, h5, h6 { font-family: "Helvetica", "Arial", sans-serif; }
  35. 91.
  36. 93.
  37. 94.
  38. 95.
  39. 96.
  40. 97.
  41. 98.
  42. 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
  43. 102.

    Using different font grades for devices with different dpi can

    help to achieve the same visual appearance
  44. 103.
  45. 105.

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

    text-size-adjust: auto, none, x% • -webkit-font-smoothing: none, subpixel- antialiased, antialiased
  46. 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
  47. 109.
  48. 110.
  49. 111.
  50. 112.
  51. 113.
  52. 114.
  53. 115.
  54. 118.

    The problem of responsive typography today is the impossibility to

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

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

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

    Q&A