SmashingConf Whister: Developers Ampersandwich

tiny.cc/ampersandwich

http://tiny.cc/ampersandwich


<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> cookinsidethebox.com

http://placekitten.com/80/20


http://vegetarianschmitter.com/

http://vegetarianschmitter.com/






Paris" /></p> </div> </div> </a></li>



When designers and developers work together, we create the best foundation for a project.

Designers must help developers understand

DESIGN INTENTIONS

Helvetica Neue

Developers love

FORMULAS

mezzoblue.com/tests/revised-image-replacement

mikeindustries.com/blog/sifr

cufon.shoqolate.com

Type options for the web

Web safe fontsImage replacementsIFRCufón@font-face

Formulas for typography

Web safe fonts Web font trends

Google Fonts most popular fonts

1. Open Sans2. Slabo3. Roboto4. Oswald5. Lato6. Roboto Condensed7. Source Sans Pro8. PT Sans9. Open Sans Condensed10. Droid Sans

blog.fonts.com

Fonts.com top fonts

1. Avenir Next2. Neue Helvetica3. Avenir4. Trade Gothic5. Univers6. Proxima Nova7. Gill Sans8. Futura9. Helvetica10. Linotype Univers

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

WhatFont

Futura







‣ 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

delval.edu

http://codepen.io/Jenn/pen/qsklF


github.com/Jenn/starter-files







‣ 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



Trebuchet

Web fonts changed everything(for the better)

BewareCROSS-BROWSERdifferences







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







Monitor how fonts affect your

PAGE SPEED



Just because I can do something,

SHOULD I?

Size warnings prompted at:

Google Fonts < 160K

Typekit <= 400K

Cloud Typography < 1000K

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



codepen.io/davatron5000/pen/nrfGA



thenerdary.net/post/75826597863/disabling-typekit-on-mobile



Typekit on mobile

Enabled 4 requests/32KB

Disabled 2 requests/10KB

ffffallback.com

jordanm.co.uk/tinytype







Will the cost

BE APPROVED?



IT’S OUR JOBto help our clients learn to love web fonts






Paris" /></p> </div> </div> </a></li> FREE FONTS

have come a long way



fontsquirrel.com



theleagueofmoveabletype.com



edgewebfonts.adobe.com



google.com/fonts



bucketlistly.com



rule-of-three.co.uk



julianabicycles.com



hellohappy.org/beautiful-web-type









‣ 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



css-tricks.com/examples/IconFont



fontawesome.io



Combine CSS to reduce HTTP requests

symbolset.com



Icon fonts mean no more

IMAGE SPRITES

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



Icon fonts are great for RETINA DISPLAYS

You can make your own icon fonts

glyphsapp.com



icomoon.io









But wait!

OMGSVGFTW

















‣ 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

ICON FONTS and SVG



Use

ARIA ROLESwith icon fonts

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



github.com



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



paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/



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

http://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









‣ 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



typecast.com



ladiesintech.com



You can ship early and often while keeping nice type







‣ 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







Plan your designs and text for

VARIABLE CONTENT



Use

-webkit-font-smoothing: antialiased;cautiously







Sometimes

“FIXING”a problem in one browser is a

POOR SOLUTIONin others



Chrome

Firefox





dowebsitesneedtolookexactlythesameineverybrowser.com

Chrome

Firefox











Test in your

LEAST FAVORITEbrowser



typerendering.com

usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

Choose a product with a good track record

Limit your font sizes.Create a system.

9px10px11px12px13px14px15px16px18px20px21px



type-o-matic.net









‣ 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”

AVOID COMMON ROADBLOCKS



Text rotation

Face tracking for text size






Paris" /></p> </div> </div> </a></li> SHARE

all the knowledge









"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



http://www.forbes.com/sites/burtongoldfield/

http://www.forbes.com/sites/burtongoldfield/







‣ 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

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/









‣ 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



tiny.cc/ampersandwichcookinsidethebox.comthenerdary.net



Technology

SmashingConf Whister: Developers Ampersandwich