Webbtypografi; Södertörns Högskola

Webbtypografi Peter Ström Grafisk designer Konst & Tekniktisdag den 14 juni 2011

14 juni 2011 — Webbsidans struktur — Typografi på webben — Webfonts / @font-face — Blandat... — Eventuellt lite om K&Ttisdag den 14 juni 2011

Försöka vara så oteknisk som möjligt, men är i princip omöjligt, så fråga gärna om något är oklart...tisdag den 14 juni 2011

Länkar och referenser: www.linkli.st/1typotisdag den 14 juni 2011

Del 1 En webbsidas strukturtisdag den 14 juni 2011

HTMLtisdag den 14 juni 2011

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 den 14 juni 2011

En (modern) webbsidas struktur — Bild — Text / typografi — ’Multimedia’ — Designelementtisdag den 14 juni 2011

1 3 2 4tisdag den 14 juni 2011

CSStisdag den 14 juni 2011

CSS = Cascading Style Sheets ’Styr’ typografi och form av sidor från (oftast) samma fil(er)tisdag den 14 juni 2011

Standards: CSS, HTML mmtisdag den 14 juni 2011

CSS Standards — CSS 1: 1996 — CSS 2: 1998 — CSS 3: ‘Under develop- ment since 15.12.05’tisdag den 14 juni 2011

HTML-standards — HTML 1: 1990 — HTML 2–4: 1995–1998 — HTML 5: in progress...tisdag den 14 juni 2011

Flash (1996–) Program från Macromedia (nu Adobe) för att skapa ’Rich Internet Applications’ i (främst) vektorformattisdag den 14 juni 2011

tisdag den 14 juni 2011

Shockwave Silverlight Real Audio ...tisdag den 14 juni 2011

HTML 5 — SVG — Drag and drop — Ljud — Video — (Webfonts) — med meratisdag den 14 juni 2011

Webbdesign: Design av system, inte ’färdiga’ sidor (för det mesta)tisdag den 14 juni 2011

T ex: Olika språk Formulärtisdag den 14 juni 2011

Browsers — Chrome — Internet Explorer — Firefox — Opera — Safari — ...tisdag den 14 juni 2011

Operativsystem — Win: 95, 98, Vista, ... — OSX: 10.1 [...] 10.6 — Linux — iOS — Android — ...tisdag den 14 juni 2011

Att tänka på — Olika browsers — Olika operativsystem — Mobiltelefoner — Uppkopplingar — ...tisdag den 14 juni 2011

HTML 5 CSS 3 Båda under utvecklingtisdag den 14 juni 2011

Del 2 Typografi på webbentisdag den 14 juni 2011

Webbtypsnittshistoria (!)tisdag den 14 juni 2011

HyperText: November 12, 1990tisdag den 14 juni 2011

Det har ’alltid’ gått att visa typsnitt på webben, men användaren har behövt ha typsnittet installerat i sin datortisdag den 14 juni 2011

PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, tisdag den 14 juni 2011

Mac OS Baskerville Big Caslon Didot Futura Optima ...tisdag den 14 juni 2011

Arial 1992tisdag den 14 juni 2011

Courier New 1955 (1992)tisdag den 14 juni 2011

Times (New Roman) 1931 (1992)tisdag den 14 juni 2011

Arial Courier New Times New Romantisdag den 14 juni 2011

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

Georgia ABCDEFGHIJKL mnopqrstuvwxyz Verdana ABCDEFGHIJKL mnopqrstuvwxyztisdag den 14 juni 2011

Core Fonts on the Web 1996 1. Bra läsbarhet på skärm 2. Blandade ’stilar’ 3. Internationellt stödtisdag den 14 juni 2011

