• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The New Web Typography
 

The New Web Typography

on

  • 1,609 views

 

Statistics

Views

Total Views
1,609
Views on SlideShare
1,606
Embed Views
3

Actions

Likes
4
Downloads
42
Comments
1

1 Embed 3

http://blog.naver.com 3

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • http://www.fontmofo.com

    Over 13000 free fonts available for download now free of charge.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The New Web Typography The New Web Typography Presentation Transcript

    • THENEWWEBTYPOGRAPHYWHERE THE SEXY ISJASON CRANFORD TEAGUE @jasonspeaking.com | @jasonspeakingforumone.com | @forumone edUi | 14 September 2011
    • LETS GO 
    • WHAT IS SEXY?
    • folha de s. paulo newspaper
    • WEBTYPOGRAPHY=HTML + CSS = SEXY?
    • WEBBORINGTYPOGRAPHY=HTML + CSS = SEXY?
    • SO…Whats been the problem?
    • Q1HOW MANY FONTS ARE THERE?1,500,000150,00015,0001,500
    • 150KDIGITAL FONTS
    • Q2HOW MANY FONTS ARECOMMONLY USED ON THE WEB?1811105
    • Q2HOW MANY FONTS ARECOMMONLY USED ON THE WEB?1811105
    • Q2HOW MANY FONTS ARECOMMONLY USED ON THE WEB?1811105
    • Andale Mono11 Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman! Trebuchet MSCORE WEB FONTS Verdana 
    • If Fonts Were Dogs… fuckyeahdementia.com
    • Andale Mono11 Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman! Trebuchet MSCORE WEB FONTS Verdana 
    • 115 Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman! Trebuchet MSCORE WEB FONTS Verdana 
    • Verdana GeorgiaTrebuchet MS Arial Times New Roman
    • ArialGeorgiaTimes New RomanTrebuchet MSVerdana
    • A A A A A A A A A A A A A A A A A A A A A A
    • and A Brand BBrand C Brand D Brand E Brand Xand F Brand G Brand H Brand Irand J Brand K Brand S Brand R Brand T
    • typography::typevoice::speech
    • SO…Where are the fonts on the web?
    • 182!fWEB SAFE FONTSWindows & Mac Fonts
    • 66!fWEB SAFE FONTSCommon Denominator
    • Websafe Fontsß 3 I Font Name Weight and Style OS Rank Sample1 Academy Engraved LET 3-Likely2 Agency FB bold 4-Less Likely3 Algerian 4-Less Likely4 American Typewriter bold 2-Almost Certain5 Andale Mono 1-Certain6 Apple Chancery 2-Almost Certain7 Apple Symbols 2-Almost Certain8 Arial bold, italic, bold/italic 1-Certain
    • @ 2008Safari Supports TTF & OTF Formats
    • @ 2008 2009All Browsers Support Webfonts
    • @ 2008 2009 2010The Year of Web Typography
    • @ 2008 2009 20102011Web Typography is Sexy
    • 40K@WEBFONTS
    • WHERE DOWEBFONTS COMEFROM?@ @ $ @ ⎋ convert buy lease
    • @THENEWWEBTYPOGRAPHYWEBTYPEBASICS
    • LETS GO 
    • WHAT IS AWEBFONT?
    • WEBFONTor web font e space notice th
    • WEBFONTFont file downloaded from a webserver and used by the browser torender HTML text.
    • WEBFONTS Your your Your Computer font font-fileServerserver file
    • YOUR FONT web page Users Computer yourserver @font-face font-file
    • 5@WEBFONT FILE FORMATS
    • BROWSER WEBFONT EOT ✔4TTF/OTF ✔ 3.5 ✔ 3.1 ✔ 10 SVG ✔ 3.1 ✔3 ✔ 10 WOFF ✔9 ✔ 3.6 ? ✔6 ✔ 11
    • MOBILE WEBFONT EOT TTF/OTF ✔ 4.2 ✔ 2.2 ✔6 SVG ✔ 3.1 WOFF
    • WEBFONTS .eot file font-file .ttf/.otf font-file file Your yourServerserver Your Computer font-file .svg file .wo font-file file
    • BUILDING AFONTSTACKAdding a webfont
    • Star generic understudyfont-family:%gill%sans%MT,%arial,%sans-serif;
    • Websafe generic core webfont-family:%gill%sans%MT,%arial,%sans-serif;
    • /fonts myfont-webfont.eot myfont-webfont.otf myfont-webfont.svg myfont-webfont.woff
    • name you give it@font-face%{ font-family:%Diavlo; src:%url(fonts/Diavlo_BOOK_II_37.otf); }path to font file
    • name you give it@font-face%{ font-family:%body%copy; src:%url(fonts/Diavlo_BOOK_II_37.otf); }path to font file
    • name you give it ?# fixes IE@font-face%{ font-family:%body%copy; src:%url(myfont-webfont.eot); src:%url(myfont-webfont.eot?#iefix)% %%%%%%%%%%format(embedded-opentype),% % %url(myfont-webfont.woff)%format(woff),% % %url(myfont-webfont.ttf)%%format(truetype), % %url(myfont-webfont.svg#webfontFqDaNIX6)% %%%%%%%%%%format(svg); }
    • name you gave it font-family:%diavlo,%gill%sans%MT,%arial,%sans-serif;
    • name you gave it font-family:% body%copy,%gill%sans%MT,%arial,%sans-serif;
    • @font-face%{ font-family:%body%copy%bold; src:%url(myfont-bold-bold-webfont.eot);% src:%url(myfont-bold-webfont.eot?#iefix)% %%%%%%%%format(embedded-opentype),% % %url(myfont-bold-webfont.woff)%format(woff),% % %url(myfont-bold-webfont.ttf)%%format(truetype), % %url(myfont-bold-webfont.svg#webfontFqDaNIX6)% %%%%%%%%format(svg); }
    • @font-face%{ font-family:%body%copy; src:%url(myfont-bold-webfont.eot);% src:%url(myfont-bold-webfont.eot?#iefix)% %%%%%%%%format(embedded-opentype),% % %url(myfont-bold-webfont.woff)%format(woff),% % %url(myfont-bold-webfont.ttf)%%format(truetype), % %url(myfont-bold-webfont.svg#webfontFqDaNIX6)% %%%%%%%%format(svg); font-weight:%bold; font-style:%normal; }
    • @font-face%{ font-family:%body%copy; src:%url(myfont-webfont.eot);% src:%url(myfont-webfont.eot?#iefix)% %%%%%%%%format(embedded-opentype),% % %url(myfont-webfont.woff)%format(woff),% % %url(myfont-webfont.ttf)%%format(truetype), font-weight:%bold; font-style:%normal; }
    • @font%face,{ font%family:,body,copy; src:,url(myfont%webfont.eot);, src:,url(myfont%webfont.eot?#iefix), ,,,,,,,,format(embedded%opentype),, , ,url(myfont%webfont.woff),format(woff),, , ,url(myfont%webfont.ttf),,format(truetype), font%weight:,normal; font%style:,normal; }@font%face,{ font%family:,body,copy; src:,url(myfont%bold%webfont.eot);, src:,url(myfont%bold%webfont.eot?#iefix), ,,,,,,,,format(embedded%opentype),, , ,url(myfont%bold%webfont.woff),format(woff),, , ,url(myfont%bold%webfont.ttf),,format(truetype), font%weight:,bold; font%style:,normal; }@font%face,{ font%family:,body,copy; src:,url(myfont%italic%webfont.eot);, src:,url(myfont%italic%webfont.eot?#iefix), ,,,,,,,,format(embedded%opentype),, , ,url(myfont%italic%webfont.woff),format(woff),, , ,url(myfont%italic%webfont.ttf),,format(truetype), font%weight:,normal; font%style:,italic; }
    • WHERE DO I FINDWEBFONTS?
    • CONVERT, BUY ORLEASE?
    • CONVERT, BUY ORLEASE?conversion — YOUR FONTretailers — YOUR FONTweb font service bureaus — THEIR FONT
    • YOUR FONT web page Users Computer yourserver @font-face font-file
    • THEIR FONT web your pageserver Users Computer @font-face, <link> JavaScriptWFSBserver font-file
    • CONVERT? @➡Any Font➡You control quality➡You control the code➡Sub-setting
    • EULAEnd User License Agreement
    • IPIntellectual Property
    • LOOKING FOR… @➡ EULA? Are you breaking the law?➡Server load?➡Screen Quality?
    • BUY? @ $✓ One Time Price✓ Desktop Use✓ Unlimited Domains✓ Unlimited Page Views✓ Many are free
    • LOOKING FOR… @ $✓ Webfont linking in EULA✓Compression✓ Formats✓ Price Structure
    • RETAILERS @ $RETAILER FontSquirrell FontSpring MyFonts Kernest FontShopWebfonts 660 1800+ 100+ 37,296 2543 families families families fonts famalies Subset ✔ ✔ ✔ eot, otf, ttf, svg & Formats woff eot, ttf, svg & woff eot & woff eot, ttf, svg & woff eot, ttf, svg & woff Price Free $80-860 Free-$100 $10-$160 free–$15 /ws /ws /font /font URL fontsquirrell.com fontspring.com fontshop.com myfonts.com kernest.com
    • LEASE? @ ⎋➡ No license worries➡ No cross browser worries➡ Reduces server strain➡ Quality Fonts
    • LOOKING FOR… @ ⎋✓Available Fonts or Font Families✓How Fonts are Added✓Local Use✓Bandwidth Usage✓Price Structure
    • @WEBFONT SERVICE BUREAUS ⎋ WFSB Google Web Fonts fonts.com WebInk FontDeck WebType Webfonts 150+ 10,000+ 2283 735 580+ families fonts fonts families families <js> or Embed <link> @font-face <link> <link> @font-face Local ✔ ✔ ✔ Subset ✔ ✔ ✔ ✔ Bandwidth Unlimited 25K–12.5M 1–80GB 1M 250K–2.5M pageviews/month month pageviews/month pageviews/month Billing Free Free–$500 99¢–$59.99 $2.50–19.99 $40–400 unlimited/month 4ws/month font/year font/yeat URL google.com/webfonts webfonts.fonts.com webink.com fontdeck.com webtype.com
    • @WEBFONT SERVICE BUREAUS ⎋ WFSB FontsLive Typekit Kernest Typotheque Typonine Webfonts 499 4000 2503 40 20 fonts fonts fonts families families <js> or <link> or Embed <js> <link> <link> @font-face @font-face Local ✔ ✔ ✔ ✔ Subset ✔ ✔ ✔ ✔ Bandwidth 250K–12.5M 25K–1M Unlimited Unlimited 500MB pageviews/month pageviews/month /month free Billing $40–$2,000 Free–$99.99 Free–$15 $100–900 €2 unlimited/year /year /font/year/ws /family additional GB/month URL fontslive.com typekit.com kernest.com typotheque.com typonine.com
    • HOW DO I CHOOSEWEBFONTS?
    • choose for REPERTOIRE…
    • choose for STYLES…Cambria Lorem& ipsum& dolor& sit& amet,& consectetuer& adipiscing& elit.& Nunc& sed& ligula.& Pellentesque& non! felis! vel! lorem! tempor! ultricies.& Class& aptent&taciti!sociosqu!ad!litora&torquent&per& conubia& nostra,& per& inceptos& hymenaeos.& Vestibulum&ante&ipsum&primis&in&faucibus)orci) luctus& et& ultrices& posuere& cubilia& Curae;& In& hac& habitasse& platea& dictumst.& Aenean& venenatis& hendrerit& tellus.& Nunc& posuere,+ nulla& quis+ sollicitudin& pretium,& dui& mi& ultricies&magna,&id&placerat&lorem.
    • choose for STYLES…BaskervilleOld Face Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
    • choose for OPTIMIZATION…
    • choose for COMPATIBILITY…
    • choose for LEGIBILITY… Diavlo Looking Glass Weight & Thickness Strokes & Serifs Tahoma Looking Glass
    • choose for LEGIBILITY…Slab Serif
    • choose for READABILITY… letter spacing letter width Tahoma Looking Glass x-height counter width
    • choose for REPERTOIRE STYLES OPTIMIZATION COMPATIBILITY LEGIBILITY READIBLITY
    • VOICE!!!
    • typography::typevoice::speech
    • A A A A A A A A A A A A A A A A A A A A A A
    • and A Brand BBrand C Brand D Brand E Brand Xand F Brand G Brand H Brand Irand J Brand K Brand S Brand R Brand T
    • IF I SAY…“I’m going to kill you”
    • “I’m going to kill you” Suave = Cooper Black“I’m going to kill you” Robotic = Synchro LET“I’m going to kill you” Insane = Sybil Green “I’m going to kill you” Pirate = UglyQua
    • HOW DO I MAKE WEBTYPOGRAPHY SEXY?
    • use CONTRAST…High Color Contrast
    • use CONTRAST…Low Color Contrast
    • use CONTRAST…Mixed Color Contrast
    • use CONTRAST… Stylecontrast
    • use CONTRAST… widthContrast
    • use CONTRAST… TypefaceContrast
    • use CONTRAST… multiContrast
    • use SPACE… Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kittens fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldnt have had any hand in the mischief.
    • use SPACE Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kittens fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldnt have had any
    • use SCALE… LARGE small
    • use TEXTURE… Drop Shadow
    • use TEXTURE…Emboss or Bevel
    • use CONSISTENT VARIATION…
    • MAKE IT SEXY…
    • forumone.com
    • fluidwebtype.info
    • THENEWWEBTYPOGRAPHY QUESTIONS @ jasonspeaking.com | me@jasonspeaking.com | @jasonspeaking
    • THANKS!www.jasonspeaking.comme@jasonspeaking.com@jasonspeaking