successful web typography - the developer's ampersandwich
DESCRIPTION
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 webTRANSCRIPT
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li> 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 fontsImage replacement
sIFRCufón
@font-face
Formulas for typography
Web safe fonts Web font trends
google.com/fonts
Google Fonts most popular fonts
1. Open Sans2. Roboto3. Oswald4. Droid Sans5. Lato6. PT Sans7. Open Sans Condensed8. Droid Serif9. Ubuntu10. Source Sans Pro
blog.fonts.com
Fonts.com top fonts
1. Trade Gothic2. Neue Helvetica3. Avenir Next4. Univers5. Avenir6. Proxima Nova7. Helvetica8. Frutiger9. Gill Sans10. Futura
typekit.com
Typekit favorite fonts
1. Proxima Nova2. Futura PT 3. Museo Sans4. Museo Slab5. Adelle6. Brandon Grotesque7. Nimbus Sans8. Myriad Pro9. Freight Sans Pro10. FF Tisa Pro
alistapart.com/blog/post/web-font-trends
Typekit most viewed fonts (Jan 2014)
1. Proxima Nova 2. Myriad Pro3. Futura PT4. Nimbus Sans5. Adelle Sans
WhatFont
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
SUCCESSFUL TYPOGRAPHY IN OUR PROJECTS
Use style guides, pattern libraries,
and general styles to create a
harmonious system
github.com/Jenn/starter-files
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
GENERAL STYLES
BewareCROSS-BROWSERdifferences
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
Set aside the
TIMEand
BUDGETfor 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
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
Sometimes
“FIXING”a problem in one browser is a
POOR SOLUTIONin others
Chrome
Firefox
dowebsitesneedtolookexactlythesameineverybrowser.com
Chrome
Firefox
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
Test in your
LEAST FAVORITEbrowser
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
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
ffffallback.com
jordanm.co.uk/tinytype
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
Will the cost
BE APPROVED?
IT’S OUR JOBto help our clients learn to love web fonts
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li> FREE FONTS
have come a long way
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
WEB FONTS
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
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
ICON FONTS
Use
ARIA ROLESwith icon fonts
yatil.net/the-best-way-to-use-icon-fonts
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 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.
“
codepen.io/chriscoyier/pen/atebf
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
TYPE ACCESSIBILITY
You can ship early and often while keeping nice type
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
TYPECAST
Identify pain points for your team to overcome them
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
Plan your designs and text for
VARIABLE CONTENT
Choose a product with a good track record
Limit your font sizes.Create a system.
Create your own kit
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
AVOID COMMON ROADBLOCKS
Text masking and clips are super rad
Text rotation
Face tracking for text size
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
UTILIZE ADVANCEMENTS FOR TYPE
Schedule internal design reviews with your WHOLE TEAM.
CSS Preprocessors/Variables Are Your Friend
QA, don’t design, in browser
<li class="category1"> <a href="#">
<div class="grid-info"> <h2><span>Must Follow</span><br /><span>Artist on
Twitter</span></h2> <div class="grid-reveal">
<p>For those of you with more than three tattoos of the same band, we salute you.</p>
<p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/80/20" width="80" height="20" alt="Loreal
Paris" /></p> </div> </div> </a></li>
‣ 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
Quality Assurance
cookinsidethebox.comthenerdary.net