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

3. http://
Loreal
vegetarianschmitter.com

5. Designers and
developers working
together make for a
sturdy project
foundation

6. Help developers understand
DESIGN INTENTIONS

7. Developers love
FORMULAS

8. Type options for the web
Web safe fonts
Image replacement
sIFR
Cufón
@font-face

9. Formulas for typography
Web safe fonts Web font trends

10. google.com/fonts

11. 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

12. blog.fonts.com

13. 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

14. typekit.com

15. 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

16. alistapart.com/blog/post/web-font-trends

17. Typekit most viewed fonts (Jan 2014)
1. Proxima Nova
2. Myriad Pro
3. Futura PT
4. Nimbus Sans
5. Adelle Sans

18. WhatFont

19. 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

21. Use style guides,
pattern libraries,
and general styles
to create a
harmonious system

24. github.com/Jenn/starter-files

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

27. Beware
CROSS-BROWSER
differences

29. http://
Loreal
Set aside the
TIME
and
BUDGET
for thorough QA testing

30. Make sure your
fonts will work for
your audience
before design
approval

31. Test and share font-family browser samples

33. Use
-webkit-font-smoothing: antialiased;
cautiously

34. http://
Loreal
Sometimes
“FIXING”
a problem in one browser is a
POOR SOLUTION
in others

35. Chrome
Firefox

36. dowebsitesneedtolookexactlythesameineverybrowser.com

37. Chrome
Firefox

38. http://
Loreal
Test in your
LEAST FAVORITE
browser

39. http://
Loreal
Monitor how fonts affect your
PAGE SPEED

40. Just because I can do something,
SHOULD I?

44. blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices

45. codepen.io/davatron5000/pen/nrfGA

47. ffffallback.com

48. jordanm.co.uk/tinytype

49. http://
Loreal
Will the cost
BE APPROVED?

50. IT’S OUR JOB
to help our clients learn to love web fonts

51. http://
Loreal
FREE FONTS
have come a long way

52. fontsquirrel.com

53. theleagueofmoveabletype.com

54. edgewebfonts.adobe.com

55. google.com/fonts

56. bucketlistly.com

57. rule-of-three.co.uk

58. julianabicycles.com

59. hellohappy.org/beautiful-web-type

60. 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

62. css-tricks.com/examples/IconFont

63. fontawesome.io

67. symbolset.com

68. Research the customer support before you buy

70. Icon fonts mean no more
IMAGE SPRITES

71. http://zurb.com/playground/foundation-icons

72. Icon fonts are
ideal for
RETINA DISPLAYS

73. You can
make your own
icon fonts

74. glyphsapp.com

75. icomoon.io

76. 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

78. Use
ARIA ROLES
with icon fonts

81. yatil.net/the-best-way-to-use-icon-fonts

82. github.com

83. yatil.net/the-best-way-to-use-icon-fonts

84. scottkellum.com/2013/10/25/the-new-kellum-method.html

85. Contrast should be 4.5:1

86. webaim.org/resources/contrastchecker

89. Use ems/rems for sizes

90. snook.ca/archives/html_and_css/font-size-with-rem

91. webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2

92. 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.
“

93. codepen.io/chriscoyier/pen/atebf

94. 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

96. typecast.com

97. ladiesintech.com

98. You can ship early and often while keeping nice type

99. 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

101. Identify
pain points
for your
team to
overcome them

102. http://
Loreal
Plan your designs and text for
VARIABLE CONTENT

104. Choose a product with a good track record

105. Limit your font sizes.
Create a system.

106. type-o-matic.net

107. Create your own kit

108. 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

110. Text masking and clips are super rad

112. Text rotation

115. Face tracking for text size

116. 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

119. Schedule internal
design reviews with
your WHOLE TEAM.

120. CSS Preprocessors/Variables Are Your Friend

121. QA,
don’t design,
in browser

124. davatron5000.github.io/fitWeird/

125. 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

126. cookinsidethebox.com
thenerdary.net