SmashingConf Whister: Developers Ampersandwich
•
5 j'aime•2,555 vues
When designers and developers collaborate, it creates a strong foundation for projects. Choosing fonts requires understanding web safe fonts, image replacement techniques, trends from services like Google Fonts, and keeping designs flexible for variable content. Thorough testing across browsers and devices is important, and teams should share knowledge to overcome common roadblocks like over-reliance on JavaScript fixes or lack of accessibility.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (8)
Similaire à SmashingConf Whister: Developers Ampersandwich
Similaire à SmashingConf Whister: Developers Ampersandwich (20)
Plus de Jenn Lukas
Plus de Jenn Lukas (9)
Dernier
Dernier (20)
SmashingConf Whister: Developers Ampersandwich
- 8. When designers and developers work together, we create the best foundation for a project.
- 11. Designers must help developers understand DESIGN INTENTIONS
- 12. Helvetica Neue
- 21. Type options for the web Web safe fonts Image replacement sIFR Cufón @font-face
- 22. Formulas for typography Web safe fonts Web font trends
- 24. 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
- 25. blog.fonts.com
- 26. 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
- 30. typekit.com
- 31. 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
- 36. WhatFont
- 39. Futura
- 40. 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
- 42. Use style guides, pattern libraries, and general styles to create a harmonious system
- 44. delval.edu
- 47. 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
- 54. Trebuchet
- 55. Web fonts changed everything (for the better)
- 57. http:// Loreal Set aside the TIME and BUDGET for thorough QA testing
- 58. Make sure your fonts will work for your audience before design approval
- 59. Test and share font-family browser samples
- 61. http:// Loreal Monitor how fonts affect your PAGE SPEED
- 62. Just because I can do something, SHOULD I?
- 66. Size warnings prompted at: Google Fonts < 160K Typekit <= 400K Cloud Typography < 1000K
- 72. Typekit on mobile Enabled 4 requests/32KB Disabled 2 requests/10KB
- 73. ffffallback.com
- 77. http:// Loreal Will the cost BE APPROVED?
- 78. IT’S OUR JOB to help our clients learn to love web fonts
- 79. http:// Loreal FREE FONTS have come a long way
- 80. fontsquirrel.com
- 83. google.com/fonts
- 84. bucketlistly.com
- 89. 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
- 92. fontawesome.io
- 96. Combine CSS to reduce HTTP requests
- 98. symbolset.com
- 104. Icon fonts mean no more IMAGE SPRITES
- 106. Icon fonts are great for RETINA DISPLAYS
- 108. You can make your own icon fonts
- 109. glyphsapp.com
- 110. icomoon.io
- 112. http:// Loreal But wait! OMGSVGFTW
- 113. http:// Loreal
- 117. 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
- 119. Use ARIA ROLES with icon fonts
- 123. github.com
- 127. Contrast should be 4.5:1
- 133. Use ems/rems for sizes
- 137. 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. “
- 139. 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
- 141. typecast.com
- 142. ladiesintech.com
- 144. You can ship early and often while keeping nice type
- 145. 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
- 147. Identify pain points for your team to overcome them
- 148. http:// Loreal Plan your designs and text for VARIABLE CONTENT
- 150. Use -webkit-font-smoothing: antialiased; cautiously
- 151. http:// Loreal Sometimes “FIXING” a problem in one browser is a POOR SOLUTION in others
- 152. Chrome Firefox
- 154. Chrome Firefox
- 155. http:// Loreal Test in your LEAST FAVORITE browser
- 156. typerendering.com
- 158. Choose a product with a good track record
- 164. Limit your font sizes. Create a system.
- 165. 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
- 166. type-o-matic.net
- 168. 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”
- 174. Text rotation
- 178. Face tracking for text size
- 179. http:// Loreal SHARE all the knowledge
- 180. 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
- 182. 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
- 184. Schedule internal design reviews with your WHOLE TEAM.
- 185. CSS Preprocessors/Variables Are Your Friend
- 187. QA, don’t design, in browser
- 191. 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