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.

SmashingConf Whister: Developers Ampersandwich

2,161 views

Published on

Let's talk about web typography!

Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!

Published in: Technology

SmashingConf Whister: Developers Ampersandwich

  1. 1. tiny.cc/ampersandwich
  2. 2. http:// Loreal cookinsidethebox.com
  3. 3. http:// Loreal
  4. 4. When designers and developers work together, we create the best foundation for a project.
  5. 5. Designers must help developers understand DESIGN INTENTIONS
  6. 6. Helvetica Neue
  7. 7. Developers love FORMULAS
  8. 8. mezzoblue.com/tests/revised-image-replacement
  9. 9. mikeindustries.com/blog/sifr
  10. 10. cufon.shoqolate.com
  11. 11. Type options for the web Web safe fonts Image replacement sIFR Cufón @font-face
  12. 12. Formulas for typography Web safe fonts Web font trends
  13. 13. Google Fonts most popular fonts 1. Open Sans 2. Slabo 3. Roboto 4. Oswald 5. Lato 6. Roboto Condensed 7. Source Sans Pro 8. PT Sans 9. Open Sans Condensed 10. Droid Sans
  14. 14. blog.fonts.com
  15. 15. Fonts.com top fonts 1. Avenir Next 2. Neue Helvetica 3. Avenir 4. Trade Gothic 5. Univers 6. Proxima Nova 7. Gill Sans 8. Futura 9. Helvetica 10. Linotype Univers
  16. 16. typekit.com
  17. 17. Typekit favorite fonts 1. Proxima Nova 2. Futura PT 3. Museo Sans 4. Museo Slab 5. Adelle 6. Brandon Grotesque 7. Nimbus Sans 8. Myriad Pro 9. Freight Sans Pro 10. FF Tisa Pro
  18. 18. alistapart.com/blog/post/web-font-trends
  19. 19. WhatFont
  20. 20. Futura
  21. 21. http:// Loreal SUCCESSFUL TYPOGRAPHY IN OUR PROJECTS ‣ When designers and developers collaborate together it creates a sturdy project foundation ‣ Formulas based on fonts available and web font trends can help inform type system decisions ‣ Visit web font services to stay educated on their statistics and follow industry patterns
  22. 22. Use style guides, pattern libraries, and general styles to create a harmonious system
  23. 23. delval.edu
  24. 24. github.com/Jenn/starter-files
  25. 25. http:// Loreal GENERAL STYLES ‣ The general styles make sure no element goes un-styled ‣ Created with a separate document containing every HTML element to define base type styles for those elements (h1, p, ul, etc.) ‣ Smaller, manageable version of a style guide
  26. 26. Trebuchet
  27. 27. Web fonts changed everything (for the better)
  28. 28. Beware CROSS-BROWSER differences
  29. 29. http:// Loreal Set aside the TIME and BUDGET for thorough QA testing
  30. 30. Make sure your fonts will work for your audience before design approval
  31. 31. Test and share font-family browser samples
  32. 32. http:// Loreal Monitor how fonts affect your PAGE SPEED
  33. 33. Just because I can do something, SHOULD I?
  34. 34. Size warnings prompted at: Google Fonts < 160K Typekit <= 400K Cloud Typography < 1000K
  35. 35. blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices
  36. 36. codepen.io/davatron5000/pen/nrfGA
  37. 37. thenerdary.net/post/75826597863/disabling-typekit-on-mobile
  38. 38. Typekit on mobile Enabled 4 requests/32KB Disabled 2 requests/10KB
  39. 39. ffffallback.com
  40. 40. jordanm.co.uk/tinytype
  41. 41. http:// Loreal Will the cost BE APPROVED?
  42. 42. IT’S OUR JOB to help our clients learn to love web fonts
  43. 43. http:// Loreal FREE FONTS have come a long way
  44. 44. fontsquirrel.com
  45. 45. theleagueofmoveabletype.com
  46. 46. edgewebfonts.adobe.com
  47. 47. google.com/fonts
  48. 48. bucketlistly.com
  49. 49. rule-of-three.co.uk
  50. 50. julianabicycles.com
  51. 51. hellohappy.org/beautiful-web-type
  52. 52. http:// Loreal WEB FONTS ‣ Add much needed variety to type systems on the web ‣ Set aside time to thoroughly QA in different browsers and devices ‣ Test in your least favorite browser ‣ Beware of the page weight fonts can add to your site ‣ Don’t use ALL THE FONTS
  53. 53. css-tricks.com/examples/IconFont
  54. 54. fontawesome.io
  55. 55. Combine CSS to reduce HTTP requests
  56. 56. symbolset.com
  57. 57. Icon fonts mean no more IMAGE SPRITES
  58. 58. http://zurb.com/playground/foundation-icons
  59. 59. Icon fonts are great for RETINA DISPLAYS
  60. 60. You can make your own icon fonts
  61. 61. glyphsapp.com
  62. 62. icomoon.io
  63. 63. http:// Loreal But wait! OMGSVGFTW
  64. 64. http:// Loreal
  65. 65. http:// Loreal ICON FONTS and SVG ‣ Icon font barrier to entry is way lower. If you already know font-face, you know icon fonts ‣ A plethora of icon fonts to choose from ‣ Don’t need to use illustrator, grumpicon, any other third party tools with icon fonts ‣ Icon fonts have support in IE8 and up ‣ Easily customizable with CSS ‣ Both have crisp vector shapes are great for retina display ‣ Can create your own icon fonts if desired ‣ Relatively simple to make accessible, but you have to thoroughly test
  66. 66. Use ARIA ROLES with icon fonts
  67. 67. yatil.net/the-best-way-to-use-icon-fonts
  68. 68. github.com
  69. 69. yatil.net/the-best-way-to-use-icon-fonts
  70. 70. paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
  71. 71. Contrast should be 4.5:1
  72. 72. webaim.org/resources/contrastchecker
  73. 73. Use ems/rems for sizes
  74. 74. snook.ca/archives/html_and_css/font-size-with-rem
  75. 75. webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2
  76. 76. Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters. “
  77. 77. codepen.io/chriscoyier/pen/atebf
  78. 78. http:// Loreal TYPE ACCESSIBILITY ‣ Use ems/rems instead of px for font sizing ‣ Make sure color contrast meets the 4.5:1 WCAG requirement ‣ Use ARIA roles with icon fonts ‣ Aim for a 66 character line length; 40-50 for mulit-column layouts
  79. 79. typecast.com
  80. 80. ladiesintech.com
  81. 81. You can ship early and often while keeping nice type
  82. 82. http:// Loreal TYPECAST ‣ Great for setting up type systems out of Photoshop ‣ Can be used to tweak established font styles or create completely new systems ‣ Allows design and development to come together more quickly through an easily shared interface
  83. 83. Identify pain points for your team to overcome them
  84. 84. http:// Loreal Plan your designs and text for VARIABLE CONTENT
  85. 85. Use -webkit-font-smoothing: antialiased; cautiously
  86. 86. http:// Loreal Sometimes “FIXING” a problem in one browser is a POOR SOLUTION in others
  87. 87. Chrome Firefox
  88. 88. dowebsitesneedtolookexactlythesameineverybrowser.com
  89. 89. Chrome Firefox
  90. 90. http:// Loreal Test in your LEAST FAVORITE browser
  91. 91. typerendering.com
  92. 92. usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
  93. 93. Choose a product with a good track record
  94. 94. Limit your font sizes. Create a system.
  95. 95. 9px 10px 11px 12px 13px 14px 15px 16px 18px 20px 21px 22px 24px 25px 26px 28px 30px 31px 32px 34px 36px 38px 40px 41px 42px 44px 45px 46px 48px 50px 52px 54px 56px
  96. 96. type-o-matic.net
  97. 97. http:// Loreal AVOID COMMON ROADBLOCKS ‣ Plan designs for variable content ‣ Choose web and icon font services with good track records, especially if money is involved ‣ Limit your font sizes and styles ‣ Beware of too many JavaScript “fixes”
  98. 98. Text rotation
  99. 99. Face tracking for text size
  100. 100. http:// Loreal SHARE all the knowledge
  101. 101. http:// Loreal "Companies can get myopic, often working in silos. If you don’t understand what colleagues in other departments do, you may start to devalue their worth, which is when you start to build walls. It takes a major change of pace, like a book club, to break down those walls. Burton M. Goldfield
  102. 102. http:// Loreal ADVANCEMENTS FOR TYPE ‣ CSS properties allow us many different customization options beyond size and color ‣ Try seeing how far you can take properties like text rotation, combine shadows, take advantage of background clip and masking on text ‣ Share knoweldge within the team to keep all team members up-to-date with the web. Try lunch and learns or a book club
  103. 103. Schedule internal design reviews with your WHOLE TEAM.
  104. 104. CSS Preprocessors/Variables Are Your Friend
  105. 105. QA, don’t design, in browser
  106. 106. davatron5000.github.io/fitWeird/
  107. 107. http:// Loreal Quality Assurance ‣ Check in often with the whole team to identify pain points and brainstorm creative solutions ‣ QA and tweak, don’t design, in browser ‣ Encourage collaboration between designers and developers by using variables in preprocessors like LESS and Sass
  108. 108. tiny.cc/ampersandwich cookinsidethebox.com thenerdary.net

×