Webbtypografi SU Nov 2010 - del 2

Digital typografi (och design) Del 2 Harald Peter Ström peter@konst-teknik.seonsdag 19 oktober 11

November 23 — Repetiton senaste gång — Fördjupning i webbtypografi; Webfonts — Exempel (egna och andras) — Eventuellt videoonsdag 19 oktober 11

Alla länkar och referenser: http://linkli.st/1typoonsdag 19 oktober 11

Kort repetition av förra veckanonsdag 19 oktober 11

HTMLonsdag 19 oktober 11

CSSonsdag 19 oktober 11

Standardsonsdag 19 oktober 11

Att tänka på Olika browsers Olika operativsystem Mobiltelefoner Uppkopplingar ...onsdag 19 oktober 11

HTML 5 CSS 3 Båda under utvecklingonsdag 19 oktober 11

Typografi på webbenonsdag 19 oktober 11

Det har ’alltid’ gått att visa typsnitt på webben, men besökaren har behövt ha typsnittet installerat i sin datoronsdag 19 oktober 11

Baskerville Big Caslon Didot Futura ... Andale Mono, Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman ...onsdag 19 oktober 11

Gemensam nämnare: Arial, Courier, Times, Verdana, Georgiaonsdag 19 oktober 11

Bilder SIFR, Cufononsdag 19 oktober 11

Slut på repetitiononsdag 19 oktober 11

2009/10 Webfontsonsdag 19 oktober 11

Webfonts: Standard för att visa typsnitt på webbenonsdag 19 oktober 11

WOFF Web Open Font Formatonsdag 19 oktober 11

Enorm utveckling: Typsnitten behövs inte i datorn hos besökarenonsdag 19 oktober 11

‘It’s finally happening’ Chris Lilley, W3C imprint.printmag.com/design-thinking/the-future- of-web-fonts-is-sooner-than-it-used-to-beonsdag 19 oktober 11

På tiden!onsdag 19 oktober 11

— Firefox 3.6: jan 2010 — Safari: sommaren 2010 — IE 9 beta: sept 15 2010 — Chrome 5.0: sommaren 2010 — iOS: Sedan tidig höstonsdag 19 oktober 11

Webfonts — Typsnitten ligger på leverantörens server, laddas in vid ned- laddning — Betalning som pre- numeration — Krypterat: JavaScriptonsdag 19 oktober 11

’Vanliga’ typsnitt Köper typsnitt (online), laddar ner, installerar i datorn.onsdag 19 oktober 11

EOT, TTF/OTF, SVG WOFFonsdag 19 oktober 11

@font-faceonsdag 19 oktober 11

onsdag 19 oktober 11

Typsnittsleverantöreronsdag 19 oktober 11

— Utvecklingen sker i takt med standarden (W3C) — Men många satsar på work arounds/ful- lösningar tills vidare (EOT, TTF/OTF, SVG)onsdag 19 oktober 11

Fördelar med text — quick and easy to style — it’s Google-friendly — can be translated — can be read out loud by accessibility devices — PDF/utskrift, instapaper http://imprint.printmag.com/design-thinking/the-future-of-web-fonts-is- sooner-than-it-used-to-be/onsdag 19 oktober 11

Såhär enkelt är detonsdag 19 oktober 11

<!DOCTYPE html> <html> index.html <head> ! ! <title>Sidans titel</title> ! ! <link href="http://cloud.webtype.com/css/ ! ! 420daf7a-6cef-44ac-b520-068cbadd9f71.css" ! ! rel="stylesheet" type="text/css" /> ! ! <link rel="stylesheet" href="stylesheets.css"> </head> <body> ! <p>Webfonts FTW</p> </body> </html>onsdag 19 oktober 11

body { stylesheets.css ! ! margin: 25px; ! ! background-color: black; ! ! color: white; ! ! font-size: 150px; ! ! letter-spacing: 5px; ! ! text-align: center; ! } ! ! .serif { ! ! font-family: Plantin Light, ‘times’; ! ! text-rendering: optimizeLegibility;! ! } ! .sans-serif { ! ! font-family: AntennaComp, helvetica, arial; ! }onsdag 19 oktober 11

Vilket ska man välja?onsdag 19 oktober 11

Typekit — Bra typsnitt — Tillräckligt många — Bra, närvarande blog (blog.typekit.com) — Bra tjänster; kant- utjämning, specimensonsdag 19 oktober 11

Under utvecklingonsdag 19 oktober 11

Webfonts — OpenType-stöd Ligaturer, kapitäler etconsdag 19 oktober 11

CSS / HTML — Kerning — Avstavning — Spalteronsdag 19 oktober 11

⤺ När det där fungerar, ⤺ då kommer vi äntligen ha samma typografiska förutsättningar på webben som tidigare endast existerat i tryckonsdag 19 oktober 11

OpenType — < 65,536 tecken — Utvecklats sedan 90-tal Tidigare — Postscript/Truetype: 256 teckenonsdag 19 oktober 11

Innebär — Fler tecken... — Automatiska ligaturer — Kapitäler — Massa $ℙℇci⟑☙t ℂKℰn — Flera språk i samma typsnittonsdag 19 oktober 11

Att tänka påonsdag 19 oktober 11

— Använd typsnittstjänster så borde det vara lugnt — Men testa dom först — Kolla på olika system — Glöm inte standard backup-typsnitt (Arial, Courier etc)onsdag 19 oktober 11

‘Does anyone know if there are known issue with Type- kit and certain network configurations? None of the embedding fonts on this site show up in my browser (on winXP) on my corporate network.’ http://trentwalton.com/2010/09/15/lost-worlds-fairs/#comment-5687onsdag 19 oktober 11

iPad/iPhone Android (Samsung Galaxy etc)onsdag 19 oktober 11

iPhone: 40 typsnitt iPad: 57 typsnitt — iPhone & iPad stödjer @font-face embedding med SVG typsnitt — Stöd för andra typsnitt i apparonsdag 19 oktober 11

Typsnitt Android Droid Sans Droid Sans Mono Droid Serifonsdag 19 oktober 11

Android & iOS bygger båda på Webkitonsdag 19 oktober 11

— Retina: 320 dpi — iPad: ca 150 dpi — Vanlig laptop: 72 dpi — Dagstidning: ca 150 dpi — Bok: 300< dpionsdag 19 oktober 11

Att designa (typografiskt) för webben Exempelonsdag 19 oktober 11

Nya konstochteknik.seonsdag 19 oktober 11

IKEAonsdag 19 oktober 11

Skönt att det där är över!!!!!!!!onsdag 19 oktober 11

Exempel!onsdag 19 oktober 11

(Browser)onsdag 19 oktober 11

Eventuellt; Tim Brown — More Perfect Typographyonsdag 19 oktober 11

Frågor?onsdag 19 oktober 11

FREE KEVIN December 5 @ Rutger Fuchsgatan 9 12:00–24:00 freekevin.infoonsdag 19 oktober 11

Webbtypografi SU Nov 2010 - del 2

by Harald Peter Ström on Oct 19, 2011

Accessibility

Upload Details

Usage Rights

Statistics

Webbtypografi SU Nov 2010 - del 2 — Presentation Transcript