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

Real Typography for the Web

C157b16234f1e75e8eac3698c1d4414a?s=47 David Demaree
September 03, 2011

Real Typography for the Web

Presented at ChicagoWebConf, Sept. 3, 2011. This talk lays some conceptual groundwork by demonstrating the uses and value of good typography, then gets into the code to demonstrate how to control and enhance web type with CSS, web fonts, and JavaScript.

C157b16234f1e75e8eac3698c1d4414a?s=128

David Demaree

September 03, 2011
Tweet

Transcript

  1. David Demaree ChicagoWebConf • September 3rd, 2011 Saturday, September 3,

    11
  2. FONTS Saturday, September 3, 11

  3. FONTS Fonts! Fonts! Fonts! Fonts! Fonts! Fonts! Fonts! Fonts! Saturday,

    September 3, 11
  4. Typography in practice is not choosing fonts or making fonts,

    it’s about shaping text for optimal user experience. — Oliver Reichenstein, 2006 Saturday, September 3, 11
  5. Legibility Hierarchy Identity Context Good typography establishes or improves Saturday,

    September 3, 11
  6. Things Helvetica Paprika Futura New York Times Georgia Conventional iOS

    UI patterns, made distinctive with type Saturday, September 3, 11
  7. TO: Cs I need you. I need this. I need

    to know this is something we're willing to do. I am terribly in love with you. An actual text message Saturday, September 3, 11
  8. I need you. I need this. I need to know

    this is something we're willing to do. I am terribly in love with you. REPLY – TXT MESSAGE CANCEL SEND Saturday, September 3, 11
  9. Saturday, September 3, 11

  10. Web type in practice Saturday, September 3, 11

  11. CHAPTER I. MR. SHERLOCK HOLMES. In the year 1878 I

    took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties. The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines. Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded sufferers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the wards, and even to bask a little upon the verandah, when I was struck down by enteric fever, that curse of our Indian possessions. For months my life was despaired of, and when at last I came to myself and became convalescent, I was so weak and emaciated that a medical board determined that not a day should be lost in sending me back to England. I was dispatched, accordingly, in the troopship "Orontes," and landed a month later on Portsmouth jetty, with my health irretrievably ruined, but with permission from a paternal government to spend the next nine months in attempting to improve it. I had neither kith nor kin in England, and was therefore as free as air—or as free as an income of eleven shillings and sixpence a day will permit a man to be. Under such circumstances, I naturally gravitated to London, that great cesspool into which all the loungers and idlers of the Empire are irresistibly drained. There I stayed for some time at a private hotel in the Strand, leading a comfortless, meaningless existence, and spending such money as I had, considerably more freely than I ought. So alarming did the state of my finances become, that I soon realized that I must either leave the metropolis and rusticate somewhere in the country, or that I must make a complete alteration in my style of living. Choosing the latter alternative, I began by making up my mind to leave the hotel, and to take up my quarters in some less pretentious and less expensive domicile. Saturday, September 3, 11
  12. <section class="chapter"> <h1> <span class="chapter-number">Chapter I.</span> Mr. Sherlock Holmes </h1>

    <p>In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties.</p> <!-- <p>Moar paragraphs</p> --> </section> HTML STRUCTURE Saturday, September 3, 11
  13. .chapter { color: #373737; font-family: 'Proxima Nova Condensed', sans-serif; font-size:

    120%; margin: 40px; } .chapter p { line-height: 1.3em; max-width: 600px; } .chapter h1 { font-size: 161.8%; font-weight: 700; text-transform: uppercase; } .chapter .chapter-number { display: block; font-size: 85%; font-weight: 400; letter-spacing: 2px; margin-bottom: 0.5em; text-transform: uppercase; } CSS STYLES Saturday, September 3, 11
  14. C H A P T E R I MR. SHERLOCK

    HOLMES In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other o cers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties. The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines. Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded su erers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the wards, and even Saturday, September 3, 11
  15. CHAPTER I. MR. SHERLOCK HOLMES. In the year 1878 I

    took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties. The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines. Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded sufferers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the wards, and even to bask a little upon the verandah, when I was struck down by enteric fever, that curse of our Indian possessions. For months my life was despaired of, and when at last I came to myself and became convalescent, I was so weak and emaciated that a medical board determined that not a day should be lost in sending me back to England. I was dispatched, accordingly, in the troopship "Orontes," and landed a month later on Portsmouth jetty, with my health irretrievably ruined, but with permission from a paternal government to spend the next nine months in attempting to improve it. I had neither kith nor kin in England, and was therefore as free as air—or as free as an income of eleven shillings and sixpence a day will permit a man to be. Under such circumstances, I naturally gravitated to London, that great cesspool into which all the loungers and idlers of the Empire are irresistibly drained. There I stayed for some time at a private hotel in the Strand, leading a comfortless, meaningless existence, and spending such money as I had, considerably more freely than I ought. So alarming did the state of my finances become, that I soon realized that I must either leave the metropolis and rusticate somewhere in the country, or that I must make a complete alteration in my style of living. Choosing the latter alternative, I began by making up my mind to leave the hotel, and to take up my quarters in some less pretentious and less expensive domicile. C H A P T E R I MR. SHERLOCK HOLMES In the year 1878 I took my degree of Doctor of Medicine of the University of Lo proceeded to Netley to go through the course prescribed for surgeons in the completed my studies there, I was duly attached to the Fifth Northumberland Assistant Surgeon. The regiment was stationed in India at the time, and befor the second Afghan war had broken out. On landing at Bombay, I learned that advanced through the passes, and was already deep in the enemy's country. however, with many other o cers who were in the same situation as myself, reaching Candahar in safety, where I found my regiment, and at once entered duties. The campaign brought honours and promotion to many, but for me it had noth misfortune and disaster. I was removed from my brigade and attached to the whom I served at the fatal battle of Maiwand. There I was struck on the should bullet, which shattered the bone and grazed the subclavian artery. I should ha hands of the murderous Ghazis had it not been for the devotion and courage my orderly, who threw me across a pack-horse, and succeeded in bringing me British lines. Worn with pain, and weak from the prolonged hardships which I had undergo removed, with a great train of wounded su erers, to the base hospital at Pesh rallied, and had already improved so far as to be able to walk about the wards Saturday, September 3, 11
  16. Fonts in CSS Saturday, September 3, 11

  17. .media-unit { font-family: "Lucida Grande", "Droid Sans", Verdana, Arial, sans-serif;

    font-weight: 400; font-style: normal; } Saturday, September 3, 11
  18. font-family: "Lucida Grande", "Droid Sans", Verdana, Arial, sans-serif; Font-family stacks

    list acceptable typefaces in order of preference. Saturday, September 3, 11
  19. .twitter { font-family: 'Helvetica Neue', Arial, Helvetica, 'Liberation Sans', FreeSans,

    sans-serif; } Twitter’s actual font-family stack Loads an appropriate, preinstalled, Helvetica-like font Saturday, September 3, 11
  20. .twitter { font-family: 'Helvetica Neue', Arial, Helvetica, 'Liberation Sans', FreeSans,

    sans-serif; } Helvetica Neue on Mac OS X or iOS Arial for all Windows OSes Any other commercial Helvetica, if the user has one installed Liberation Sans and FreeSans are commonly found on Linux If all else fails, use the browser’s default sans-serif Saturday, September 3, 11
  21. FACEBOOK "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; YAHOO arial, helvetica,

    clean, sans-serif MICROSOFT Georgia, Cambria, "Times New Roman", Times, serif; Common font stacks Saturday, September 3, 11
  22. Font variations Saturday, September 3, 11

  23. .media-unit { font-family: "Lucida Grande", "Droid Sans", Verdana, Arial, sans-serif;

    font-weight: 400; font-style: normal; } Saturday, September 3, 11
  24. font-weight: 400; font-style: normal; Weights and styles aren’t modifiers, they’re

    di erent fonts of the same font family. Saturday, September 3, 11
  25. <p style="font-weight:normal">Fanny pack trust fund</p> <p style="font-weight:bold">Fanny pack trust fund</p>

    <p style="font-weight:200">Fanny pack trust fund</p> <p style="font-weight:300">Fanny pack trust fund</p> <p style="font-weight:400">Fanny pack trust fund</p> <p style="font-weight:600">Fanny pack trust fund</p> <p style="font-weight:700">Fanny pack trust fund</p> <p style="font-weight:800">Fanny pack trust fund</p> <p style="font-weight:900">Fanny pack trust fund</p> Saturday, September 3, 11
  26. Fanny pack trust fund Fanny pack trust fund normal bold

    Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund 200 300 400 600 700 800 900 Arial 2 weights Saturday, September 3, 11
  27. Fanny pack trust fund Fanny pack trust fund normal bold

    Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund 200 300 400 600 700 800 900 Proxima Nova Condensed 7 weights Saturday, September 3, 11
  28. Saturday, September 3, 11

  29. 14 variations total size 453 KB Saturday, September 3, 11

  30. Some typefaces come in only one style Saturday, September 3,

    11
  31. Jody, this ice cream is great. Saturday, September 3, 11

  32. Jody, this ice cream is great. Jody, this ice cream

    is great. Lucida Grande, unlike most fonts in common use on the Web, does not have an italic. Saturday, September 3, 11
  33. Web fonts Saturday, September 3, 11

  34. Arial or Helvetica (Neue) Verdana or Lucida Grande Georgia or

    Times New Roman Our typographic palette, 1999–2007 Saturday, September 3, 11
  35. @font-face { font-family: "Proxima Nova Condensed"; font-weight: 400; font-style: normal;

    src: url('/fonts/proxima-nova-cond-n4.woff'); } Saturday, September 3, 11
  36. http://www.webkit.org/blog/124/downloadable-fonts/ 2007 @font-face support added to WebKit Saturday, September 3,

    11
  37. http://www.webdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer/ 2008 Firefox, Opera, and Chrome get @font-face Saturday, September

    3, 11
  38. “Most fonts do not come with a license that allows

    you to share them. So, by uploading most fonts, regardless of their format, to a server, and linking to them, you are likely to be either breaching your license agreement with the vendor, or copyright laws, or both. And it’s not cool. John Allsopp October 2008 Saturday, September 3, 11
  39. Saturday, September 3, 11

  40. A type foundry is a company that designs and/or distributes

    typefaces. http://en.wikipedia.org/wiki/Type_foundry Saturday, September 3, 11
  41. http://blog.typekit.com/2009/05/27/introducing-typekit/ Fonts as a service Saturday, September 3, 11

  42. http://readableweb.com/mozilla-announces-support-for-web-open-font-format-wo -in-firefox-3-6/ A web-specific font format Saturday, September 3, 11

  43. share of desktop browser usage w/ @font-face support based on

    July 2011 browser usage numbers from Net Applications 96%+ Saturday, September 3, 11
  44. EOT Embedded OpenType TrueType/ OpenType WOFF Web Open Font Format

    3 web font formats Saturday, September 3, 11
  45. EOT TTF WOFF SVG Internet Explorer 4.0 ✔ Internet Explorer

    9.0 ✔ ✔ Safari 3.1 ✔ ✔ Safari 5.1 ✔ ✔ ✔ Opera 10.0 ✔ Opera 11.1 ✔ ✔ Firefox 3.1 ✔ Firefox 3.6 ✔ ✔ Chrome 1.0 ✔ ✔ Chrome 6.0 ✔ ✔ ✔ Mobile Safari / iOS 3.2 ✔ Mobile Safari / iOS 4.2 ✔ ✔ Mobile Safari / iOS 5.0 ✔ ✔ ✔ Saturday, September 3, 11
  46. OpenType/TTF 8% WOFF 40% EOT 46% based on July 2011

    browser usage numbers from Net Applications “FORMAT SHARE” ON DESKTOP BROWSERS Saturday, September 3, 11
  47. Cross-platform @font-face options • “Bulletproof” @font-face syntax • Browser detection,

    on the server or client side • Use a service (Typekit, Fontdeck, Google Web Fonts) Saturday, September 3, 11
  48. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

    format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } “Bulletproof” @font-face Saturday, September 3, 11
  49. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

    format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; One @font-face block for every variation in your stylesheet Proxima Nova Condensed 17 variations 119 lines of code Saturday, September 3, 11
  50. Use a service <script type="text/javascript" src="http://use.typekit.com/agz0gmz.js"></script> <script type="text/javascript"> try{ Typekit.load();

    }catch(e){} </script> TYPEKIT <link rel="stylesheet" href="http://fontdeck.com/s/css/wMErktaKFxpwhaGE/example.com/87.css" type="text/css" /> FONTDECK Saturday, September 3, 11
  51. • E ortless browser compatibility • Automatic updates • E

    ortless font licensing • A nice GUI for adding families & variations to your site’s stylesheet Benefits of using a web font service Saturday, September 3, 11
  52. Giving your type too much coffee Or: Fancy display type

    with JavaScript & CSS3 Saturday, September 3, 11
  53. Saturday, September 3, 11

  54. http://letteringjs.com/ Saturday, September 3, 11

  55. <div id="title"> <h1>Put a bird on it</h1> </div> Saturday, September

    3, 11
  56. #title h1 { font-size: 72px; line-height: 72px; font-family: franklin-gothic-urw, Arial;

    } Saturday, September 3, 11
  57. Saturday, September 3, 11

  58. <script src="js/jquery.js"></script> <script src="js/jquery.lettering.js"></script> Saturday, September 3, 11

  59. <script src="js/jquery.js"></script> <script src="js/jquery.lettering.js"></script> <script> $(function(){ $('#title h1').lettering('words'); }); </script>

    Saturday, September 3, 11
  60. Saturday, September 3, 11

  61. #title span { display: inline-block; padding: 10px 10px; background: #000;

    color: #fff; } Saturday, September 3, 11
  62. Saturday, September 3, 11

  63. #title span:nth-child(odd){ -webkit-transform: rotate(-13deg); background-color: #690; } Saturday, September 3,

    11
  64. Saturday, September 3, 11

  65. #title span:nth-child(odd){ -webkit-transform: rotate(-13deg); background-color: #690; } #title span:nth-child(even){ -webkit-transform:

    rotate(13deg); background-color: #069; } Saturday, September 3, 11
  66. Saturday, September 3, 11

  67. #title span.word3 { -webkit-transform: none; text-transform: lowercase; font-family: baskerville; font-style:

    italic; font-weight: normal; font-size: 128px; line-height: 120px; padding: 0 10px; background-color: #fff; color: #960; } Saturday, September 3, 11
  68. Saturday, September 3, 11

  69. <script src="js/jquery.js"></script> <script src="js/jquery.lettering.js"></script> <script> $(function(){ $('#title h1').lettering('words'); }); </script>

    Saturday, September 3, 11
  70. <script src="js/jquery.js"></script> <script src="js/jquery.lettering.js"></script> <script> $(function(){ $('#title h1').lettering('letters'); }); </script>

    Saturday, September 3, 11
  71. Saturday, September 3, 11

  72. #title span { display: inline-block; padding: 0 3px; } #title

    span:nth-child(1n){ -webkit-transform: rotate(-13deg); color: #690; } #title span:nth-child(2n){ -webkit-transform: rotate(13deg); color: #069; } #title span:nth-child(3n){ -webkit-transform: rotate(13deg) scale(1.3); color: #960; } #title span:nth-child(5n){ -webkit-transform: scale(0.8); color: #609; } Saturday, September 3, 11
  73. Saturday, September 3, 11

  74. /* Just the spaces */ #title span.char4, #title span.char6, #title

    span.char11, #title span.char14 { margin-left: 8px; margin-right: 8px; } Saturday, September 3, 11
  75. Saturday, September 3, 11

  76. Saturday, September 3, 11

  77. No kerning Auto-kerning Manual kerning Saturday, September 3, 11

  78. http://blog.typekit.com The Typekit Blog Saturday, September 3, 11

  79. On Web Typography Jason Santa Maria Coming in 2012 from

    A Book Apart Saturday, September 3, 11
  80. thanks! david@typekit.com @ddemaree on Twitter Saturday, September 3, 11

  81. Q&A? Saturday, September 3, 11