Best Practices for Incredible Web Typography
Upcoming SlideShare
Loading in...5
×
 

Best Practices for Incredible Web Typography

on

  • 5,997 views

 

Statistics

Views

Total Views
5,997
Views on SlideShare
5,004
Embed Views
993

Actions

Likes
4
Downloads
63
Comments
0

9 Embeds 993

http://blog.webink.com 795
http://nextflow.in.th 130
http://chupipandiii.wikispaces.com 20
http://www.conseilsmarketing.com 17
http://pinterest.com 12
http://alisharosewebdesign.wordpress.com 8
https://twitter.com 6
http://twitter.com 3
http://translate.googleusercontent.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Best Practices for Incredible Web Typography Best Practices for Incredible Web Typography Presentation Transcript

  • Best Practices forIncredibleWeb Typography Presented by Jim Kidwell
  • Fonts andthe Web?
  • @font-face(our savior!)
  • www.yebocreative.com
  • www.heartscryindia.org
  • www.englishworkshop.eu
  • futureofcarsharing.com
  • www.nerdery.com
  • www.blackestate.co.nz
  • www.webink.com
  • www.webink.com
  • www.webink.com
  • IT’S TIMEto get started
  • Selecting Fonts1.  Where to find2.  Design resources3.  Readability4.  Pairing
  • Where are the Web Fonts?•  Type Foundries•  Web Font Services
  • TechnologySelf-hosting Web Font Services•  Fonts on your servers •  Service hosts fonts•  You code CSS variants •  Bit of code to your CSS•  You maintain fonts •  Service maintains fonts•  You test browser support •  Service tests browser updates
  • Design Resources•  Desktop font available•  Plug-in for Photoshop
  • Readability•  Selection•  Size•  Line length
  • Selection P22 Cezanne Regular – P22 Antwerp Regular – A2 Type
  • It’s in the details•  Counter Opening Size•  X-height, Ascenders & Descenders•  Weight
  • Counter Opening Size Helvetica Arial Regular Adelle Sans Regular
  • Counters Helvetica Arial Regular Adelle Sans Regular
  • x-height, ascenders, descenders Calluna Sans-Regular Anzeigen Grotesk D Regular
  • Weight CorbeauConPro-Thin Beton T Extra Bold
  • Line Length•  Print standard = 50-75 max character width •  New proposal = 90 characters max
  • Pairing•  Avoid pairing too similar faces•  Keep it in the family•  Pair Serif & Sans Serif•  fontfuse.webink.com
  • Making it PerfectAvoiding thePitfalls
  • Faux Styling Adobe Caslon Pro - Regular Faux italicized Adobe Caslon Pro - Regular Adobe Caslon Pro - Italic
  • Test across all browsers•  Font Rendering is OS dependent•  Use Adobe BrowserLab, Browsershots, etc.•  Windows is most finicky•  Test with the lowest quality expected
  • Licensing•  Read your font licenses•  Desktop font license ≠ Web font license
  • ResourcesWeb Font Best Practices - Resources •  blog.webink.com/web-typography-best-practices- resources/ Web Font Plug-in for Photoshop •  webfontplugin.com Font testing on live sites •  www.webink.com/fontdropper Connect on Twitter •  @extensis •  @webink •  @jimkidwell