successful web typography - the developer's ampersandwich

Post on 21-Nov-2014

180 Views

Category:

Technology

1 Downloads

Preview:

Click to see full reader

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 web

TRANSCRIPT

<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

dowebsitesneedtolookexactlythesameineverybrowser.com

<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

codepen.io/davatron5000/pen/nrfGA

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

hellohappy.org/beautiful-web-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>

‣ 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

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.

<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

davatron5000.github.io/fitWeird/

<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

top related