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

Advanced Typography for the Web

Idan Gazit
January 23, 2013

Advanced Typography for the Web

Talk given at HTML5-IL meetup #1, Jan 23 2013

Video: http://www.youtube.com/watch?v=_sHqSSK33Pc

Idan Gazit

January 23, 2013
Tweet

More Decks by Idan Gazit

Other Decks in Design

Transcript

  1. @idangazit ADVANCED TYPOGRAPHY FOR THE WEB • HTML!-IL, JAN "#

    RD "$%# HI THERE, I’M TYPOGRAPHY TYPOGRAPHY TYPOGRAPHY TYPOGRAPHY for the web advanced
  2. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M djangoproject.com
  3. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M the art and science of presenting textual I N F O R M AT I O N
  4. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M typography fonts set a set B
  5. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M CONTROL CONTROL CONTROL CONTROL
  6. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M CONTROL CONTROL CONTROL none nil nada zero zip zilch nothing na no
  7. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M HELVETICA? HELVETICA? HELVETICA? i can haz HELVETICA?
  8. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M ASK ASK ASK ASK for what you want for backups setting type for the web:
  9. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M print web March of Progress  typog a y
  10. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M UNITS UNITS UNITS UNITS CSS!
  11. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M "#px "em or "$$% absolute relative
  12. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M em ~ % EM ~ % em ~ % em ~ % relative units 1.2em == 120% http://clagnut.com/blog/348/ why ems?
  13. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M "em or "$$% == "#px user-agent default for <body>
  14. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <html> <body> <header> <h1> ∅ !."em #em !.$em $.%em (! × !.# × $ × !.%) &'.%px (%.&em × !'px/!em) or ▾ ▾ ▾ defaults to !em
  15. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <html> <body> <header> <h1> h! { font-size: "em; } ▾ ▾ ▾ <article> ▾ <h1> header { font-size: !.#em; } article { font-size: !em; } ? ?
  16. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <html> <body> <header> <h1> h! { font-size: "em; } ▾ ▾ ▾ <article> ▾ <h1> header { font-size: !.#em; } article { font-size: !em; } &(px !em × !.#em × $em $#px !em × !em × $em
  17. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M REM REM REM REM “root ems”
  18. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <html> !em <body> "em <header> $.%em <h1> !.#rem 㱺 㱺 㱺 × × × !em "em $.%em !.#em × × × "'px = '(."px = EMS REMS #.)ems !.%ems
  19. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M webkit gecko trident presto http://caniuse.com/#feat=rem (>= IE!) REM REM REM REM
  20. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M ELASTIC PX ELASTIC PX ELASTIC PX ELASTIC PX http://jsbin.com/acide4/8/edit html { font-size: 6.25% } body { font-size: 16px; font-size: 16rem; } .box { width: 10px; width: 10rem; }
  21. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M vh VH VH VH viewport units VW VW VW VW VMIN VMIN VMIN VMIN http://www.w3.org/TR/css3-values/#viewport-relative-lengths
  22. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M ! vh == ! % of viewport height http://jsbin.com/evenam/1
  23. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M VIEWPORT UNITS VIEWPORT UNITS VIEWPORT UNITS webkit gecko trident presto http://caniuse.com/#feat=viewport-units (>= IE"#) VIEWPORT UNITS
  24. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M UNITS UNITS UNITS UNITS CSS! http://www.w3.org/TR/css3-values/#lengths
  25. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M FONTS FONTS FONTS FONTS using web
  26. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M font-family: Helvetica, Arial, sans-serif;
  27. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123 ⊗≄≃∭∑’ὐ <p> </p>
  28. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <p> Foo <span class=“amp”>&amp;</span> Bar </p> p { font-family: Elena, serif; } .amp { font-family: Abril Fatface, Baskerville, serif; } Foo & Bar Foo & Bar ENHANCED FALLBACK http://simplebits.com/notebook/2008/08/14/ampersands-2/
  29. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M FONT-FACE FONT-FACE FONT-FACE FONT-FACE CSS! control the font database!
  30. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @font-face { family-name src unicode-range font-variant font-feature-settings font-stretch font-weight font-style “FooBar” local(...), url(...) U+'!-#A, U+C$-FF same values as font-* rules }
  31. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @font-face { font-family: FooBar; src: local("Foo Bar Bold"), local("FooBar-Bold"), url(FooBarBold.ttf); font-weight: bold; } p { font-family: FooBar, sans; font-weight: normal; }
  32. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @font-face { font-family: FooBar; src: local("Foo Bar Bold"), local("FooBar-Bold"), url(FooBarBold.ttf); font-weight: bold; } p { font-family: FooBar, sans; font-weight: bold; }
  33. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @font-face { font-family: Alef; src: url(AlefNormal.ttf); font-weight: normal; unicode-range: U+!"#-!FF; /* hebrew! */ } /* Use Alef font only for hebrew */ p { font-face: Alef, Times, serif;}
  34. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @font-face { font-family: FooBar; src: url(FooBarNormal.ttf); font-weight: normal; } @font-face { font-family: FooBar; src: url(FooBarBold.ttf); font-weight: bold; } p { font-face: FooBar, sans-serif;} strong { font-weight: bold; }
  35. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @FONT-FACE @FONT-FACE @FONT-FACE webkit gecko trident presto http://caniuse.com/#feat=fontface @FONT-FACE …or is it?
  36. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: /* IE6-IE8 */ url('webfont.eot?#iefix') format('embedded-opentype'), /* Modern Browsers */ url('webfont.woff') format('woff'), /* Safari, Android, iOS */ url('webfont.ttf') format('truetype'), /* Legacy iOS */ url('webfont.svg#svgFontName') format('svg'); } http://cl.ly/1t1z2S2g0P1u
  37. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M font-feature- settings font-feature- settings font-feature- settings Fancy Typography. font-feature- settings CSS$
  38. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M ligatures Ligatures Ligat igat swash alternates
  39. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M in 1956 I bought… oldstyle lining in "%&# I bought… NUMERALS NUMERALS NUMERALS NUMERALS $ !"! . #$ $ %&# . '' proportional tabular ()*) . +, (-.+ . //
  40. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M .ligatures { font-feature-settings: “liga”; } .lining-numerals { font-feature-settings: “lnum”; } .tabular-numerals { font-feature-settings: “tnum”; }
  41. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M HACKS HACKS HACKS HACKS oh my god, it’s full of …but what did you expect?
  42. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M font-feature- settings font-feature- settings font-feature- settings is pretty awesome. don’t forget your vendor prefixes! font-feature- settings but still https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings http://caniuse.com/#feat=font-feature http://blog.fontdeck.com/post/15777165734/opentype-1
  43. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M icon fonts icon fonts icon fonts Vector! Styleable! No sprites! One HTTP req! GZips well! Makes coffee! icon fonts
  44. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M icon fonts icon fonts icon fonts http://css-tricks.com/examples/IconFont/ http://fico.lensco.be/ http://pictos.cc/font/ http://symbolset.com/ http://icomoon.io/ http://somerandomdude.com/work/iconic/ …may the google be with you. icon fonts
  45. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <span class="icon" data-icon="p"></span> @font-face { font-family: fico; /* reference font files here */ } .icon:before { content: attr(data-icon); font-family: fico; } modern browsers
  46. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <span class="icon">p</span> @font-face { font-family: fico; /* reference font files here */ } .icon { font-family: fico; } old browsers
  47. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M h = ♥ ?
  48. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M UNICODE UNICODE UNICODE UNICODE <span class="icon" data-icon="♥"></span> is awesome! but… but… * requires font support
  49. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M TOYS TOYS TOYS TOYS lettering.js wrap each letter in a span for styling fittext.js aspect-preserving text resize to fit container
  50. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M NOT BAD
  51. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M WHEW! WHEW! WHEW! WHEW! now you know kung-fu. Go make something!
  52. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M Thanks! LONG http://gazit.me SHORT @idangazit CODE http://github.com/idan