Your SlideShare is downloading. ×
0
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Successful Web Typography - The Developer's Ampersandwich

877

Published on

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 …

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!

How to utilize web fonts and icon fonts within your projects
How icon fonts can help your site performance
Tools for crafting an efficient type system on the web

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

  • Be the first to like this

No Downloads
Views
Total Views
877
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. http:// Loreal vegetarianschmitter.com
  • 2. Designers and developers working together make for a sturdy project foundation
  • 3. Help developers understand DESIGN INTENTIONS
  • 4. Developers love FORMULAS
  • 5. Type options for the web Web safe fonts Image replacement sIFR Cufón @font-face
  • 6. Formulas for typography Web safe fonts Web font trends
  • 7. google.com/fonts
  • 8. Google Fonts most popular fonts 1. Open Sans 2. Roboto 3. Oswald 4. Droid Sans 5. Lato 6. PT Sans 7. Open Sans Condensed 8. Droid Serif 9. Ubuntu 10. Source Sans Pro
  • 9. blog.fonts.com
  • 10. Fonts.com top fonts 1. Trade Gothic 2. Neue Helvetica 3. Avenir Next 4. Univers 5. Avenir 6. Proxima Nova 7. Helvetica 8. Frutiger 9. Gill Sans 10. Futura
  • 11. typekit.com
  • 12. 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
  • 13. alistapart.com/blog/post/web-font-trends
  • 14. Typekit most viewed fonts (Jan 2014) 1. Proxima Nova 2. Myriad Pro 3. Futura PT 4. Nimbus Sans 5. Adelle Sans
  • 15. WhatFont
  • 16. 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
  • 17. Use style guides, pattern libraries, and general styles to create a harmonious system
  • 18. github.com/Jenn/starter-files
  • 19. 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
  • 20. Beware CROSS-BROWSER differences
  • 21. http:// Loreal Set aside the TIME and BUDGET for thorough QA testing
  • 22. Make sure your fonts will work for your audience before design approval
  • 23. Test and share font-family browser samples
  • 24. Use -webkit-font-smoothing: antialiased; cautiously
  • 25. http:// Loreal Sometimes “FIXING” a problem in one browser is a POOR SOLUTION in others
  • 26. Chrome Firefox
  • 27. dowebsitesneedtolookexactlythesameineverybrowser.com
  • 28. Chrome Firefox
  • 29. http:// Loreal Test in your LEAST FAVORITE browser
  • 30. http:// Loreal Monitor how fonts affect your PAGE SPEED
  • 31. Just because I can do something, SHOULD I?
  • 32. blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices
  • 33. codepen.io/davatron5000/pen/nrfGA
  • 34. ffffallback.com
  • 35. jordanm.co.uk/tinytype
  • 36. http:// Loreal Will the cost BE APPROVED?
  • 37. IT’S OUR JOB to help our clients learn to love web fonts
  • 38. http:// Loreal FREE FONTS have come a long way
  • 39. fontsquirrel.com
  • 40. theleagueofmoveabletype.com
  • 41. edgewebfonts.adobe.com
  • 42. google.com/fonts
  • 43. bucketlistly.com
  • 44. rule-of-three.co.uk
  • 45. julianabicycles.com
  • 46. hellohappy.org/beautiful-web-type
  • 47. 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
  • 48. css-tricks.com/examples/IconFont
  • 49. fontawesome.io
  • 50. symbolset.com
  • 51. Research the customer support before you buy
  • 52. Icon fonts mean no more IMAGE SPRITES
  • 53. http://zurb.com/playground/foundation-icons
  • 54. Icon fonts are ideal for RETINA DISPLAYS
  • 55. You can make your own icon fonts
  • 56. glyphsapp.com
  • 57. icomoon.io
  • 58. http:// Loreal ICON FONTS ‣ A plethora of icon fonts to choose from ‣ Support for older IE can be poor ‣ Easily customizable with CSS ‣ Crisp vector shapes are great for retina display ‣ Can create your own icon fonts ‣ Simpler alternative to SVG icons
  • 59. Use ARIA ROLES with icon fonts
  • 60. yatil.net/the-best-way-to-use-icon-fonts
  • 61. github.com
  • 62. yatil.net/the-best-way-to-use-icon-fonts
  • 63. scottkellum.com/2013/10/25/the-new-kellum-method.html
  • 64. Contrast should be 4.5:1
  • 65. webaim.org/resources/contrastchecker
  • 66. Use ems/rems for sizes
  • 67. snook.ca/archives/html_and_css/font-size-with-rem
  • 68. webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2
  • 69. 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. “
  • 70. codepen.io/chriscoyier/pen/atebf
  • 71. 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
  • 72. typecast.com
  • 73. ladiesintech.com
  • 74. You can ship early and often while keeping nice type
  • 75. 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
  • 76. Identify pain points for your team to overcome them
  • 77. http:// Loreal Plan your designs and text for VARIABLE CONTENT
  • 78. Choose a product with a good track record
  • 79. Limit your font sizes. Create a system.
  • 80. type-o-matic.net
  • 81. Create your own kit
  • 82. 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
  • 83. Text masking and clips are super rad
  • 84. Text rotation
  • 85. Face tracking for text size
  • 86. http:// Loreal UTILIZE 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
  • 87. Schedule internal design reviews with your WHOLE TEAM.
  • 88. CSS Preprocessors/Variables Are Your Friend
  • 89. QA, don’t design, in browser
  • 90. davatron5000.github.io/fitWeird/
  • 91. 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
  • 92. cookinsidethebox.com thenerdary.net

×