Stockholms Universitet — 8 nov 2011

tisdag 8 november 11

Webbtypografi & (digital) design Peter Ström Konst & Tekniktisdag 8 november 11

8 november 2011 1. Introduktion 2. Webbsidans struktur 3. Typografi på webben 4. Webfonts / @font-face 5. Exempeltisdag 8 november 11

1. Introduktiontisdag 8 november 11

1995:tisdag 8 november 11

pi.se ↓ Speedway ↓ Abel & Bakertisdag 8 november 11

Mattias Jakobssontisdag 8 november 11

Hello De:Bug, Ich ﬁnde eure Magazin echt cool. Aber, die boxen im hintergr- und von den Texts ﬁnde ich sehr komische. Ich wurde die nicht mehr nutzen, wenn ich euch wäre. Grüsse, Peter Ström, Amsterdamtisdag 8 november 11

Konst & Tekniktisdag 8 november 11

Småländsk Antiquatisdag 8 november 11

Sapmi Grotesktisdag 8 november 11

Dutopiatisdag 8 november 11

Gin Sans ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick dutopian foxtisdag 8 november 11

Die Schrift unserer Zeit Konst & Teknik 2009tisdag 8 november 11

wwwwwwwwww wwwwwwwwww wwWwwwwww.setisdag 8 november 11

2. Webbsidans strukturtisdag 8 november 11

En (modern) webbsidas strukturtisdag 8 november 11

1 3 2 4tisdag 8 november 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.’tisdag 8 november 11

CSS — Cascading Style Sheets ’Styr’ typografi och form av sidor från (oftast) samma fil(er)tisdag 8 november 11

<!DOCTYPE html> <html> index.html <head> ! ! <title>Sidans titel</title> </head> <body> ! ! Welcome! ! ! <img src=”bild.jpg”> </body> </html>tisdag 8 november 11

<!DOCTYPE html> <html> index.html <head> ! ! <title>Sidans titel</title> ! ! <link rel="stylesheet" href="stylesheet.css"> </head> <body> ! ! Welcome! ! ! <img src=”bild.jpg”> </body> </html>tisdag 8 november 11

stylesheet.css body { ! margin: 25px; ! background-color: green; ! color: white; ! font-family: arial, helvetica, sans-serif; ! font-size: 30px; ! letter-spacing: 30px; } body img { ! border: 3px solid black; ! width: 100px; ! -webkit-transform: rotate(-32deg); ! }tisdag 8 november 11

Standarder: CSS, HTMLtisdag 8 november 11

CSS standarder — CSS 1: 1996 — CSS 2: 1998 — CSS 3: ’Under develop- ment since 15.12.05’tisdag 8 november 11

HTML standarder — HTML 1: 1990 — HTML 2–4: 1995–1998 — HTML 5: under utveckling...tisdag 8 november 11

HTML 5 — Drag and drop — Ljud — Video — SVG — (Webfonts) — med meratisdag 8 november 11

HTML 5 CSS 3 Båda under utvecklingtisdag 8 november 11

Flash (1996–) Program från Adobe för att skapa ’Rich Internet Applications’ i (främst) vektorformattisdag 8 november 11

Shockwave Silverlight Real Audio ...tisdag 8 november 11

Webbdesign: Design av system/mallar, inte ’färdiga’ sidor (för det mesta)tisdag 8 november 11

T ex: Olika språk Formulärtisdag 8 november 11

Webbläsare — Chrome — Internet Explorer — Firefox — Opera — Safari — ...tisdag 8 november 11

Operativsystem — Win: 95, 98, Vista, ... — OSX: 10.1 [...] 10.7 — Linux — iOS — Android — ...tisdag 8 november 11

Att tänka på — Olika browsers — Olika operativsystem — Mobiltelefoner — Uppkopplingar — ...tisdag 8 november 11

Upplösningar — Vanlig laptop: 72 dpi — iPad: ca 150 dpi — iPhone 4+: 320 dpi — Dagstidning: ca 150 dpi — Bok: 300< dpitisdag 8 november 11

3. Typografi på webbentisdag 8 november 11

Webbtypsnittshistoriatisdag 8 november 11

HyperText: November 12, 1990tisdag 8 november 11

Tidigare: Användaren har behövt typsnitten installerade i sin datortisdag 8 november 11

PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, tisdag 8 november 11

Mac OS Baskerville Big Caslon Didot Futura Optima ...tisdag 8 november 11

Arial 1992tisdag 8 november 11

Courier New 1955 (1992)tisdag 8 november 11

Times (New Roman) 1931 (1992)tisdag 8 november 11

Arial Courier New Times New Romantisdag 8 november 11

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

Georgia ABCDEFGHIJKL mnopqrstuvwxyz Verdana ABCDEFGHIJKL mnopqrstuvwxyztisdag 8 november 11

1996–2009... Arial Courier New Times New Roman Georgia Verdanatisdag 8 november 11

ClearType Font Collection (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbeltisdag 8 november 11

(Tidigare) alternativ till medföljande typsnitttisdag 8 november 11

Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWWtisdag 8 november 11

Text som bildtisdag 8 november 11

Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–tisdag 8 november 11

SIFRtisdag 8 november 11

Alternativ 3: Cufon 2008–2009tisdag 8 november 11

Cufontisdag 8 november 11

Kantutjämningtisdag 8 november 11

Hinting Matematisk anpassning av hur ett typsnitt visas i på skärmen, baserat till en rastrerad (pixlig) gridtisdag 8 november 11

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

Mobiltelefoner — iPad/iPhone — Android — Windows Mobile — Etc...tisdag 8 november 11

iOS 5.0: 58 typsnittsfamiljer — iPhone & iPad stödjer @font-face embedding — Stöd för andra typsnitt i appartisdag 8 november 11

Typsnitt Android Droid Sans Droid Sans Mono Droid Serif Roboto (okt 2011)tisdag 8 november 11

Webbläsarna i Android & iOS bygger på Webkittisdag 8 november 11

4. Webfonts / @font-facetisdag 8 november 11

Webfonts / @font-face Standard för att visa typsnitt i webbläsarentisdag 8 november 11

WOFF Web Open Font Format 2009–tisdag 8 november 11

@font-face Förutom WOFF: EOT (Internet Explorer) TTF / OTF (Safari) SVG (iOS)tisdag 8 november 11

EOT, TTF/OTF, SVG WOFF Sedan sommaren 2011!tisdag 8 november 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’ Submissiontisdag 8 november 11

Enorm utveckling: Typsnitten behövs inte längre i datorn hos besökaren!tisdag 8 november 11

‘It’s finally happening’ Chris Lilley, W3Ctisdag 8 november 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 Colestisdag 8 november 11

På tiden!!!tisdag 8 november 11

’Vanliga’ typsnitt Köper typsnitt (online), laddar ner, installerar i datorn.tisdag 8 november 11

Webbtypsnitt Prenumererar på eller laddar upp på egen servertisdag 8 november 11

@font-facetisdag 8 november 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 6tisdag 8 november 11

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

— Utvecklingen sker i takt med standarden (W3C) — Men man måste tänka på att alla inte har senaste webbläsarna tills vidare (EOT, TTF/ OTF, SVG)tisdag 8 november 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/tisdag 8 november 11

Att använda webfontstisdag 8 november 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="stylesheet.css"> </head> <body> ! Webfonts FTW </body> </html>tisdag 8 november 11

body { stylesheet.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; ! }tisdag 8 november 11

Typografi på nätet: I framtiden...tisdag 8 november 11

CSS / HTML — Kerning — Avstavning — Spalter — Rotation av text, bakgrundsbilder i text — mmtisdag 8 november 11

OpenType — < 65,536 tecken — Utvecklats sedan 90-tal Tidigare — Postscript/Truetype: 256 teckentisdag 8 november 11

Innebär — Fler tecken... — Automatiska ligaturer — Kapitäler — Massa $ℙℇci⟑lt ℂKℰn — Flera språk i samma typsnitttisdag 8 november 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 trycksakertisdag 8 november 11

5. Exempeltisdag 8 november 11

Länkar och referenser: www.linkli.st/1typotisdag 8 november 11

Tack! www.konstochteknik.se @haraldpeter www.haraldpeterstrom.comtisdag 8 november 11

Stockholms Universitet — 8 nov 2011

by Harald Peter Ström on Nov 08, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 4

Statistics

Stockholms Universitet — 8 nov 2011 — Presentation Transcript

http://www.ornsbergsauktionen.se	3
http://safe.tumblr.com	1