Jim Kidwell & Thomas PhinneyWebTypographyWorkshop
About UsJim Kidwell•  10+ years at Extensis•  Author, speaker•  Font nerdThomas Phinney•  Extensis, Adobe, indie•  Author,...
About You?•  Name•  @font-face knowledge?•  Used web fonts on site(s)?•  Print background?•  Web designers? •  Web develop...
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
Introduction& History
At the dawn of theinternet, web designwas shackled to afew common fonts:
Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
Web Safe?
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•  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•  Developed 2009-2011•  WOFF vs EOT
The Revolution:SVG?•  SVG: unpopular & limited
New WorldOrder:Real Fonts
[pic of 1920s car here]
New WorldOrder: Real Fonts•  Standards-based•  Replaces various hacks &stopgaps•  From web server•  Downloaded to viewer’s...
Real FontsAre Better
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/so...
Three Benefits of“real” Web Fonts•  Choice•  Not images•  Standards / Not hacks•  TTF, OTF, and wrapped variants
•  99%+ of web surfers•  Desktop for last few years•  Internet Explorer 4+•  Latest mobileBrowser supportfor @font-face
Challenges usingWeb Fonts•  Fonts not licensed for web•  Many font formats required•  EOT•  TTF•  OTF•  (SVG)•  WOFF•  Bro...
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/some...
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 com...
Hiding @font-face?•  CSS import > font-family(@font-face behind the scenes)@import url("http://fnt.webink.com/wfs/webink.c...
JavaScript?•  Extra powers!•  Fails if JavaScript off (7%?)
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
ChoosingFontsfor theWeb
12 BestPracticesSelecting Single Fonts•  6 best practicesCombining Multiple Fonts•  6 best practices
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Using a FallbackStackSame as with old web-safefonts:.Body {font-family: MyriadPro, "Lucida Sans", "LucidaGrande", Verdana,...
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Get LegitimateLicensing•  Under-licensing for web nowmost common font lawsuit
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Matching ExistingVisual Identity•  Thousands of fonts are availableas web fonts•  Expert advice for “closest” fonts•  Ask ...
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Let’s say that youare designing for ahigh-classrestaurant
Tone/MoodExquisite!Dining!Helvetica Bold
Tone/MoodExquisiteDiningHelvetica Ultra Light
Tone/MoodExquisiteDiningBookman Old Style Bold
Tone/MoodExquisiteDiningChapparal Pro Light Italic
Tone/MoodExqu!ite Dining	Zapfino
Tone/MoodExquisite DiningBrush Script
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
LegibilityFactors•  Letterforms, weight, size•  Varied viewing conditions•  Does it work at that size?•  Hinting, Windows,...
Letterformseaoc eaoc eaoc	6890 6890 6890
Letterformseaoc eaoc eaoc	6890 6890 6890
Letterforms &Legibility vs sizeUnder normal conditions,lowercase or Mixed Caseis best.At very small sizes, ALL CAPS CAN BE...
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Font QualityConsiderations•  Character set•  Letter shaping issues•  Overshoots•  Thick vs thin•  Optical compensation at ...
Font Quality?Checking/Editing•  FontLab Studio•  Fontographer•  TypeTool•  FontForge•  Glyphs / Glyphs Mini•  OT Master•  ...
Use QualityFonts•  Not all fonts are created equal!•  Quality of design•  Not a typographer?Consider a well-curatedfont li...
Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identit...
Tools forTrying WebFonts
Tools forTrying WebFonts1.  FontDropper2.  Web Font Plug-in3.  QuickMatch
Best Practices:Multiple Fonts1.  Fewer typefaces are better2.  Pair contrasting typeclassifications3.  Variation within/be...
Fewer arebetter•  For most sites, maximumthree typefaces (plus logo)•  More styles vs. more typefaces•  More web fonts = s...
Too Many Fonts•  Example via FontDropper
Font Pairing:Contrast/Similarity•  Similarity of structure or spirit•  Contrast in weight and/ordetail•  Too similar is a ...
Gill Sans MT Headline +Lucida Grande Body•  Body text has insufficientcontrast with titling•  Not the same typeface, but 
...
Gill Sans BoldHeadline•  Body text is unchanged, butstill problematic•  More weight contrast•  More size difference•  Styl...
Gill Sans BoldHeadline•  Body text now Cochin, smaller	•  Contrasts: weight, classificationand size	•  Classic: Pair a seri...
Summing Up
Best Practices:Multiple Fonts1.  Fewer typefaces are better2.  Contrasting Classifications•  Example: Serif vs Sans3.  Use...
Resources &Links•  Go to this URL:http://www.webink.com/type-resources•  Includes link torecordings of previouswebcasts!
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
Setting Type
15 things•  10 web typesetting bestpractices•  5 ways web type is not print
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Effective VisualHierarchyGeneral•  http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-...
Effective VisualHierarchy: Size•  More sizes = more clutter•  Use fewer levels of headings•  One or at most two, plus body...
Effective VisualHierarchy: Size•  More sizes = more clutter•  Use fewer levels of headings•  One or at most two, plus body...
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Size change
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Same techniques as other elements•  Location, proxim...
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Weight & Widthextralight, light, regular, semibold b...
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Italics
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Color change
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Different typeface altogether
Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Same techniques as other elements•  Location, proxim...
Effective VisualHierarchyMinimalism•  Restrict # Roles like # Sizes, but afew more
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Use Hyphenation“Pretty much the only forms ofWestern literature that don’t usehyphenation are children’s booksand websites...
Hyphenation:Why?More even spacing w/justifiedtext (reduce/eliminate “rivers”)
Hyphenation:Why?•  Even for non-justified(“ragged”) text: more even“rag” edge•  Tradition
Hyphenation:some examples
Hyphenation:How?•  CSS 3•  hyphens: auto•  -moz-hyphens: auto; (FF 6+)•  -webkit-hyphens: auto; (Safari 5.1+)•  -ms-hyphen...
ReconsiderJustification•  Standard: “Full justification”•  Consider “Ragged right”•  Better default choice•  Interactions w...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Limit & ControlLine Length•  Impacts reading comfort•  Aim for 55–75 characters/line•  Type size ×30 is a good start•  wid...
Line lengthresearch?•  Shaikh & Chaparro (2004)•  35, 55, 75, 95 cpl•  35–75 similar speed•  95 cpl = +6% speed
Line lengthresearch?•  Shaikh & Chaparro (2004)•  35, 55, 75, 95 cpl•  35–75 similar speed•  95 cpl = +6% speed•  60% pref...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
More LineSpacing•  CSS “line-height”a.k.a “Leading”
More LineSpacing•  CSS “line-height”a.k.a “Leading”•  Large x-height >more line spacing
More LineSpacing•  CSS “line-height”a.k.a “Leading”•  Large x-height >more line spacing•  Longer lines >more line spacing
More OnLine Spacing:http://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height
More LineSpacing•  “Normal” (default) ≠ 100%!•  Includes ~20% extra space•  Varies depending on font verticalmetrics•  Con...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Standard ParagraphSeparation•  Full line space is default
Standard ParagraphSeparation•  Full line space is default•  When first line indent?•  When both?•  When eliminate?
Standard ParagraphSeparation•  Full line space is default•  When first line indent?•  When both?•  When eliminate?•  When ...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Bigger BodyText•  Legible ≠ Comfortable!
Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 p...
Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 p...
Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 p...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Keep ContrastWhat do I mean by contrast?
[EXAMPLE SLIDE]Ed Smith Nahhe Nomie Osamu Ikeda Amanda PaullMike MarsdenNathalieDumontRomeo Fahl Jeff WilliamsDavin Kluttz...
Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?
Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable
Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable•  Viewing condi...
Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable•  Viewing condi...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
CARE WITHALL CAPS•  Bigger than lowercase•  Good for very small sizes & poorconditions
CARE WITHALL CAPSBigger than lowercase•  Good for very small sizes & poorconditionsCaps decrease shape differences•  Bad f...
CARE WITHALL CAPSBigger than lowercaseCaps decrease shape differencesUse carefully, in moderation!
CAPS FINE INHEADINGBUT ALL CAPS ARE TOO MUCHIN A FULL SENTENCE LIKETHIS.•  CAPS HELP THIS TINY TEXT•  NAV ELEMENTS?
Some typefacessuck in caps`ÉáàÄç fvÜ|Ñà YÉÇàáfVecg Ybagf
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Underlining isfor amateursExcept: acceptable for URLs•  But consider color instead!
Underlining isfor amateursAcceptable for URLs•  But consider color instead!Just plain icky for everything else•  Use itali...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Kerning•  Spacing adjustment betweenspecific letter pairs•  Info built into font
KerningToe WAVERY with kerningToe WAVERY without kerning
KerningToe WAVERY with kerningToe WAVERY without kerning
Ligatures
LigaturesThe official files often fly in.…"The official files often fly in.…
LigaturesThe official files often fly in.…"The official files often fly in.…Glyphs that link together!Ffi fi fl ft
Kerning &Ligaturestext-rendering:optimizeLegibility•  Turns on kerning and ligatures•  Supported in Firefox 4+
Enable kerning& ligaturesbody {-moz-font-feature-settings:"liga", "kern";-moz-font-feature-settings:"liga=1, kern=1";-ms-f...
Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Contro...
Use AbstractionLayerexample
15 things•  10 web typesettingbest practices•  5 ways web type is not print
5 Ways Webis not Print•  Layout is fluid
5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors
5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors•  Different avai...
5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors•  Different avai...
5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors•  Different avai...
Summing Up
Keep it attractiveBut make it legible
Keep it attractiveBut make it legible&
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
OpenTypebrowser supportFirefox 4+ (syntax change in 14)Chrome:•  15/16+ Win•  22+ MacInternet Explorer 10+Safari & Opera: ...
OpenTypefeature codes•  Standard stuff: liga (ligatures), kern, calt(contextual alternates), clig (contextualligatures)•  ...
OpenTypefeatures in CSSbody {-moz-font-feature-settings:"calt", "liga", "clig", "kern";-moz-font-feature-settings:"calt=1,...
DEMO
Resources &Linkshttp://www.webink.com/type-resourceshttp://mzl.la/ff4-ot@WebINK@ThomasPhinney
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
Test sitesWordPress siteshttp://workshop1.webink.com… workshop40.webink.comUsername: workshopPassword: fontguru!Let’s coun...
Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
Connect@jimkidwell@ThomasPhinney@webink@extensisblog.webink.comblog.extensis.com
Q&A + Resources•  The Elements of Typographic Style—Robert Bringhurst •  Getting it Right With Type—Victoria Squire•  Bran...
Extensis Web Typography Workshop | WebVisions Portland
Upcoming SlideShare
Loading in...5
×

Extensis Web Typography Workshop | WebVisions Portland

468

Published on

Thomas Phinney and Jim Kidwell lead a web typography workshop at WebVisions.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
468
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Extensis Web Typography Workshop | WebVisions Portland"

  1. 1. Jim Kidwell & Thomas PhinneyWebTypographyWorkshop
  2. 2. About UsJim Kidwell•  10+ years at Extensis•  Author, speaker•  Font nerdThomas Phinney•  Extensis, Adobe, indie•  Author, speaker, type design•  Font geek since 1995
  3. 3. About You?•  Name•  @font-face knowledge?•  Used web fonts on site(s)?•  Print background?•  Web designers? •  Web developers?•  Front end? Back end?
  4. 4. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  5. 5. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  6. 6. Introduction& History
  7. 7. At the dawn of theinternet, web designwas shackled to afew common fonts:
  8. 8. Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
  9. 9. Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
  10. 10. Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
  11. 11. Web Safe?
  12. 12. Web Safe?Not any more.
  13. 13. Bad Old Days:Desktop Fonts?•  PostScript Type 1 (Win & Mac)•  Mac TrueType•  TTF (OpenType TT)•  OTF (OpenType PS)
  14. 14. Bad Old Days:Web Fonts?•  Hacks!•  TrueDoc PFR vs EOT•  sIFR•  Cufón
  15. 15. The Revolution:CSS @ 10•  28 Aug 2007•  Håkon Wium Lie
  16. 16. The Revolution:Safari•  Feb-Mar 2008•  First browser support for TTF
  17. 17. The Revolution:EOT Opens Up•  Microsoft pubs spec•  Submitted to W3C
  18. 18. The Revolution:WOFF•  By Kew, Leming & Blokland•  Developed 2009-2011•  WOFF vs EOT
  19. 19. The Revolution:SVG?•  SVG: unpopular & limited
  20. 20. New WorldOrder:Real Fonts
  21. 21. [pic of 1920s car here]
  22. 22. New WorldOrder: Real Fonts•  Standards-based•  Replaces various hacks &stopgaps•  From web server•  Downloaded to viewer’s browser•  Same rendering as other fonts•  Regular font files (+ wrapper)
  23. 23. Real FontsAre Better
  24. 24. Real FontsAre BetterWhy?
  25. 25. Real Fontsare better
  26. 26. Real Fontsare better
  27. 27. Real Fontsare better
  28. 28. Real Fontsare better
  29. 29. Real Fontsare better
  30. 30. How Web FontsAre Used•  @font-face CSS tag•  CSS 2.0•  CSS 2.1•  CSS 3.0
  31. 31. How Web FontsAre Used@font-face CSS tag > font-family@font-face {font-family:Glurbish;src: url("http://www.myserver.com/somefont-reg.ttf");}
  32. 32. Three Benefits of“real” Web Fonts•  Choice•  Not images•  Standards / Not hacks•  TTF, OTF, and wrapped variants
  33. 33. •  99%+ of web surfers•  Desktop for last few years•  Internet Explorer 4+•  Latest mobileBrowser supportfor @font-face
  34. 34. Challenges usingWeb Fonts•  Fonts not licensed for web•  Many font formats required•  EOT•  TTF•  OTF•  (SVG)•  WOFF•  Browsers constantly changing
  35. 35. Two ways tointegrate web fonts•  Self-hosting•  Web font service
  36. 36. How web fontsare used•  @font-face CSS > font-family•  First appeared in CSS 2.0•  Disappeared in 2.1•  Reappeared in 3.0
  37. 37. How web fontsare used•  @font-face CSS > font-family@font-face {font-family:Glurbish;src: url(http://www.myserver.com/somefont-reg.ttf);}
  38. 38. Benefits ofSelf-hosting•  No outside dependencies•  Complete control•  Purchase only fonts you need•  Possibly cheaper
  39. 39. 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
  40. 40. 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?
  41. 41. JavaScript?•  Extra powers!•  Fails if JavaScript off (7%?)
  42. 42. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  43. 43. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  44. 44. ChoosingFontsfor theWeb
  45. 45. 12 BestPracticesSelecting Single Fonts•  6 best practicesCombining Multiple Fonts•  6 best practices
  46. 46. 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
  47. 47. 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
  48. 48. Using a FallbackStackSame as with old web-safefonts:.Body {font-family: MyriadPro, "Lucida Sans", "LucidaGrande", Verdana, Arial, sans-serif;}
  49. 49. 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
  50. 50. Get LegitimateLicensing•  Under-licensing for web nowmost common font lawsuit
  51. 51. 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
  52. 52. Matching ExistingVisual Identity•  Thousands of fonts are availableas web fonts•  Expert advice for “closest” fonts•  Ask your web font serviceprovider•  Ask on Typophile.com•  Suitcase Fusion’s QuickMatch
  53. 53. 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
  54. 54. Let’s say that youare designing for ahigh-classrestaurant
  55. 55. Tone/MoodExquisite!Dining!Helvetica Bold
  56. 56. Tone/MoodExquisiteDiningHelvetica Ultra Light
  57. 57. Tone/MoodExquisiteDiningBookman Old Style Bold
  58. 58. Tone/MoodExquisiteDiningChapparal Pro Light Italic
  59. 59. Tone/MoodExqu!ite Dining Zapfino
  60. 60. Tone/MoodExquisite DiningBrush Script
  61. 61. 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
  62. 62. LegibilityFactors•  Letterforms, weight, size•  Varied viewing conditions•  Does it work at that size?•  Hinting, Windows, and otherdirty secrets
  63. 63. Letterformseaoc eaoc eaoc 6890 6890 6890
  64. 64. Letterformseaoc eaoc eaoc 6890 6890 6890
  65. 65. Letterforms &Legibility vs sizeUnder normal conditions,lowercase or Mixed Caseis best.At very small sizes, ALL CAPS CAN BE MORE LEGIBLE thanlowercase
  66. 66. 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
  67. 67. 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
  68. 68. Font Quality?Checking/Editing•  FontLab Studio•  Fontographer•  TypeTool•  FontForge•  Glyphs / Glyphs Mini•  OT Master•  RoboFont
  69. 69. Use QualityFonts•  Not all fonts are created equal!•  Quality of design•  Not a typographer?Consider a well-curatedfont library!
  70. 70. 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
  71. 71. Tools forTrying WebFonts
  72. 72. Tools forTrying WebFonts1.  FontDropper2.  Web Font Plug-in3.  QuickMatch
  73. 73. 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!
  74. 74. Fewer arebetter•  For most sites, maximumthree typefaces (plus logo)•  More styles vs. more typefaces•  More web fonts = slowerpage loads•  But fonts are smallish, much likeimages
  75. 75. Too Many Fonts•  Example via FontDropper
  76. 76. Font Pairing:Contrast/Similarity•  Similarity of structure or spirit•  Contrast in weight and/ordetail•  Too similar is a problem•  But so is conflicting spirits ormoods
  77. 77. Gill Sans MT Headline +Lucida Grande Body•  Body text has insufficientcontrast with titling•  Not the same typeface, but 
too similar for comfort•  Same weight/width/slope•  Both sans serif•  Title is only 25% bigger
  78. 78. Gill Sans BoldHeadline•  Body text is unchanged, butstill problematic•  More weight contrast•  More size difference•  Style still too similar
  79. 79. Gill Sans BoldHeadline•  Body text now Cochin, smaller •  Contrasts: weight, classificationand size •  Classic: Pair a serif with a sans
  80. 80. Summing Up
  81. 81. 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
  82. 82. Resources &Links•  Go to this URL:http://www.webink.com/type-resources•  Includes link torecordings of previouswebcasts!
  83. 83. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  84. 84. Setting Type
  85. 85. 15 things•  10 web typesetting bestpractices•  5 ways web type is not print
  86. 86. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  87. 87. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  88. 88. Effective VisualHierarchyGeneral•  http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/Example site:http://net.tutsplus.com/
  89. 89. Effective VisualHierarchy: Size•  More sizes = more clutter•  Use fewer levels of headings•  One or at most two, plus bodysize, for most projects
  90. 90. Effective VisualHierarchy: Size•  More sizes = more clutter•  Use fewer levels of headings•  One or at most two, plus bodysize, for most projects•  Consider Golden Ratio scale•  Each level ~1.6 x the size below it
  91. 91. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type
  92. 92. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Size change
  93. 93. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Same techniques as other elements•  Location, proximity, background, etc.
  94. 94. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Weight & Widthextralight, light, regular, semibold bold,black, condensed, semi-condensed,regular, semi-extended, etc.
  95. 95. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Italics
  96. 96. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Color change
  97. 97. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Different typeface altogether
  98. 98. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Same techniques as other elements•  Location, proximity, background, etc.•  Size change•  Weight & Widthextralight, light, regular, semibold bold, black,condensed, semi-condensed, regular, semi-extended, etc. •  Italics•  Color change•  Different typeface altogether
  99. 99. Effective VisualHierarchyMinimalism•  Restrict # Roles like # Sizes, but afew more
  100. 100. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  101. 101. Use Hyphenation“Pretty much the only forms ofWestern literature that don’t usehyphenation are children’s booksand websites. Until now.”— Richard Rutter
  102. 102. Hyphenation:Why?More even spacing w/justifiedtext (reduce/eliminate “rivers”)
  103. 103. Hyphenation:Why?•  Even for non-justified(“ragged”) text: more even“rag” edge•  Tradition
  104. 104. Hyphenation:some examples
  105. 105. Hyphenation:How?•  CSS 3•  hyphens: auto•  -moz-hyphens: auto; (FF 6+)•  -webkit-hyphens: auto; (Safari 5.1+)•  -ms-hyphens: auto; (IE 10+)•  CSS3 has even more controls…
  106. 106. ReconsiderJustification•  Standard: “Full justification”•  Consider “Ragged right”•  Better default choice•  Interactions with line length•  Previous example
  107. 107. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  108. 108. Limit & ControlLine Length•  Impacts reading comfort•  Aim for 55–75 characters/line•  Type size ×30 is a good start•  width: 30em;•  Or, use max•  max-width: 30em;
  109. 109. Line lengthresearch?•  Shaikh & Chaparro (2004)•  35, 55, 75, 95 cpl•  35–75 similar speed•  95 cpl = +6% speed
  110. 110. Line lengthresearch?•  Shaikh & Chaparro (2004)•  35, 55, 75, 95 cpl•  35–75 similar speed•  95 cpl = +6% speed•  60% pref 35 or 95•  least fave? 45%=35, 55%=95
  111. 111. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  112. 112. More LineSpacing•  CSS “line-height”a.k.a “Leading”
  113. 113. More LineSpacing•  CSS “line-height”a.k.a “Leading”•  Large x-height >more line spacing
  114. 114. More LineSpacing•  CSS “line-height”a.k.a “Leading”•  Large x-height >more line spacing•  Longer lines >more line spacing
  115. 115. More OnLine Spacing:http://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height
  116. 116. More LineSpacing•  “Normal” (default) ≠ 100%!•  Includes ~20% extra space•  Varies depending on font verticalmetrics•  Consider 140–170%line-spacing
  117. 117. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  118. 118. Standard ParagraphSeparation•  Full line space is default
  119. 119. Standard ParagraphSeparation•  Full line space is default•  When first line indent?•  When both?•  When eliminate?
  120. 120. Standard ParagraphSeparation•  Full line space is default•  When first line indent?•  When both?•  When eliminate?•  When indent entire block?
  121. 121. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  122. 122. Bigger BodyText•  Legible ≠ Comfortable!
  123. 123. Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 px•  Ideal size varies by font
  124. 124. Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 px•  Ideal size varies by font•  Different x-height
  125. 125. Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 px•  Ideal size varies by font•  Different x-height•  Different minimum legible(example)
  126. 126. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  127. 127. Keep ContrastWhat do I mean by contrast?
  128. 128. [EXAMPLE SLIDE]Ed Smith Nahhe Nomie Osamu Ikeda Amanda PaullMike MarsdenNathalieDumontRomeo Fahl Jeff WilliamsDavin Kluttz Jeremy Bowers Jim Kidwell Marisela AlzuhnChris Tew Jim O’Connor Chad Slater Bill SchwanitzChris Meyer Richard Bamford Carli Edvalson Don JohnsonNic Marson John Stalnaker Chris Stevens Renee SchlacterAndy Nelsen Bernardine Lim Mark Murphy Jonah PerezErica Stupfel Clint Daeuble Junko Suzuki Richard Fattic
  129. 129. Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?
  130. 130. Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable
  131. 131. Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable•  Viewing conditions vary
  132. 132. Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable•  Viewing conditions vary•  User cannot easily override!
  133. 133. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  134. 134. CARE WITHALL CAPS•  Bigger than lowercase•  Good for very small sizes & poorconditions
  135. 135. CARE WITHALL CAPSBigger than lowercase•  Good for very small sizes & poorconditionsCaps decrease shape differences•  Bad for distinguishing letters andextended reading
  136. 136. CARE WITHALL CAPSBigger than lowercaseCaps decrease shape differencesUse carefully, in moderation!
  137. 137. CAPS FINE INHEADINGBUT ALL CAPS ARE TOO MUCHIN A FULL SENTENCE LIKETHIS.•  CAPS HELP THIS TINY TEXT•  NAV ELEMENTS?
  138. 138. Some typefacessuck in caps`ÉáàÄç fvÜ|Ñà YÉÇàáfVecg Ybagf
  139. 139. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  140. 140. Underlining isfor amateursExcept: acceptable for URLs•  But consider color instead!
  141. 141. Underlining isfor amateursAcceptable for URLs•  But consider color instead!Just plain icky for everything else•  Use italics or bold for emphasis•  Make sure your body typeface hasreal italics/bold!•  Book titles should be in italics
  142. 142. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  143. 143. Kerning•  Spacing adjustment betweenspecific letter pairs•  Info built into font
  144. 144. KerningToe WAVERY with kerningToe WAVERY without kerning
  145. 145. KerningToe WAVERY with kerningToe WAVERY without kerning
  146. 146. Ligatures
  147. 147. LigaturesThe official files often fly in.…"The official files often fly in.…
  148. 148. LigaturesThe official files often fly in.…"The official files often fly in.…Glyphs that link together!Ffi fi fl ft
  149. 149. Kerning &Ligaturestext-rendering:optimizeLegibility•  Turns on kerning and ligatures•  Supported in Firefox 4+
  150. 150. Enable kerning& ligaturesbody {-moz-font-feature-settings:"liga", "kern";-moz-font-feature-settings:"liga=1, kern=1";-ms-font-feature-settings:"liga", "kern";-o-font-feature-settings:"liga", "kern";-webkit-font-feature-settings:"liga", "kern";font-feature-settings:"liga", "kern";text-rendering:optimizeLegibility;}
  151. 151. Web TypesettingBest Practices1.  Effective Visual Hierarchy2.  Use Hyphenation /Reconsider Justification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Keep Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Use Abstraction Layer
  152. 152. Use AbstractionLayerexample
  153. 153. 15 things•  10 web typesettingbest practices•  5 ways web type is not print
  154. 154. 5 Ways Webis not Print•  Layout is fluid
  155. 155. 5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors
  156. 156. 5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors•  Different available fonts
  157. 157. 5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors•  Different available fonts•  Font fallback @ the end user
  158. 158. 5 Ways Webis not Print•  Layout is fluid•  Color is free (and overused)•  Both text and background colors•  Different available fonts•  Font fallback @ the end user•  Resolution stinks•  Typically ~80–120 ppi•  Source of many issues
  159. 159. Summing Up
  160. 160. Keep it attractiveBut make it legible
  161. 161. Keep it attractiveBut make it legible&
  162. 162. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  163. 163. OpenTypebrowser supportFirefox 4+ (syntax change in 14)Chrome:•  15/16+ Win•  22+ MacInternet Explorer 10+Safari & Opera: not yet
  164. 164. OpenTypefeature codes•  Standard stuff: liga (ligatures), kern, calt(contextual alternates), clig (contextualligatures)•  Oldstyle/proportional numbers:onum, pnum•  Fractions: frac•  Superscript/subscript: sups, subs, sinf•  Small caps from caps: c2sc•  Small caps from lowercase: smcp•  Discretionary/historical ligs: dlig, hlig•  Stylistic Set #2, #14: ss02, ss14
  165. 165. OpenTypefeatures in CSSbody {-moz-font-feature-settings:"calt", "liga", "clig", "kern";-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";-ms-font-feature-settings:"calt", "liga", "clig", "kern";-o-font-feature-settings:"calt", "liga", "clig", "kern";-webkit-font-feature-settings:"calt", "liga", "clig", "kern";font-feature-settings:"calt", "liga", "clig", "kern";}
  166. 166. DEMO
  167. 167. Resources &Linkshttp://www.webink.com/type-resourceshttp://mzl.la/ff4-ot@WebINK@ThomasPhinney
  168. 168. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  169. 169. Test sitesWordPress siteshttp://workshop1.webink.com… workshop40.webink.comUsername: workshopPassword: fontguru!Let’s count off
  170. 170. Agenda1.  Introduction & History2.  Choosing Fonts3.  Setting Type4.  CSS3 & OpenType Features5.  Try Sample Sites6.  Q&A
  171. 171. Connect@jimkidwell@ThomasPhinney@webink@extensisblog.webink.comblog.extensis.com
  172. 172. Q&A + Resources•  The Elements of Typographic Style—Robert Bringhurst •  Getting it Right With Type—Victoria Squire•  Branding with type—Rögener,Pool, Packhäuser, Ginger•  http://www.webink.com/type-resources

×