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
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
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
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
20.
21. Use style guides,
pattern libraries,
and general styles
to create a
harmonious system
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
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
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
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.
“
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
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
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
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
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