Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing with Web Fonts: Type, Responsively

1,559 views

Published on

My presentation from the ARTIFACT conference on web typography.

Published in: Design
  • Be the first to comment

Designing with Web Fonts: Type, Responsively

  1. 1. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfDesigning with Web Fonts:Type, ResponsivelyJason Pamental (@jpamental)Co-founder of H+W DesignTuesday, May 14, 13
  2. 2. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfA Bit About Me+ Built first website forMosaic & Netscape 1+ Do not have a photo handy+ But these are my reasonsto be+ Like to give away what Ilearn as much as possibleTuesday, May 14, 13
  3. 3. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfA Dan Mall Moment+ Met Dan Mall @ FOWD in 2010+ Fell in love with web fonts with LostWorlds Fair http://lostworldsfairs.com+ Met folks from Fonts.com in 2011 & askedwhat I could do to help w/Drupal plugin+ Asked in 2013 to design Fonts.comOpenType demo page (cue: panic)Tuesday, May 14, 13
  4. 4. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfWhat We’ll Cover+ Our dark past: GIFs, sIFR, Cufon+ Our pleasant present: @font-face+ Our dirty detractions: yes, I mean IE+ Our shiny future: WOFF, OpenType, CSS3+ Loads of examples & resourcesTuesday, May 14, 13
  5. 5. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOn The Importance of Letters+ Design is about communication+ Tools of design: image, color, compostion,language (prose) – & the typeface itself+ Your design is 90% words. Don’t make theother 10% do all the workTuesday, May 14, 13
  6. 6. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfType is Important+ The typefaces we choose become thephysical embodiment of the information weconvey with the sites we design+ Words have meaning+ But letters have emotion+ Typeformsthebasisofyourvisualdesignsystem.Thereisno‘content first’without type!Tuesday, May 14, 13
  7. 7. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfA Concise History of Web Type+ Prior to about 2009, it was simply theCIRCLE of Hell that varied, not theinevitability of your arrival there+ Then it got better. We’ll start with that+ @font-face, TypeKit, Fontdeck,Fonts.com, Webtype.com & many more+ It’s still got a ways to go, but it’s moving fastTuesday, May 14, 13
  8. 8. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfFormat Finagling+ One font, four formats+ Alphabet Soup: EOT, SVG, TT, WOFF+ One format to rule them all... almostAs of 13 May, 2013Tuesday, May 14, 13
  9. 9. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfFinding Your Groov(y)+ Services: One account, many choices+ Open source: Google web fonts(careful – you may get what you pay for)+ Web–use licenses: MyFonts.com,FontShop, Emigre, others+ FontSquirrel: just... no.Tuesday, May 14, 13
  10. 10. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfFrom There to Here+ To Host or Not to Host... tis the question+ Consider:• Traffic & mileage, volume & dispersion(license costs & content distribution)• One site or many(we use single subscription for multiple smaller sites)• Platform performance & future forward(when was the last time you downloaded a font update? right.)Tuesday, May 14, 13
  11. 11. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfSo What’s That Look Like?+ Using a service:<script type="text/javascript" src="http://fast.fonts.com/jsapi/8d16be74-xxxx-xxxx-9073-4898ad8b49b2.js" /></script>+ Self-hosting:<style type="text/css">@font-face{ font-family:"Fairbank W04 Regular";src:url("fonts/fontfilename.eot?#iefix");src:url("fonts/fontfilename.eot?#iefix") format("eot"),url("fonts/fontfilename.woff") format("woff"),url("fonts/fontfilename.ttf")format("truetype"),url("fonts/fontfilename.svg#fontfilename")format("svg"); }</style>+ Be aware: you want <b>, you have to say soTuesday, May 14, 13
  12. 12. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfbut there’s a catchTuesday, May 14, 13
  13. 13. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfWindows XP: Killing GoodDesign Since 2001+ According to MS, still 40% of installed base+ Best case: IE8 w/ClearType enabled+ Common: IE7 and Huh?+ It’s rough, but you can (usually) make itwork, and work well+ Windows in general: needs a HintTuesday, May 14, 13
  14. 14. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfFirefox: displays page w/fallbacks first, then‘pops’ into web fontWebkit: draws page without rendering anytype until web font loadsWait For It...Tuesday, May 14, 13
  15. 15. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfFirefox: displays page w/fallbacks first, then‘pops’ into web fontWebkit: draws page without rendering anytype until web font loadsWait For It...Tuesday, May 14, 13
  16. 16. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfFOUT the Giant Slayer+ Don’t show your design to a client withoutunderstanding why they will freak out+ It takes time to load fonts. So only loadthe ones you need+ Don’t forget to manage the loadingprocess: control what you can+ It’s not the change that bothers users –it’s the perception of changeTuesday, May 14, 13
  17. 17. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfGoogle & Typekit to the Rescue+ Web Font Loaderhttps://developers.google.com/fonts/docs/webfont_loader+ Can be used w/multiple services+ Injects classes to help specify CSS duringthe loading process+ Use this to style your fallback fonts tomore closely match eventual designhttp://bit.ly/jpfontfall1, http://bit.ly/jpfontfall2Tuesday, May 14, 13
  18. 18. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfNow We’re Cooking+ You can dobetter. So do.What you want to see: Web fonts loadedTuesday, May 14, 13
  19. 19. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfNow We’re Cooking+ You can dobetter. So do.What your client sees: No web fonts, uncorrectedTuesday, May 14, 13
  20. 20. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfNow We’re Cooking+ You can dobetter. So do.No web fonts, correctedTuesday, May 14, 13
  21. 21. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfNow We’re Cooking+ You can dobetter. So do.Web fonts loadedTuesday, May 14, 13
  22. 22. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfType, Responsively+ Yes, there really is a connection withResponsive Web Design. A big one+ Relative proportion (yes, size) matters+ That means screen size & type size(stop snickering)+ Small screens mean less in view, soproportions can be more subtleTuesday, May 14, 13
  23. 23. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfRelative Scale, IllustratedTuesday, May 14, 13
  24. 24. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfRelative Scale, IllustratedTuesday, May 14, 13
  25. 25. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfRelative Scale, IllustratedTuesday, May 14, 13
  26. 26. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfA Responsive ScaleTuesday, May 14, 13
  27. 27. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfWhen an Em is Not All Relative+ Sizing type in Ems can be tricky – theyare relative to their current context+ REMs helps that, & you can almost counton it working• Learn more here: http://bit.ly/jpfontrems• Polyfill here: http://bit.ly/jprempoly+ Viewport Width as unit: http://bit.ly/jpfontvwTuesday, May 14, 13
  28. 28. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfEven More Awesome:Icon Fonts+ Declare your independence fromresolution dependence+ Many out there, easy to make your own+ Can be styled like any other font, layeredw/CSS to make all sorts of awesome+ (Bonus: use SVG to replace other multi–color vector graphics like logos)Tuesday, May 14, 13
  29. 29. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfIcon Font examples, sources+ Font Awesome (featured in Bootstrap)http://fortawesome.github.io/Font-Awesome/+ Symbolsethttp://symbolset.com+ Modern Pictogramshttp://modernpictograms.com+ The Noun Project (buy what you need)http://thenounproject.com+ Icomoon.io – build your own!http://icomoon.ioTuesday, May 14, 13
  30. 30. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfEven MORE Awesome:OpenType Features+ Thefutureishere,it’sjustunevenlydistributed(thank you Mr. Gibson)+ Ligatures, swashes, old–style figures,alternate characters+ CSS still evolving, some services supportmore (see Fonts.com: http://bit.ly/fontcomdemo)Tuesday, May 14, 13
  31. 31. hwdesignco.com | @jpamental | ARTIFACT | #artifactconf+ Your type, only more beautiful:OpenType: LigaturesStandard LigaturesDiscretionary LigaturesTuesday, May 14, 13
  32. 32. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOpenType DemoTuesday, May 14, 13
  33. 33. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOpenType DemoTuesday, May 14, 13
  34. 34. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOpenType DemoTuesday, May 14, 13
  35. 35. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOpenType DemoTuesday, May 14, 13
  36. 36. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOpenType DemoTuesday, May 14, 13
  37. 37. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfOpenType DemoTuesday, May 14, 13
  38. 38. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfSuper Fancy Tricks & Tips+ Rotate. Just a little bit. (A few techniques to smoooothacross different browsers - thx @NikWilliamson!)https://gist.github.com/dalethedeveloper/1846552+ Some help for IE 7&8:http://www.koodoz.com.au/klog/font-face-smoothing-in-internet-explorer/p {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom: 1;}+ Your code editor – nothing beats real type ina real browser (sorry Photoshop)Tuesday, May 14, 13
  39. 39. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfDesign ToolsTypecastApp.com (@typecastapp)Tuesday, May 14, 13
  40. 40. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfDesign ToolsWebInk.com (@webink)Tuesday, May 14, 13
  41. 41. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfDesign ToolsAdobe Edge Reflow (@reflow)Tuesday, May 14, 13
  42. 42. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfMore Design Tools+ Skyfonts (@skyfonts)Rent fonts short-term on the desktop+ Froont (@froontapp)Web design tool building in real web fonts+ Prototype, not promise: HTML5 & CSS3Try something and develop your own approach that fits yourunique team & projectsTuesday, May 14, 13
  43. 43. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfThank you!Jason Pamental (@jpamental)jason@hwdesignco.comTuesday, May 14, 13
  44. 44. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfResources: Type Services+ Typekit (Adobe): http://typekit.com+ Fonts.com (Monotype): http://fonts.com+ Fontdeck: http://fontdeck.com+ Webtype (Font Bureau): http://www.webtype.com+ WebInk (Extensis): http://webink.com+ Google Web Fonts: http://google.com/fontsTuesday, May 14, 13
  45. 45. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfCool Tools & Resources+ Font Swapper (preview site w/your web fonts):http://www.webtype.com/tools/swapper/+ Typedia (it’s like Wikipedia...for type.Get it?):http://typedia.com+ FontsInUse http://fontsinuse.comTuesday, May 14, 13
  46. 46. hwdesignco.com | @jpamental | ARTIFACT | #artifactconfBlogs & Beauty+ Typekit Blog/‘Sites We Like’ http://blog.typekit.com+ Fonts.com Blog http://blog.fonts.com+ Fontdeck Blog http://blog.fontdeck.com+ FontShop Blog http://blog.fontshop.com+ Typecast Blog http://typecast.com/blog+ Jason Santa Maria http://jasonsantamaria.com+ Tim Brown http://nicewebtype.comTuesday, May 14, 13

×