Webbtypografi @ Beckmans Akademin

Webbtypografi Peter Strömtorsdag 6 oktober 11

Konst & Tekniktorsdag 6 oktober 11

5 oktober 2011 1. Webbsidans struktur 2. Typografi på webben 3. Webfonts / @font-face 4. Blandat... 5. Eventuell mer K&Ttorsdag 6 oktober 11

1. Webbsidans strukturtorsdag 6 oktober 11

En (modern) webbsidas struktur — Bild — Text / typografi — ’Multimedia’ — Designelementtorsdag 6 oktober 11

1 3 2 4torsdag 6 oktober 11

HTML — HyperText Markup Language ’är ett märkspråk och webb- standard för strukturering av text, hypertext, media och inbyggda objekt på exempelvis webbsidor och i epostmeddelanden.’torsdag 6 oktober 11

CSS — Cascading Style Sheets ’Styr’ typografi och form av sidor från (oftast) samma fil(er)torsdag 6 oktober 11

Standards: CSS, HTMLtorsdag 6 oktober 11

CSS standards — CSS 1: 1996 — CSS 2: 1998 — CSS 3: ‘Under develop- ment since 15.12.05’torsdag 6 oktober 11

HTML standards — HTML 1: 1990 — HTML 2–4: 1995–1998 — HTML 5: in progress...torsdag 6 oktober 11

HTML 5 — Drag and drop — Ljud — Video — SVG — (Webfonts) — med meratorsdag 6 oktober 11

HTML 5 CSS 3 Båda under utvecklingtorsdag 6 oktober 11

Flash (1996–) Program från Adobe för att skapa ’Rich Internet Applications’ i (främst) vektorformattorsdag 6 oktober 11

torsdag 6 oktober 11

Shockwave Silverlight Real Audio ...torsdag 6 oktober 11

Webbdesign: Design av system/mallar, inte ’färdiga’ sidor (för det mesta)torsdag 6 oktober 11

T ex: Olika språk Formulärtorsdag 6 oktober 11

Webbläsare — Chrome — Internet Explorer — Firefox — Opera — Safari — ...torsdag 6 oktober 11

Operativsystem — Win: 95, 98, Vista, ... — OSX: 10.1 [...] 10.7 — Linux — iOS — Android — ...torsdag 6 oktober 11

Att tänka på — Olika browsers — Olika operativsystem — Mobiltelefoner — Uppkopplingar — ...torsdag 6 oktober 11

2. Typografi på webbentorsdag 6 oktober 11

Webbtypsnittshistoria (!)torsdag 6 oktober 11

HyperText: November 12, 1990torsdag 6 oktober 11

Det har ’alltid’ gått att visa typsnitt på webben, men användaren har behövt ha typsnitten installerat i sin datortorsdag 6 oktober 11

PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, torsdag 6 oktober 11

Mac OS Baskerville Big Caslon Didot Futura Optima ...torsdag 6 oktober 11

Arial 1992torsdag 6 oktober 11

Courier New 1955 (1992)torsdag 6 oktober 11

Times (New Roman) 1931 (1992)torsdag 6 oktober 11

Arial Courier New Times New Romantorsdag 6 oktober 11

Core Fonts on the Web 1996 Andale Mono, Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, torsdag 6 oktober 11

Georgia ABCDEFGHIJKL mnopqrstuvwxyz Verdana ABCDEFGHIJKL mnopqrstuvwxyztorsdag 6 oktober 11

Core Fonts on the Web 1996 1. Bra läsbarhet på skärm 2. Blandade ’stilar’ 3. Internationellt stödtorsdag 6 oktober 11

