Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Typography

Richard Rutter
January 13, 2012

Web Typography

An introduction to some basic principles (with particular attention to micro-typography) and the current state of typography on the web. Talk given to students reading for an MA in Web Design & Content Planning at Greenwich University.

Richard Rutter

January 13, 2012
Tweet

More Decks by Richard Rutter

Other Decks in Design

Transcript

  1. Web Typography
    Richard Rutter
    Web Typography Evangelist, Fontdeck.com
    Talk Web Design 2012, University of Greenwich

    View Slide

  2. We are all typographers!

    View Slide

  3. informationarchitects.jp/en/the-web-is-all-about-typography-period/

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. From Mark Boulton’s “Designing layouts that think for you”

    View Slide

  9. From Mark Boulton’s “Designing layouts that think for you”

    View Slide

  10. From Mark Boulton’s “Designing layouts that think for you”

    View Slide

  11. From Mark Boulton’s “Designing layouts that think for you”

    View Slide

  12. From Mark Boulton’s “Designing layouts that think for you”

    View Slide

  13. From Mark Boulton’s “Designing layouts that think for you”

    View Slide

  14. Defaut line-height and margins

    View Slide

  15. Rhythmic line-height and margins

    View Slide

  16. "

    View Slide

  17. "It's a flippin' pangolin!"

    View Slide

  18. “It’s a flippin’ pangolin!”

    View Slide

  19. opening double quote “
    closing double quote ”
    opening single quote ‘
    closing single quote ’
    en dash –
    em dash —
    minus −
    multiplication ×
    ellipsis …







    ×

    View Slide

  20. wordpress.org/extend/plugins/wp-typography/

    View Slide


  21. View Slide

  22. Calibri         0123abcdefigHJKlmnopQRStuv
    Cambria         0123abcdefigHJKlmnopQRStu
    Candara       0123abcdefigHJKlmnopQRStu
    Constantia     0123abcdefigHJKlmnopQRStu
    Corbel           0123abcdefigHJKlmnopQRStuv

    View Slide

  23. Calibri         0123abcdefigHJKlmnopQRStuv
    Cambria         0123abcdefigHJKlmnopQRStu
    Candara       0123abcdefigHJKlmnopQRStu
    Constantia     0123abcdefigHJKlmnopQRStu
    Corbel           0123abcdefigHJKlmnopQRStuv

    View Slide

  24. fine affluent

    View Slide

  25. fine affluent

    View Slide

  26. h1 {
    text-rendering: optimizeLegibility;
    }

    View Slide

  27. marketplace.veer.com/merch/vpr0001260

    View Slide

  28. Kerning on (top) and off (bottom)

    View Slide

  29. Kerning table for Baskerville 1757

    View Slide

  30. ¶∂

    View Slide

  31. When the only font available is Times New Roman,
    the typographer must make the most of its virtues.
    The typography should be richly and superbly
    ordinary, so that attention is drawn to the quality of
    the composition, not the individual letterforms.”
    Elements of Typographic Style by Robert Bringhurst

    View Slide

  32. View Slide

  33. col.ly/s/842

    View Slide

  34. Font Linking

    View Slide

  35. @font-face {
    font-family: "Clarendon";
    src: url("clarendon-nar-eb.woff");
    }

    View Slide

  36. Browser File types supported
    Internet Explorer 4 Embedded OpenType (EOT)
    Internet Explorer 9 EOT, WOFF
    Safari 3.1 TrueType, OpenType, SVG
    Safari 5 TrueType, OpenType, SVG, WOFF
    Opera 10 TrueType, OpenType
    Opera 11.10 TrueType, OpenType, WOFF
    Firefox 3.1 TrueType, OpenType
    Firefox 3.6 TrueType, OpenType, WOFF
    Chrome 4 TrueType, OpenType, SVG
    Chrome 6 TrueType, OpenType, SVG, WOFF
    Mobile Safari iOS 3.2 SVG
    Mobile Safari iOS 4.2 SVG, TTF
    Mobile Safari iOS 5 SVG, TTF, WOFF
    Browser support for Webfonts

    View Slide

  37. @font-face {
    font-family: "Clarendon Narrow Extrabold";
    src: url(clarendon-nar-eb.eot);
    src: url(clarendon-nar-eb.eot?iefix) format(eot),
    url(clarendon-nar-eb.woff) format(woff),
    url(clarendon-nar-eb.ttf) format(truetype),
    url(clarendon-nar-eb.svg#font) format(svg);
    font-weight: 800;
    }

    View Slide

  38. ´

    View Slide

  39. astonmartin.com

    View Slide

  40. avios.com

    View Slide

  41. www.lannasport.se

    View Slide

  42. stuff.tv

    View Slide

  43. tradeshift.com/enterprise

    View Slide

  44. Ultra light
    Light
    Regular
    Bold
    Black
    Ultra black
    Adelle
    Adelle
    Adelle
    Adelle
    Adelle
    Adelle

    View Slide

  45. Light
    Regular
    SemiBold
    Bold
    ExtraBold
    Heavy
    Adelle
    Adelle
    Adelle
    Adelle
    Adelle
    Adelle

    View Slide

  46. h1 {
    font-family: “Adelle”, Cambria, Georgia, serif;
    font-weight: bold;
    }

    View Slide

  47. h1 {
    font-family: “Adelle”, Cambria, Georgia, serif;
    font-weight: 200;
    }

    View Slide

  48. 100 Ultra Light, Extra Light
    200 Light, Thin
    300 Book
    400 Normal, Regular
    500 Medium
    600 Demi Bold, Semi Bold
    700 Bold
    800 Black, Extra Bold
    900 Ultra Bold, Fat, Heavy
    Values for font-weight property

    View Slide

  49. www.truphone.com

    View Slide

  50. citizenmusician.org

    View Slide

  51. nikebetterworld.com

    View Slide

  52. fontdeck.com/typefaces/nonlatin/greek

    View Slide

  53. fontdeck.com/font/lagoon/regular

    View Slide

  54. fontdeck.com/font/digohweli/regular

    View Slide

  55. ff fl ffl fi ffi
    ff fl ffl fi ffi fb fj fk ti ty

    View Slide

  56. View Slide

  57. QUICHE ch stf ck OO
    I E

    View Slide

  58. View Slide

  59. affloat fine fjords
    a oa n fjords

    View Slide


  60. ajestic

    View Slide

  61. Quiz game key
    !ui" #$m% &%'

    View Slide

  62. 0123456789
    

    View Slide

  63. Lining Old Style
    Proportional
    409,280 ,
    Proportional
    367,112 ,
    Proportional
    155,068 ,
    Proportional
    171,792 ,
    Tabular
    , ,
    Tabular
    , ,
    Tabular
    , ,
    Tabular
    , ,

    View Slide

  64. 1 ½

    View Slide

  65. Final space shu le.

    View Slide

  66. Final NASA space shu le.

    View Slide

  67. Final NASA space shu le.

    View Slide

  68. Final space shu le.

    View Slide

  69. N

    View Slide

  70. font-feature-settings

    View Slide

  71. h1 {
    font-feature-settings:
    "lnum", "tnum", "dlig " 0, "swsh" 2;
    }

    View Slide

  72. h1 {
    font-feature-settings:
    "lnum", "tnum", "dlig " 0, "swsh" 2;
    -moz-font-feature-settings:
    "lnum=1, tnum=1, dlig=0, swsh=2";
    }

    View Slide

  73. h1 {
    font-feature-settings:
    "lnum", "tnum", "dlig " 0, "swsh" 2;
    -moz-font-feature-settings:
    "lnum=1, tnum=1, dlig=0, swsh=2";
    -webkit-font-feature-settings:
    "lnum", "tnum", "dlig " 0, "swsh" 2;
    }

    View Slide

  74. In the Government formed
    in response to a perceived threat om the
    ’s Sputnik program. absorbed
    the -year-old , along with the
    and many of ’s early space programs.

    View Slide

  75. Magneta Expert Subset

    View Slide

  76. In 1958 the class="smallcaps">US Government formed class="smallcaps">NASA in response to a perceived threat
    from the USSR’s Sputnik
    program. NASA absorbed the
    46-year-old class="smallcaps">NACA, along with the class="smallcaps">JPL and many of class="smallcaps">ARPA’s early space programs.

    View Slide

  77. p {
    font-family: "Magneta Book", Georgia, serif;
    }
    .numbers, .smallcaps {
    font-family: "Magneta Book Subset", "Magneta Book",
    Georgia, serif;
    }

    View Slide

  78. View Slide

  79. fontdeck.com/typeface/magnetaexpertsubset

    View Slide

  80. 2012.ampersandconf.com

    View Slide

  81. fontdeck.com/typeface/trilogyfatfaceexpertsubset

    View Slide

  82. ele-
    phant-

    View Slide

  83. Hyphenation in the Gutenberg Bible

    View Slide

  84. View Slide

  85. p {
    hyphens: auto;
    }

    View Slide

  86. p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    }

    View Slide

  87. View Slide

  88. ˇ

    View Slide

  89. Richard Rutter, Fontdeck.com
    @clagnut
    http://speakerdeck.com/u/clagnut/

    View Slide