Digital typografi @ Beckmans, december 2015
•
1 like•456 views
Presentation med utgångspunkten i digital typografi och formgivning
Recommended
More Related Content
Similar to Digital typografi @ Beckmans, december 2015
Similar to Digital typografi @ Beckmans, december 2015 (20)
Digital typografi @ Beckmans, december 2015
- 4. Innehåll 1. Introduktion 2. Webbens förutsättningar 3. Typsnitt på skärm, igår 4. Typsnitt på skärm, idag 5. Webb vs print 6. Frågor
- 10. HTML — HyperText Markup Language ’är ett märkspråk och webbstandard för strukturering av text, hypertext, media och inbyggda objekt på exempelvis webbsidor och i epostmeddelanden.’
- 11. index.html<!DOCTYPE html> <html> <head> <title>Sidans titel</title> </head> <body> <p> Welcome! </p> <img src=”bild.jpg”> </body> </html>
- 13. CSS — Cascading Style Sheets ’Styr’ typografi och form
- 14. <!DOCTYPE html> <html> <head> <title>Sidans titel</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <p> Welcome! </p> <img src=”bild.jpg”> </body> </html> index.html
- 15. stylesheet.css body { margin: 25px; background-color: green; color: white; font-family: arial, helvetica, sans-serif; font-size: 30px; letter-spacing: 30px; } img { border: 3px solid black; width: 100px; -webkit-transform: rotate(-32deg); }
- 18. Just nu: HTML 5 — Drag and drop — Ljud — Video — SVG — (Webfonts) — med mera
- 19. Flash (1996–) Program från Adobe för att skapa ’Rich Internet Applications’ i (främst) vektorformat
- 21. Förutom Flash — Silverlight — Java — Real audio — Shockwave
- 22. Webbläsare — Chrome — Internet Explorer — Firefox — Opera — Safari — ...
- 23. Operativsystem — Win: 95, 98, Vista ... — OSX: 10.1, 10.2 ... — Linux — iOS — Android — ...
- 24. Upplösningar — Vanlig datorskärm: 72 dpi — iPad pre retina: ca 150 dpi — Retina: 320 dpi — Dagstidning: ca 150 dpi — Bok: 300 dpi
- 25. Kantutjämning
- 27. Hinting
- 29. Hinting — Välgjort i systemtypsnitt — Väldigt tidskrävande och dyrt — I dagsläget nödvändigt — På sikt förhoppningsvis onödigt
- 30. Många variabler... — Olika browsers — Olika operativsystem — Olika ”devices” — Olika uppkopplingar — ...
- 31. ... betyder stora krav på flexibilitet
- 32. 3. Typsnitt på skärm, igår
- 36. PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, Webdings
- 37. Mac OS Baskerville Big Caslon Didot Futura Optima ...
- 38. Core Fonts on the Web 1996 Andale Mono, Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings
- 40. ClearType Font Collection (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbel
- 41. (Tidigare) alternativ till medföljande typsnitt
- 42. Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWW
- 43. Text som bild
- 44. Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–
- 45. SIFR
- 47. Cufon
- 48. 4. Typsnitt på skärm, idag
- 49. Webfonts Standard för att visa typsnitt i webbläsaren
- 50. Format — EOT — TTF / OTF — SVG — WOFF
- 51. Sedan sommaren 2011 — EOT — TTF / OTF — SVG — WOFF
- 52. Enorm utveckling Typsnitten behöver inte längre vara installerade i besökarens dator
- 53. ‘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 specifically for a new medium.’ Stephen Coles
- 54. Fördelar med text — enkelt att formatera — är sökbart — kan översättas — kan läsas av ’högläsningsprogram’ — utskriftsbart — är skalbart — öppet för tredjepartsprogram
- 56. Vanligtvis Köper typsnitt (online), laddar ner, installerar i datorn.
- 57. Webbtypsnitt (Prenumererar på) eller laddar upp på egen server
- 59. stylesheet.css @font-face { font-family: 'Plantin Light'; src: url(‘plantin.woff') format('woff'); } .serif { font-family: 'Plantin Light', ‘times’; text-rendering: optimizeLegibility; } .sans-serif { font-family: 'AntennaComp', helvetica, arial; }
- 62. Under utveckling — Kerning — Ligaturer — Kapitäler och specialtecken — Opentype-stöd — Flera språkgrupper i samma typsnitt
- 64. Exempel
- 78. 5. Webb vs Print
- 79. Förutsättningarna har aldrig varit bättre
- 80. Skillnader — Inga fasta format — Mindre kontroll över rendering — Större krav på flexibilitet
- 82. Konsekvens — Typgrad bör justeras mot format — Inte optimalt med fast spaltbredd — Meningslöst att justera radfall — Bör inte bryta rader inom stycken — Ingen manuell avstavning — Problematisk att linjera spalter
- 83. Olika rendering
- 84. Konsekvens — Upplevelsen kommer skilja sig åt — Man måste titta på flera ”provtryck” — Typsnitt som används i små grader måste vara välhintade
- 86. Konsekvens — Typografin måste klara av ett dynamiskt innehåll — Man bör skissa ut flera olika scenarier i förväg
- 91. Konsekvens — Går att arbeta med mer ”intelligent” typografi — Utnyttja mediets fördelar — Finns massor att göra som ingen annan gjort!
- 92. Frågor?