Your SlideShare is downloading. ×
Webbtypografi; Södertörns Högskola
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Webbtypografi; Södertörns Högskola

703
views

Published on

June 14 …

June 14
Links etc: http://linkli.st/konst-teknik/1typo


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
703
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Webbtypografi Peter Ström Grafisk designer Konst & Tekniktisdag den 14 juni 2011
  • 2. 14 juni 2011 — Webbsidans struktur — Typografi på webben — Webfonts / @font-face — Blandat... — Eventuellt lite om K&Ttisdag den 14 juni 2011
  • 3. 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
  • 4. Länkar och referenser: www.linkli.st/1typotisdag den 14 juni 2011
  • 5. Del 1 En webbsidas strukturtisdag den 14 juni 2011
  • 6. HTMLtisdag den 14 juni 2011
  • 7. 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
  • 8. En (modern) webbsidas struktur — Bild — Text / typografi — ’Multimedia’ — Designelementtisdag den 14 juni 2011
  • 9. 1 3 2 4tisdag den 14 juni 2011
  • 10. CSStisdag den 14 juni 2011
  • 11. CSS = Cascading Style Sheets ’Styr’ typografi och form av sidor från (oftast) samma fil(er)tisdag den 14 juni 2011
  • 12. Standards: CSS, HTML mmtisdag den 14 juni 2011
  • 13. CSS Standards — CSS 1: 1996 — CSS 2: 1998 — CSS 3: ‘Under develop- ment since 15.12.05’tisdag den 14 juni 2011
  • 14. HTML-standards — HTML 1: 1990 — HTML 2–4: 1995–1998 — HTML 5: in progress...tisdag den 14 juni 2011
  • 15. Flash (1996–) Program från Macromedia (nu Adobe) för att skapa ’Rich Internet Applications’ i (främst) vektorformattisdag den 14 juni 2011
  • 16. tisdag den 14 juni 2011
  • 17. Shockwave Silverlight Real Audio ...tisdag den 14 juni 2011
  • 18. HTML 5 — SVG — Drag and drop — Ljud — Video — (Webfonts) — med meratisdag den 14 juni 2011
  • 19. Webbdesign: Design av system, inte ’färdiga’ sidor (för det mesta)tisdag den 14 juni 2011
  • 20. T ex: Olika språk Formulärtisdag den 14 juni 2011
  • 21. Browsers — Chrome — Internet Explorer — Firefox — Opera — Safari — ...tisdag den 14 juni 2011
  • 22. Operativsystem — Win: 95, 98, Vista, ... — OSX: 10.1 [...] 10.6 — Linux — iOS — Android — ...tisdag den 14 juni 2011
  • 23. Att tänka på — Olika browsers — Olika operativsystem — Mobiltelefoner — Uppkopplingar — ...tisdag den 14 juni 2011
  • 24. HTML 5 CSS 3 Båda under utvecklingtisdag den 14 juni 2011
  • 25. Del 2 Typografi på webbentisdag den 14 juni 2011
  • 26. Webbtypsnittshistoria (!)tisdag den 14 juni 2011
  • 27. HyperText: November 12, 1990tisdag den 14 juni 2011
  • 28. tisdag den 14 juni 2011
  • 29. tisdag den 14 juni 2011
  • 30. 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
  • 31. PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, tisdag den 14 juni 2011
  • 32. Mac OS Baskerville Big Caslon Didot Futura Optima ...tisdag den 14 juni 2011
  • 33. Arial 1992tisdag den 14 juni 2011
  • 34. Courier New 1955 (1992)tisdag den 14 juni 2011
  • 35. Times (New Roman) 1931 (1992)tisdag den 14 juni 2011
  • 36. Arial Courier New Times New Romantisdag den 14 juni 2011
  • 37. 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
  • 38. Georgia ABCDEFGHIJKL mnopqrstuvwxyz Verdana ABCDEFGHIJKL mnopqrstuvwxyztisdag den 14 juni 2011
  • 39. Core Fonts on the Web 1996 1. Bra läsbarhet på skärm 2. Blandade ’stilar’ 3. Internationellt stödtisdag den 14 juni 2011
  • 40. ClearType (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbeltisdag den 14 juni 2011
  • 41. Typografi är mer än bara typsnittsval...tisdag den 14 juni 2011
  • 42. Kantutjämningtisdag den 14 juni 2011
  • 43. tisdag den 14 juni 2011
  • 44. Hinting Matematisk anpassning av hur ett typsnitt visas i på skärmen, baserat till en rastrerad (pixlig) gridtisdag den 14 juni 2011
  • 45. tisdag den 14 juni 2011
  • 46. tisdag den 14 juni 2011
  • 47. Hinting — Väldigt tidskrävande (dyrt) — På sikt onödigt? — Men i dagsläget nödvändigttisdag den 14 juni 2011
  • 48. Det kommer aldrig bli exakt likadant överallt; designern / typografen har inte full kontrolltisdag den 14 juni 2011
  • 49. Alternativ till de medföljande typsnittentisdag den 14 juni 2011
  • 50. Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWWtisdag den 14 juni 2011
  • 51. 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
  • 52. tisdag den 14 juni 2011
  • 53. Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–tisdag den 14 juni 2011
  • 54. tisdag den 14 juni 2011
  • 55. SIFR Fördelar: — Sökbart — Typografisk kontroll — Kopierbar text — Skalbart — Licenciering av typsnitt — Dynamisk inmatningtisdag den 14 juni 2011
  • 56. SIFR Nackdelar: — Kräver Flash — Fungerar inte på iOS etc — ’Svårjobbat/fult’tisdag den 14 juni 2011
  • 57. Alternativ 3: Cufon ca 2008–tisdag den 14 juni 2011
  • 58. tisdag den 14 juni 2011
  • 59. Cufon Fördelar: — ’Typ’ markerbart — CSS-kopplat — Bra kantutjämningtisdag den 14 juni 2011
  • 60. Cufon Nackdelar: — Bara typ markerbart — Inte alltid lagligt — Kräver Javascript — Börjar avvecklas...tisdag den 14 juni 2011
  • 61. Alternativ 4: Webfonts (@font-face) 2009/10–tisdag den 14 juni 2011
  • 62. Del 3 Webfonts Standard för att visa typsnitt på webbentisdag den 14 juni 2011
  • 63. WOFF Web Open Font Format 2009–tisdag den 14 juni 2011
  • 64. @font-face Förutom WOFF: EOT (Internet Explorer) TTF / OTF (Safari) SVG (iOS)tisdag den 14 juni 2011
  • 65. EOT, TTF/OTF, SVG WOFF Hösten 2011?tisdag den 14 juni 2011
  • 66. 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
  • 67. Enorm utveckling: Typsnitten behövs inte längre i datorn hos besökaren!tisdag den 14 juni 2011
  • 68. ‘It’s finally happening’ Chris Lilley, W3Ctisdag den 14 juni 2011
  • 69. ‘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
  • 70. På tiden!tisdag den 14 juni 2011
  • 71. ’Vanliga’ typsnitt Köper typsnitt (online), laddar ner, installerar i datorn.tisdag den 14 juni 2011
  • 72. Webbtypsnitt Prenumererar på eller laddar upp på egen servertisdag den 14 juni 2011
  • 73. @font-facetisdag den 14 juni 2011
  • 74. tisdag den 14 juni 2011
  • 75. @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
  • 76. 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
  • 77. Några webbtypsnitts- distributörertisdag den 14 juni 2011
  • 78. tisdag den 14 juni 2011
  • 79. tisdag den 14 juni 2011
  • 80. tisdag den 14 juni 2011
  • 81. tisdag den 14 juni 2011
  • 82. tisdag den 14 juni 2011
  • 83. tisdag den 14 juni 2011
  • 84. — 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
  • 85. 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
  • 86. Såhär funkar dettisdag den 14 juni 2011
  • 87. tisdag den 14 juni 2011
  • 88. tisdag den 14 juni 2011
  • 89. tisdag den 14 juni 2011
  • 90. <!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
  • 91. 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
  • 92. tisdag den 14 juni 2011
  • 93. Vilket ska man välja?tisdag den 14 juni 2011
  • 94. 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
  • 95. tisdag den 14 juni 2011
  • 96. tisdag den 14 juni 2011
  • 97. tisdag den 14 juni 2011
  • 98. tisdag den 14 juni 2011
  • 99. Typografi på nätet: Framtidentisdag den 14 juni 2011
  • 100. CSS / HTML — Kerning — Avstavning — Spalter — Rotation av text, bakgrundsbilder i text — mmtisdag den 14 juni 2011
  • 101. OpenType — < 65,536 tecken — Utvecklats sedan 90-tal Tidigare — Postscript/Truetype: 256 teckentisdag den 14 juni 2011
  • 102. tisdag den 14 juni 2011
  • 103. Innebär — Fler tecken... — Automatiska ligaturer — Kapitäler — Massa $ℙℇci⟑☙t ℂKℰn — Flera språk i samma typsnitttisdag den 14 juni 2011
  • 104. tisdag den 14 juni 2011
  • 105. ⤺ 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
  • 106. Webb-plugins för typografisk kontroll — letteringjs.com — kernjs.com — fittextjs.comtisdag den 14 juni 2011
  • 107. Några exempeltisdag den 14 juni 2011
  • 108. tisdag den 14 juni 2011
  • 109. tisdag den 14 juni 2011
  • 110. tisdag den 14 juni 2011
  • 111. tisdag den 14 juni 2011
  • 112. tisdag den 14 juni 2011
  • 113. Del 4 Blandattisdag den 14 juni 2011
  • 114. Att tänka påtisdag den 14 juni 2011
  • 115. — 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
  • 116. ‘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
  • 117. iPad/iPhone Android (Samsung Galaxy etc)tisdag den 14 juni 2011
  • 118. tisdag den 14 juni 2011
  • 119. 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
  • 120. tisdag den 14 juni 2011
  • 121. Typsnitt Android Droid Sans Droid Sans Mono Droid Seriftisdag den 14 juni 2011
  • 122. tisdag den 14 juni 2011
  • 123. Android & iOS bygger båda på Webkittisdag den 14 juni 2011
  • 124. — Retina: 320 dpi — iPad: ca 150 dpi — Vanlig laptop: 72 dpi — Dagstidning: ca 150 dpi — Bok: 300< dpitisdag den 14 juni 2011
  • 125. Nya användningssätt — Symboler ist för texttisdag den 14 juni 2011
  • 126. tisdag den 14 juni 2011
  • 127. tisdag den 14 juni 2011
  • 128. En vanlig länk med massa olika bokstäver!tisdag den 14 juni 2011
  • 129. En vanlig länk med massa olika bokstäver!tisdag den 14 juni 2011
  • 130. Vad har det här betytt?tisdag den 14 juni 2011
  • 131. Anpassa print- typografin till (standard) webbtypografintisdag den 14 juni 2011
  • 132. tisdag den 14 juni 2011
  • 133. tisdag den 14 juni 2011
  • 134. tisdag den 14 juni 2011
  • 135. tisdag den 14 juni 2011
  • 136. Omvänd processtisdag den 14 juni 2011
  • 137. Bra resurser: blog.typekit.com nicewebtype.tumblr.com trentwalton.com www.linkli.st/1typotisdag den 14 juni 2011
  • 138. Det var det!tisdag den 14 juni 2011
  • 139. Konst & Tekniktisdag den 14 juni 2011
  • 140. Småländsk Antiqua ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxtisdag den 14 juni 2011
  • 141. tisdag den 14 juni 2011
  • 142. tisdag den 14 juni 2011
  • 143. tisdag den 14 juni 2011
  • 144. Sapmi Grotesk ABCDEFGHIJKLM nopqrstuvwxyzåäö 123456790 The quick BROWN foxtisdag den 14 juni 2011
  • 145. Dutopia ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxtisdag den 14 juni 2011
  • 146. SITE Specific 123 hamburgare på dig ABCDEF GHIJKLMNOPQ TEATRON Technotisdag den 14 juni 2011
  • 147. wwwwwwwwww wwwwwwwwww wwWwwwwww.setisdag den 14 juni 2011
  • 148. 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
  • 149. tisdag den 14 juni 2011
  • 150. Tack! haraldpeterstrom.com www.konst-teknik.se www.linkli.st/1typotisdag den 14 juni 2011