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.
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
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
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
41.
42. Use style guides,
pattern libraries,
and general styles
to create a
harmonious system
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
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
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
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
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
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”
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
181.
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
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