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

Typo London 2012 - A Renaissance in Web Typography

Sean McBride
October 19, 2012

Typo London 2012 - A Renaissance in Web Typography

Web fonts are enabling incredible new design. In the last few years, we’ve seen an explosion of great work fueled by these new tools. Web fonts are improving the web by allowing a broader range of expressiveness. As designers, we can finally access the full spectrum of typographic emotion without sacrificing accessibility, maintainability, and performance. In this talk, we’ll look at examples of great work, explore the history of typography on the web, dig into @font-face and CSS, and discuss some of the unique constraints and challenges of using web fonts.

Sean McBride

October 19, 2012
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Thursday, October 18, 12
  2. How is type on the web DIFFERENT than type in

    print? Thursday, October 18, 12
  3. EOT SVG OTF/TTF WOFF IE 5 – IE 9 IE

    9 – Chrome 0.3 Chrome 4 Chrome 5 – Firefox 3.5 Firefox 3.5 Firefox 3.6 – Opera 9 Opera 10 Opera 11.01 – Safari 3.1 Safari 3.1 Safari 5.1 – iOS 1 iOS 4.2 iOS 5 – 3.1 2.2 Chrome Thursday, October 18, 12
  4. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE 5-8

    */ src: local('☺'), /* sneaky trick for IE */ url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */ url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */ url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */ } Thursday, October 18, 12
  5. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE9 Compat

    Modes */ src: url('awesome-font.eot?iefix') format('eot'), /* IE6-IE8 */ url('awesome-font.woff') format('woff'), /* Modern Browsers */ url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ } Thursday, October 18, 12
  6. @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'); } http://use.typekit.net/abc1def.js Thursday, October 18, 12
  7. On the web, we build LIVING THINGS instead of static

    artifacts Thursday, October 18, 12
  8. The web brings new RULES & POSSIBILITIES that we must

    respond to Thursday, October 18, 12
  9. responsive design “The control which designers know in the print

    medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility.” John Allsopp, “A Dao of Web Design” Thursday, October 18, 12
  10. Fluid layout The layout should adjust to the width of

    the canvas. At a basic level, this means using relative units (like percentages) instead of relying exclusively on absolute units, like pixels. Thursday, October 18, 12
  11. Flexible images Images (both content and backgrounds) should adjust to

    the available space. This might be as simple as scaling an image up or down, or as complex as swapping an image at certain sizes. Thursday, October 18, 12
  12. Media queries This is the tool that allows us to

    target different CSS styles at different canvas sizes. The point at which you apply or remove additional styles is referred to as a “breakpoint”. Thursday, October 18, 12
  13. Media queries @media screen and (max-width: 400px) { .heading h2

    { font-size: 2em; } } Thursday, October 18, 12