• Save
Extensis Web Typography Workshop | WebVisions Portland
Upcoming SlideShare
Loading in...5
×
 

Extensis Web Typography Workshop | WebVisions Portland

on

  • 507 views

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

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

Statistics

Views

Total Views
507
Views on SlideShare
507
Embed Views
0

Actions

Likes
1
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

Extensis Web Typography Workshop | WebVisions Portland Extensis Web Typography Workshop | WebVisions Portland Presentation Transcript

  • Jim Kidwell & Thomas PhinneyWebTypographyWorkshop
  • About UsJim Kidwell•  10+ years at Extensis•  Author, speaker•  Font nerdThomas Phinney•  Extensis, Adobe, indie•  Author, speaker, type design•  Font geek since 1995
  • About You?•  Name•  @font-face knowledge?•  Used web fonts on site(s)?•  Print background?•  Web designers? •  Web developers?•  Front end? Back end?
  • 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 browser•  Same rendering as other fonts•  Regular font files (+ wrapper)
  • 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/somefont-reg.ttf");}
  • 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•  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 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 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 a FallbackStackSame as with old web-safefonts:.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 web nowmost common font 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
  • 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
  • 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 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 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 vs 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
  • Font Quality?Checking/Editing•  FontLab Studio•  Fontographer•  TypeTool•  FontForge•  Glyphs / Glyphs Mini•  OT Master•  RoboFont
  • Use QualityFonts•  Not all fonts are created equal!•  Quality of design•  Not a typographer?Consider a well-curatedfont library!
  • 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
  • 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/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 = slowerpage loads•  But fonts are smallish, much likeimages
  • Too Many Fonts•  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 ormoods
  • 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
  • Gill Sans BoldHeadline•  Body text is unchanged, butstill problematic•  More weight contrast•  More size difference•  Style still too similar
  • Gill Sans BoldHeadline•  Body text now Cochin, smaller •  Contrasts: weight, classificationand size •  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 &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 & 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
  • 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
  • Effective VisualHierarchyGeneral•  http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/Example site:http://net.tutsplus.com/
  • Effective VisualHierarchy: Size•  More sizes = more clutter•  Use fewer levels of headings•  One or at most two, plus bodysize, for most projects
  • 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
  • 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, proximity, background, etc.
  • Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Weight & Widthextralight, light, regular, semibold bold,black, condensed, semi-condensed,regular, semi-extended, etc.
  • 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, 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
  • Effective VisualHierarchyMinimalism•  Restrict # Roles like # Sizes, but afew more
  • 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
  • Use Hyphenation“Pretty much the only forms ofWestern literature that don’t usehyphenation are children’s booksand websites. Until now.”— Richard Rutter
  • 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-hyphens: auto; (IE 10+)•  CSS3 has even more controls…
  • ReconsiderJustification•  Standard: “Full justification”•  Consider “Ragged right”•  Better default choice•  Interactions with line length•  Previous example
  • 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
  • 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;
  • 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 35 or 95•  least fave? 45%=35, 55%=95
  • 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
  • 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•  Consider 140–170%line-spacing
  • 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
  • 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 indent entire block?
  • 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
  • Bigger BodyText•  Legible ≠ Comfortable!
  • Bigger BodyText•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 px•  Ideal size varies by font
  • 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
  • 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)
  • 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
  • Keep ContrastWhat do I mean by contrast?
  • [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
  • 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 conditions vary
  • Keep Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable•  Viewing conditions vary•  User cannot easily override!
  • 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
  • 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 for distinguishing letters andextended reading
  • 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 & 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
  • 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 italics or bold for emphasis•  Make sure your body typeface hasreal italics/bold!•  Book titles should be in italics
  • 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
  • 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-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;}
  • 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
  • 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 available fonts
  • 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
  • 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
  • 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: not yet
  • 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
  • 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";}
  • 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 count off
  • 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•  Branding with type—Rögener,Pool, Packhäuser, Ginger•  http://www.webink.com/type-resources