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.
http:// 
Loreal 
vegetarianschmitter.com
Designers and 
developers working 
together make for a 
sturdy project 
foundation
Help developers understand 
DESIGN INTENTIONS
Developers love 
FORMULAS
Type options for the web 
Web safe fonts 
Image replacement 
sIFR 
Cufón 
@font-face
Formulas for typography 
Web safe fonts Web font trends
google.com/fonts
Google Fonts most popular fonts 
1. Open Sans 
2. Roboto 
3. Oswald 
4. Droid Sans 
5. Lato 
6. PT Sans 
7. Open Sans Cond...
blog.fonts.com
Fonts.com top fonts 
1. Trade Gothic 
2. Neue Helvetica 
3. Avenir Next 
4. Univers 
5. Avenir 
6. Proxima Nova 
7. Helvet...
typekit.com
Typekit favorite fonts 
1. Proxima Nova 
2. Futura PT 
3. Museo Sans 
4. Museo Slab 
5. Adelle 
6. Brandon Grotesque 
7. N...
alistapart.com/blog/post/web-font-trends
Typekit most viewed fonts (Jan 2014) 
1. Proxima Nova 
2. Myriad Pro 
3. Futura PT 
4. Nimbus Sans 
5. Adelle Sans
WhatFont
http:// 
Loreal 
SUCCESSFUL TYPOGRAPHY 
IN OUR PROJECTS 
‣ When designers and developers collaborate 
together it creates ...
Use style guides, 
pattern libraries, 
and general styles 
to create a 
harmonious system
github.com/Jenn/starter-files
http:// 
Loreal 
GENERAL STYLES 
‣ The general styles make sure no element goes 
un-styled 
‣ Created with a separate docu...
Beware 
CROSS-BROWSER 
differences
http:// 
Loreal 
Set aside the 
TIME 
and 
BUDGET 
for thorough QA testing
Make sure your 
fonts will work for 
your audience 
before design 
approval
Test and share font-family browser samples
Use 
-webkit-font-smoothing: antialiased; 
cautiously
http:// 
Loreal 
Sometimes 
“FIXING” 
a problem in one browser is a 
POOR SOLUTION 
in others
Chrome 
Firefox
dowebsitesneedtolookexactlythesameineverybrowser.com
Chrome 
Firefox
http:// 
Loreal 
Test in your 
LEAST FAVORITE 
browser
http:// 
Loreal 
Monitor how fonts affect your 
PAGE SPEED
Just because I can do something, 
SHOULD I?
blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices
codepen.io/davatron5000/pen/nrfGA
ffffallback.com
jordanm.co.uk/tinytype
http:// 
Loreal 
Will the cost 
BE APPROVED?
IT’S OUR JOB 
to help our clients learn to love web fonts
http:// 
Loreal 
FREE FONTS 
have come a long way
fontsquirrel.com
theleagueofmoveabletype.com
edgewebfonts.adobe.com
google.com/fonts
bucketlistly.com
rule-of-three.co.uk
julianabicycles.com
hellohappy.org/beautiful-web-type
http:// 
Loreal 
WEB FONTS 
‣ Add much needed variety to type systems on 
the web 
‣ Set aside time to thoroughly QA in di...
css-tricks.com/examples/IconFont
fontawesome.io
symbolset.com
Research the customer support before you buy
Icon fonts mean no more 
IMAGE SPRITES
http://zurb.com/playground/foundation-icons
Icon fonts are 
ideal for 
RETINA DISPLAYS
You can 
make your own 
icon fonts
glyphsapp.com
icomoon.io
http:// 
Loreal 
ICON FONTS 
‣ A plethora of icon fonts to choose from 
‣ Support for older IE can be poor 
‣ Easily custo...
Use 
ARIA ROLES 
with icon fonts
yatil.net/the-best-way-to-use-icon-fonts
github.com
yatil.net/the-best-way-to-use-icon-fonts
scottkellum.com/2013/10/25/the-new-kellum-method.html
Contrast should be 4.5:1
webaim.org/resources/contrastchecker
Use ems/rems for sizes
snook.ca/archives/html_and_css/font-size-with-rem
webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2
Anything from 45 to 75 characters 
is widely regarded as a 
satisfactory length of line for a 
single-column page set in a...
codepen.io/chriscoyier/pen/atebf
http:// 
Loreal 
TYPE ACCESSIBILITY 
‣ Use ems/rems instead of px for font sizing 
‣ Make sure color contrast meets the 
4...
typecast.com
ladiesintech.com
You can ship early and often while keeping nice type
http:// 
Loreal 
TYPECAST 
‣ Great for setting up type systems out of 
Photoshop 
‣ Can be used to tweak established font ...
Identify 
pain points 
for your 
team to 
overcome them
http:// 
Loreal 
Plan your designs and text for 
VARIABLE CONTENT
Choose a product with a good track record
Limit your font sizes. 
Create a system.
type-o-matic.net
Create your own kit
http:// 
Loreal 
AVOID 
COMMON ROADBLOCKS 
‣ Plan designs for variable content 
‣ Choose web and icon font services with g...
Text masking and clips are super rad
Text rotation
Face tracking for text size
http:// 
Loreal 
UTILIZE ADVANCEMENTS 
FOR TYPE 
‣ CSS properties allow us many different 
customization options beyond si...
Schedule internal 
design reviews with 
your WHOLE TEAM.
CSS Preprocessors/Variables Are Your Friend
QA, 
don’t design, 
in browser
davatron5000.github.io/fitWeird/
http:// 
Loreal 
Quality Assurance 
‣ Check in often with the whole team to identify 
pain points and brainstorm creative ...
cookinsidethebox.com 
thenerdary.net
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
×

Successful Web Typography - The Developer's Ampersandwich

1,345 views

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 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
  • Be the first to comment

Successful Web Typography - The Developer's Ampersandwich

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

×