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 full-size slide

  2. We are all typographers!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Defaut line-height and margins

    View full-size slide

  11. Rhythmic line-height and margins

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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







    ×

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. fine affluent

    View full-size slide

  19. fine affluent

    View full-size slide

  20. h1 {
    text-rendering: optimizeLegibility;
    }

    View full-size slide

  21. marketplace.veer.com/merch/vpr0001260

    View full-size slide

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

    View full-size slide

  23. Kerning table for Baskerville 1757

    View full-size slide

  24. 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 full-size slide

  25. col.ly/s/842

    View full-size slide

  26. Font Linking

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide

  29. @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 full-size slide

  30. astonmartin.com

    View full-size slide

  31. www.lannasport.se

    View full-size slide

  32. tradeshift.com/enterprise

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. www.truphone.com

    View full-size slide

  39. citizenmusician.org

    View full-size slide

  40. nikebetterworld.com

    View full-size slide

  41. fontdeck.com/typefaces/nonlatin/greek

    View full-size slide

  42. fontdeck.com/font/lagoon/regular

    View full-size slide

  43. fontdeck.com/font/digohweli/regular

    View full-size slide

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

    View full-size slide

  45. QUICHE ch stf ck OO
    I E

    View full-size slide

  46. affloat fine fjords
    a oa n fjords

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Final space shu le.

    View full-size slide

  51. Final NASA space shu le.

    View full-size slide

  52. Final NASA space shu le.

    View full-size slide

  53. Final space shu le.

    View full-size slide

  54. font-feature-settings

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

  59. Magneta Expert Subset

    View full-size slide

  60. 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 full-size slide

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

    View full-size slide

  62. fontdeck.com/typeface/magnetaexpertsubset

    View full-size slide

  63. 2012.ampersandconf.com

    View full-size slide

  64. fontdeck.com/typeface/trilogyfatfaceexpertsubset

    View full-size slide

  65. Hyphenation in the Gutenberg Bible

    View full-size slide

  66. p {
    hyphens: auto;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide