Designing with Web Fonts: Type, Responsively

1,489 views

Published on

My presentation from the ARTIFACT conference on web typography.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,489
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×