Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Hej!
Peter Ström @haraldpeter
Webbtypografi
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
1. Introduktion
Konst & Teknik
Konst & Teknik
2. Webbens förutsättningar
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.’
index.html <!DOCTYPE html> <html><head>
<title>Sidans titel</title></head>
<body>
<p> Welcome! </p>
<img src=”bild.jpg”>
</body> </html>
CSS — Cascading Style Sheets ’Styr’ typografi och form
<!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
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); }
Standarder: CSS, HTML
Just nu: HTML 5
— Drag and drop — Ljud — Video — SVG — (Webfonts) — med mera
Flash (1996–)
Program från Adobe för att skapa ’Rich Internet Applications’
i (främst) vektorformat
Förutom Flash
— Silverlight — Java — Real audio — Shockwave
Webbläsare
— Chrome — Internet Explorer — Firefox — Opera — Safari — ...
Operativsystem
— Win: 95, 98, Vista ... — OSX: 10.1, 10.2 ... — Linux — iOS — Android — ...
Upplösningar
— Vanlig datorskärm: 72 dpi — iPad pre retina: ca 150 dpi — Retina: 320 dpi — Dagstidning: ca 150 dpi — Bok: 300 dpi
Kantutjämning
Hinting
Hinting
— Välgjort i systemtypsnitt — Väldigt tidskrävande och dyrt — I dagsläget nödvändigt
— På sikt förhoppningsvis onödigt
Många variabler...
— Olika browsers — Olika operativsystem — Olika ”devices” — Olika uppkopplingar — ...
... betyder stora krav på flexibilitet
3. Typsnitt på skärm, igår
HyperText: November 12, 1990
PC Windows 95
Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts,
Symbol, Times New Roman,
Webdings
Mac OS
Baskerville Big Caslon
DidotFutura Optima ...
Core Fonts on the Web 1996
Andale Mono, Arial, Comic Sans,
Courier New, Georgia, Impact, Times New Roman, Trebuchet MS,
Verdana, Webdings
Georgia ABCDEFGHIJKL mnopqrstuvwxyz
Verdana ABCDEFGHIJKL
mnopqrstuvwxyz
ClearType Font Collection (Windows Vista)
2007
Calibri, Cambria, Candara, Consolas, Constantia, Corbel
(Tidigare) alternativ till medföljande typsnitt
Alternativ 1:
Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWW
Text som bild
Alternativ 2:
SIFR Scalable Inman
Flash Replacement ca 2003–
SIFR
Alternativ 3:
Cufon
2008–2009
Cufon
4. Typsnitt på skärm, idag
Webfonts
Standard för att visa typsnitt i webbläsaren
Format — EOT — TTF / OTF — SVG — WOFF
Sedan sommaren 2011 — EOT — TTF / OTF — SVG — WOFF
Enorm utveckling
Typsnitten behöver inte längre vara installerade i besökarens dator
‘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
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
Att använda webbtypsnitt
Vanligtvis
Köper typsnitt (online), laddar ner, installerar i datorn.
Webbtypsnitt
(Prenumererar på) eller laddar upp på egen server
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;
}
Under utveckling
— Kerning — Ligaturer — Kapitäler och specialtecken — Opentype-stöd — Flera språkgrupper i samma typsnitt
Exempel
5. Webb vs Print
Förutsättningarna har aldrig varit bättre
Skillnader
— Inga fasta format
— Mindre kontroll över rendering
— Större krav på flexibilitet
Inga fasta format
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
Olika rendering
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
Krav på flexibilitet
Konsekvens
— Typografin måste klara av ett dynamiskt innehåll
— Man bör skissa ut flera olika scenarier i förväg
Fler tekniska möjligheter
Konsekvens
— Går att arbeta med mer ”intelligent” typografi
— Utnyttja mediets fördelar — Finns massor att göra som ingen annan gjort!
Frågor?
Tack! slideshare.net/haraldpeter
www.konstochteknik.se www.haraldpeterstrom.com
Related Documents
