• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
 

Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated

on

  • 1,532 views

Thomas Phinney introduces web fonts, covers font selection and combination, and also includes: ...

Thomas Phinney introduces web fonts, covers font selection and combination, and also includes:
• How and why mobile devices and iOS have killed off web safe fonts
• Best practices for picking and combining individual typefaces
• On-screen text rendering differences
• Creative inspiration for designing with web fonts in Adobe® Photoshop®

Statistics

Views

Total Views
1,532
Views on SlideShare
1,532
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

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

    Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated Presentation Transcript

    • Presented by Thomas Phinney
    • Agenda1.  Web Fonts Background2.  Choosing Single Fonts3.  Combining Fonts4.  Q&A
    • Since the dawnof the internet,web designwas shackledto a fewcommon fonts:
    • Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
    • Web Safe?Not any more.
    • Bad Old Days:Desktop Fonts?•  PostScript Type 1 (Win & Mac)•  Mac TrueType•  TTF (OpenType TT)•  OTF (OpenType PS)
    • Bad Old Days:Web Fonts?•  Hacks!•  TrueDoc PFR vs EOT•  sIFR (Flash)•  Cufón
    • The Revolution:CSS @ 10•  28 Aug 2007•  Håkon Wium Lie
    • The Revolution:Safari•  Feb-Mar 2008•  First browser support for TTF
    • The Revolution:EOT Opens Up•  Microsoft pubs spec•  Submitted to W3C
    • The Revolution:WOFF•  By Kew, Leming & Blokland•  First spec in 2009•  WOFF vs EOT
    • The Revolution:SVG?•  SVG: unpopular & limited
    • New WorldOrder:Real Fonts
    • [pic of 1920s car here]
    • New WorldOrder: Real Fonts•  Standards-based•  Replace hacks & stopgaps•  From web server•  Downloaded to viewer’s browser•  Same rendering as other fonts•  Regular font files (+ wrapper)
    • Real FontsAre BetterWhy?
    • Real Fontsare better
    • Real Fontsare better
    • Real Fontsare better
    • Real Fontsare better
    • Real Fontsare better
    • How Web FontsAre Used•  @font-face CSS tag•  CSS 2.0•  CSS 2.1•  CSS 3.0
    • How Web FontsAre Used@font-face CSS tag > font-family@font-face {font-family:Glurbish;src: url("http://www.myserver.com/somefont-reg.ttf");}
    • Three Benefits of“real” Web Fonts•  Choice•  Not images•  Standards / Not hacksWhat: TTF, OTF, & wrapped variants
    • •  99%+ of web surfers•  Desktop browsers for years•  Internet Explorer 4+•  Latest mobileBrowser supportfor @font-face
    • Challenges usingWeb Fonts•  Most fonts not licensed for web•  Many font formats required•  EOT•  TTF•  OTF•  (SVG)•  WOFF•  Browsers constantly changing
    • Two ways tointegrate web fonts•  Self-hosting•  Web font service
    • How web fontsare used•  @font-face CSS > font-family•  First appeared in CSS 2.0•  Disappeared in 2.1•  Reappeared in 3.0
    • How web fontsare used•  @font-face CSS > font-family@font-face {font-family:Glurbish;src: url(http://www.myserver.com/somefont-reg.ttf);}
    • Benefits ofSelf-hosting•  No outside dependencies•  Complete control•  Purchase only fonts you need•  Possibly cheaper
    • Benefits ofweb font services•  Handles browser-specific issues•  Browser changes•  Easiest way to use web fonts•  Hides complexity•  Keeps it legal•  Fonts served by cloud-basedservice•  All-you-can use font buffet
    • Hiding @font-face?•  CSS import > font-family(@font-face behind the scenes)@import url("http://fnt.webink.com/wfs/webink.css?project=7DF4B488-23AA-4486-85A3-8C32740CC8EF&fonts=1E8E113D-54A5-D738-0372-AEA99C1621A3:family=TitleFont,A69132F3-0661-6EF9-A2A8-6D43F9997F5E:family=H2Font");•  Why proprietary?
    • JavaScript?•  Extra powers!•  Fails if JavaScript turned off(7%?)
    • ChoosingFontsfor theWeb
    • 12 BestPractices1.  Selecting Single Fonts•  6 best practices2.  Combining Multiple Fonts•  6 best practices3.  Q & A
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • Using aFallback StackLike the old web fonts:.Body {font-family: MyriadPro, "Lucida Sans", "LucidaGrande", Verdana, Arial, sans-serif;}
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • Get LegitimateLicensing•  Under licensing for webis the most commonfont lawsuit
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • Match ExistingVisual Identity•  Thousands of web fonts available•  Expert advice for “closest” fonts•  Ask web font service provider•  Ask on Typophile.com•  Suitcase Fusion’s QuickMatch
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • Let’s say that youare designing for ahigh-classrestaurant
    • Tone/MoodExquisite!Dining!(Helvetica)
    • Tone/MoodExquisiteDining(Helvetica Ultra Light)
    • Tone/MoodExquisiteDining(Bookman Old Style)
    • Tone/MoodExquisiteDining(Chapparal Pro Light Italic)
    • Tone/MoodExqu!ite Dining (Zapfino)
    • Tone/MoodExquisite Dining(Brush Script)
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • LegibilityFactors•  Letterforms, weight, size•  Varied viewing conditions•  Does it work at that size?•  Hinting, Windows, and otherdirty secrets
    • Letterformseaoc eaoc eaoc 6890 6890 6890
    • Letterformseaoc eaoc eaoc 6890 6890 6890
    • Letterforms &Legibility v sizeUnder normal conditions,lowercase or Mixed Caseis best.At very small sizes, ALL CAPS CAN BE MORE LEGIBLE thanlowercase
    • Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
    • Font QualityConsiderations•  Character set•  Letter shaping issues•  Overshoots•  Thick vs thin•  Optical compensation at joins•  Consistency•  Round/straight transitions•  Point placement & extrema•  Spacing & Kerning•  Hinting—mostly see “legibility”•  Examples: Josefin Sans, Smart Frocks
    • Use QualityFonts•  Not all fonts are created equal!•  Quality of design•  Not a typographer?Consider a well-curatedfont library!
    • Font Quality?Checking Tools•  FontLab Studio•  Fontographer•  TypeTool•  FontForge•  Glyphs / Glyphs Mini•  OT Master•  RoboFont
    • Trial Tools forWeb Fonts
    • Trial Tools forWeb Fonts1.  FontDropper2.  Web Font Plug-in3.  QuickMatch
    • Best Practices:Multiple Fonts1.  Fewer typefaces are better2.  Pair contrasting typeclassifications3.  Variation within/betweenfamilies4.  Use each font in distinct roles5.  Don’t contrast spirit6.  Don’t go too far!
    • Fewer arebetter•  For most sites, maximumthree typefaces (plus logo)•  More styles vs. more typefaces•  More web fonts= slower page loads•  But fonts are smallish,much like images
    • Too ManyFonts•  Example via FontDropper
    • Font Pairing:Contrast/Similarity•  Similarity of structure or spirit•  Contrast in weight and/ordetail•  Too similar is a problem•  But so is conflicting spirits or moods
    • Gill Sans Headline+ Myriad Bullets•  Body text has insufficient contrastwith titling•  Not the same typeface, buttoo similar for comfort•  Same weight/width/slope•  Both sans serif•  Title is only 25% bigger
    • Gill Sans Bold+ Myriad•  Body text is still Myriad Regular•  More weight contrast•  More size contrast
    • Gill Sans Bold+ Cochin•  Body text now Cochin, smaller •  Contrasts: weight, classification andsize •  Classic: Pair a serif with a sans
    • Summing Up
    • Best Practices:Multiple Fonts1.  Fewer typefaces are better2.  Contrasting Classifications•  Example: Serif vs Sans3.  Use variation within families•  Enhance contrast within or betweentypefaces•  Use different sizes as a differentiator4.  Use each typeface in distinct roles5.  Don’t contrast “spirit”6.  Don’t go too far!•  Extreme style contrast
    • Resources &Linkshttp://www.webink.com/type-resources@WebINK@ThomasPhinney