ClearType (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbeltorsdag 6 oktober 11

(Tidigare) alternativ till medföljande typsnitttorsdag 6 oktober 11

Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWWtorsdag 6 oktober 11

Text som bild Nackdelar: — Ej sökbart — Svårt för t ex blinda — Tidskrävande — Text går inte att kopiera — Ej typografisk kontrolltorsdag 6 oktober 11

Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–torsdag 6 oktober 11

SIFR Fördelar: — Sökbart — Typografisk kontroll — Kopierbar text — Skalbart — Licenciering av typsnitt — Dynamisk inmatningtorsdag 6 oktober 11

SIFR Nackdelar: — Kräver Flash — Fungerar inte på iOS etctorsdag 6 oktober 11

Alternativ 3: Cufon ca 2008–torsdag 6 oktober 11

Cufon Fördelar: — ’Typ’ markerbart — CSS-kopplat — Bra kantutjämningtorsdag 6 oktober 11

Cufon Nackdelar: — Bara typ markerbart — Inte alltid lagligt — Kräver Javascript — Börjar avvecklas...torsdag 6 oktober 11

Kantutjämningtorsdag 6 oktober 11

Hinting Matematisk anpassning av hur ett typsnitt visas i på skärmen, baserat till en rastrerad (pixlig) gridtorsdag 6 oktober 11

Hinting — Väldigt tidskrävande (dyrt) — På sikt onödigt? — Men i dagsläget nödvändigttorsdag 6 oktober 11

3. Webfonts / @font-facetorsdag 6 oktober 11

Webfonts / @font-face Standard för att visa typsnitt på webbentorsdag 6 oktober 11

WOFF Web Open Font Format 2009–torsdag 6 oktober 11

@font-face Förutom WOFF: EOT (Internet Explorer) TTF / OTF (Safari) SVG (iOS)torsdag 6 oktober 11

EOT, TTF/OTF, SVG WOFF Sedan sommaren 2011!torsdag 6 oktober 11

The W3C commented that it expects WOFF to soon become the ‘single, intero- perable [font] format’ supported by all browsers. — Team Comment on ‘WOFF File Format 1.0’ Submissiontorsdag 6 oktober 11

Enorm utveckling: Typsnitten behövs inte längre i datorn hos besökaren!torsdag 6 oktober 11

‘It’s finally happening’ Chris Lilley, W3Ctorsdag 6 oktober 11

‘It’s an exciting time for typography on the web. It’s 1985 all over again. New technology, new ways to use type, and new fonts made specifi- cally for a new medium.’ Stephen Colestorsdag 6 oktober 11

På tiden!!!torsdag 6 oktober 11

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

Webbtypsnitt Prenumererar på eller laddar upp på egen servertorsdag 6 oktober 11

@font-facetorsdag 6 oktober 11

@font-face — Firefox 3.5+, sept 2009 — IE 5+, 1999 (!) — Opera 10+, sept 2009 — Chrome 4+, sept 2008 — Safari 3.1+, mars 2008 — iOS, Andriod 2.2+, BlackBerry OS 6torsdag 6 oktober 11

WOFF — Firefox 3.6, jan 2010 — IE 9, höst 2010 — Opera 11, dec 2010 — Chrome 6, sept 2010 — Safari 5, juli 2011torsdag 6 oktober 11

— Utvecklingen sker i takt med standarden (W3C) — Men man måste tänka på fallbacks tills vidare (EOT, TTF/OTF, SVG)torsdag 6 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/torsdag 6 oktober 11

Typografi på nätet: I framtiden...torsdag 6 oktober 11

CSS / HTML — Kerning — Avstavning — Spalter — Rotation av text, bakgrundsbilder i text — mmtorsdag 6 oktober 11

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

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

⤺ När det där fungerar, ⤺ kommer vi äntligen ha samma typografiska förutsättningar på webben som tidigare endast existerat när man jobbat med trycksakertorsdag 6 oktober 11

Några exempeltorsdag 6 oktober 11

4. Blandat...torsdag 6 oktober 11

Mobiltelefoner... — iPad/iPhone — Android — Etc...torsdag 6 oktober 11

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

Typsnitt Android Droid Sans Droid Sans Mono Droid Seriftorsdag 6 oktober 11

Webbläsarna i Android & iOS bygger på Webkittorsdag 6 oktober 11

— Vanlig laptop: 72 dpi — iPad: ca 150 dpi — iPhone 4+: 320 dpi — Dagstidning: ca 150 dpi — Bok: 300< dpitorsdag 6 oktober 11

Nya användningssätt — Symboler ist för texttorsdag 6 oktober 11

Vad har det här betytt?torsdag 6 oktober 11

Anpassa print- typografin till (standard) webbtypografintorsdag 6 oktober 11

Bra resurser: blog.typekit.com nicewebtype.tumblr.com trentwalton.com www.linkli.st/1typotorsdag 6 oktober 11

5. Eventuell mer K&T?torsdag 6 oktober 11

Småländsk Antiqua ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxtorsdag 6 oktober 11

Sapmi Grotesk ABCDEFGHIJKLMNOP qrstuvwxyzåäö 123456 Just another quick BROWN foxtorsdag 6 oktober 11

Dutopia ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick utopian foxtorsdag 6 oktober 11

SITE Specific Konsten att äta 1234569 hamburgare på en gång ABCDEFGHIJKLM NOPQRSTUVW TEATRON Technotorsdag 6 oktober 11

wwwwwwwwww wwwwwwwwww wwWwwwwww.setorsdag 6 oktober 11

The JAnte Law 1. Do think you’re special 2. Do think you’re of the same stature as us 3. Do think you’re wiser than us 4. Do imagine yourself better than us 5. Do think you have more knowledge than us 6. Do think you’re more valuable than us 7. Do think you’re good at everything 8. Do think you’re qualified to laugh at us 9. Do think everyone cares about you 10. Do think you can teach us everything by Konst & Teknik, 2010 Die Schrift unserer Zeit Konst & Teknik 2009torsdag 6 oktober 11

Länkar och referenser: www.linkli.st/1typotorsdag 6 oktober 11

Tack! www.konstochteknik.se www.linkli.st/1typotorsdag 6 oktober 11

Webbtypografi @ Beckmans Akademin

by Harald Peter Ström on Oct 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Webbtypografi @ Beckmans Akademin — Presentation Transcript