ClearType (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbeltisdag den 14 juni 2011

Typografi är mer än bara typsnittsval...tisdag den 14 juni 2011

Kantutjämningtisdag den 14 juni 2011

Hinting Matematisk anpassning av hur ett typsnitt visas i på skärmen, baserat till en rastrerad (pixlig) gridtisdag den 14 juni 2011

Hinting — Väldigt tidskrävande (dyrt) — På sikt onödigt? — Men i dagsläget nödvändigttisdag den 14 juni 2011

Det kommer aldrig bli exakt likadant överallt; designern / typografen har inte full kontrolltisdag den 14 juni 2011

Alternativ till de medföljande typsnittentisdag den 14 juni 2011

Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWWtisdag den 14 juni 2011

Text som bild Nackdelar: — Ej sökbart — Svårt för t ex blinda — Tidskrävande — Ej typografisk kontroll — Text går inte att kopieratisdag den 14 juni 2011

Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–tisdag den 14 juni 2011

SIFR Fördelar: — Sökbart — Typografisk kontroll — Kopierbar text — Skalbart — Licenciering av typsnitt — Dynamisk inmatningtisdag den 14 juni 2011

SIFR Nackdelar: — Kräver Flash — Fungerar inte på iOS etc — ’Svårjobbat/fult’tisdag den 14 juni 2011

Alternativ 3: Cufon ca 2008–tisdag den 14 juni 2011

Cufon Fördelar: — ’Typ’ markerbart — CSS-kopplat — Bra kantutjämningtisdag den 14 juni 2011

Cufon Nackdelar: — Bara typ markerbart — Inte alltid lagligt — Kräver Javascript — Börjar avvecklas...tisdag den 14 juni 2011

Alternativ 4: Webfonts (@font-face) 2009/10–tisdag den 14 juni 2011

Del 3 Webfonts Standard för att visa typsnitt på webbentisdag den 14 juni 2011

WOFF Web Open Font Format 2009–tisdag den 14 juni 2011

@font-face Förutom WOFF: EOT (Internet Explorer) TTF / OTF (Safari) SVG (iOS)tisdag den 14 juni 2011

EOT, TTF/OTF, SVG WOFF Hösten 2011?tisdag den 14 juni 2011

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 den 14 juni 2011

Enorm utveckling: Typsnitten behövs inte längre i datorn hos besökaren!tisdag den 14 juni 2011

‘It’s finally happening’ Chris Lilley, W3Ctisdag den 14 juni 2011

‘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 den 14 juni 2011

På tiden!tisdag den 14 juni 2011

’Vanliga’ typsnitt Köper typsnitt (online), laddar ner, installerar i datorn.tisdag den 14 juni 2011

Webbtypsnitt Prenumererar på eller laddar upp på egen servertisdag den 14 juni 2011

@font-facetisdag den 14 juni 2011

@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 den 14 juni 2011

WOFF — Firefox 3.6, jan 2010 — IE 9, höst 2010 — Opera 11, dec 2010 — Chrome 6, sept 2010 — Safari, höst 2011tisdag den 14 juni 2011

Några webbtypsnitts- distributörertisdag den 14 juni 2011

— Utvecklingen sker i takt med standarden (W3C) — Men många satsar på work arounds/ful- lösningar tills vidare (EOT, TTF/OTF, SVG)tisdag den 14 juni 2011

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 den 14 juni 2011

Såhär funkar dettisdag den 14 juni 2011

<!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>tisdag den 14 juni 2011

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; ! }tisdag den 14 juni 2011

Vilket ska man välja?tisdag den 14 juni 2011

Typekit — Bra typsnitt — Tillräckligt många — Bra, närvarande blog (blog.typekit.com) — Bra tjänster; kant- utjämning, specimenstisdag den 14 juni 2011

Typografi på nätet: Framtidentisdag den 14 juni 2011

CSS / HTML — Kerning — Avstavning — Spalter — Rotation av text, bakgrundsbilder i text — mmtisdag den 14 juni 2011

OpenType — < 65,536 tecken — Utvecklats sedan 90-tal Tidigare — Postscript/Truetype: 256 teckentisdag den 14 juni 2011

Innebär — Fler tecken... — Automatiska ligaturer — Kapitäler — Massa $ℙℇci⟑☙t ℂKℰn — Flera språk i samma typsnitttisdag den 14 juni 2011

⤺ När det där fungerar, ⤺ då kommer vi äntligen ha (nästan) samma typografiska förut- sättningar på webben som tidigare endast existerat i printvärldentisdag den 14 juni 2011

Webb-plugins för typografisk kontroll — letteringjs.com — kernjs.com — fittextjs.comtisdag den 14 juni 2011

Några exempeltisdag den 14 juni 2011

Del 4 Blandattisdag den 14 juni 2011

Att tänka påtisdag den 14 juni 2011

— 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)tisdag den 14 juni 2011

‘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-5687tisdag den 14 juni 2011

iPad/iPhone Android (Samsung Galaxy etc)tisdag den 14 juni 2011

iPhone: 40 typsnitt iPad: 57 typsnitt — iPhone & iPad stödjer @font-face embedding med SVG typsnitt — Stöd för andra typsnitt i appartisdag den 14 juni 2011

Typsnitt Android Droid Sans Droid Sans Mono Droid Seriftisdag den 14 juni 2011

Android & iOS bygger båda på Webkittisdag den 14 juni 2011

— Retina: 320 dpi — iPad: ca 150 dpi — Vanlig laptop: 72 dpi — Dagstidning: ca 150 dpi — Bok: 300< dpitisdag den 14 juni 2011

Nya användningssätt — Symboler ist för texttisdag den 14 juni 2011

En vanlig länk med massa olika bokstäver!tisdag den 14 juni 2011

Vad har det här betytt?tisdag den 14 juni 2011

Anpassa print- typografin till (standard) webbtypografintisdag den 14 juni 2011

Omvänd processtisdag den 14 juni 2011

Bra resurser: blog.typekit.com nicewebtype.tumblr.com trentwalton.com www.linkli.st/1typotisdag den 14 juni 2011

Det var det!tisdag den 14 juni 2011

Konst & Tekniktisdag den 14 juni 2011

Småländsk Antiqua ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxtisdag den 14 juni 2011

Sapmi Grotesk ABCDEFGHIJKLM nopqrstuvwxyzåäö 123456790 The quick BROWN foxtisdag den 14 juni 2011

Dutopia ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxtisdag den 14 juni 2011

SITE Specific 123 hamburgare på dig ABCDEF GHIJKLMNOPQ TEATRON Technotisdag den 14 juni 2011

wwwwwwwwww wwwwwwwwww wwWwwwwww.setisdag den 14 juni 2011

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 2009tisdag den 14 juni 2011

Tack! haraldpeterstrom.com www.konst-teknik.se www.linkli.st/1typotisdag den 14 juni 2011

Webbtypografi; Södertörns Högskola

by Harald Peter Ström on Jun 14, 2011

Accessibility

Tags

Upload Details

Usage Rights

Statistics

Webbtypografi; Södertörns Högskola — Presentation Transcript