Stockholms Universitet — 8 nov 2011

Webbtypografi
& (digital) design
Peter Ström
Konst & Teknik

tisdag 8 november 11

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


1. Introduktion


1995:


pi.se
↓
Speedway
↓
Abel & Baker


Mattias Jakobsson


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,
Amsterdam


Konst & Teknik


Småländsk Antiqua


Sapmi Grotesk


Dutopia


Gin Sans

ABCDEFGHIJKLM
nopqrstuvwxyzåäö
1234567890
The quick dutopian fox

Die Schrift unserer Zeit Konst & Teknik 2009


wwwwwwwwww
wwwwwwwwww
wwWwwwwww.se


2. Webbsidans struktur


En (modern)
webbsidas struktur


1

3

2 4


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.’

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


<!DOCTYPE html>
<html>
index.html
<head>
! ! <title>Sidans titel</title>
</head>

<body>

! 
! Welcome!
! 

! <img src=”bild.jpg”>

</body>
</html>

<!DOCTYPE html>
<html>
index.html
<head>
! ! <link rel="stylesheet" href="stylesheet.css">
</head>

<body>

! 
! Welcome!
! 

! <img src=”bild.jpg”>

</body>
</html>

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);
! }


Standarder:
CSS, HTML


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


HTML standarder
— HTML 1: 1990
— HTML 2–4: 1995–1998
— HTML 5: under
utveckling...


HTML 5
— Drag and drop
— Ljud
— Video
— SVG
— (Webfonts)
— med mera

HTML 5
CSS 3
Båda under utveckling


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


Shockwave
Silverlight
Real Audio
...


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

T ex:
Olika språk

Formulär


Webbläsare
— Chrome
— Internet Explorer
— Firefox
— Opera
— Safari
— ...

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

Att tänka på
— Olika browsers
— Olika operativsystem
— Mobiltelefoner
— Uppkopplingar
— ...


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

3. Typografi på webben


Webbtypsnittshistoria


HyperText:
November 12, 1990


Tidigare: Användaren har
behövt typsnitten
installerade i sin dator


PC Windows 95

Arial, Courier, Modern, MS
Serif, MS Sans Serif, Smallfonts,
Symbol, Times New Roman,



Mac OS
Baskerville
Big Caslon
Didot
Futura
Optima
...

Arial
1992


Courier New
1955 (1992)


Times (New Roman)
1931 (1992)


Arial
Courier New
Times New Roman


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

Georgia
ABCDEFGHIJKL
mnopqrstuvwxyz

Verdana
ABCDEFGHIJKL
mnopqrstuvwxyz


1996–2009...
Arial
Courier New
Times New Roman
Georgia
Verdana

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–

Alternativ 3:
Cufon
2008–2009


Cufon


Kantutjämning


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


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

Mobiltelefoner
— iPad/iPhone
— Android
— Windows Mobile
— Etc...


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

Typsnitt Android
Droid Sans
Droid Sans Mono
Droid Serif
Roboto (okt 2011)


Webbläsarna i
Android & iOS
bygger på Webkit


4. Webfonts / @font-face


Webfonts / @font-face
Standard för att visa
typsnitt i webbläsaren


WOFF
Web Open Font Format
2009–


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

EOT, TTF/OTF, SVG
WOFF
Sedan sommaren 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’
Submission

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


‘It’s finally happening’
Chris Lilley, W3C


‘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 Coles

På tiden!!!


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


Webbtypsnitt
Prenumererar på
eller laddar upp
på egen server


@font-face


@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 6

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


— 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)

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/


Att använda webfonts


<!DOCTYPE html>

<html>
index.html
<head>
! ! <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>

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;
! }


Typografi på nätet:
I framtiden...


CSS / HTML
— Kerning
— Avstavning
— Spalter
— Rotation av text,
bakgrundsbilder i text
— mm

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

Innebär
— Fler tecken...
— Automatiska ligaturer
— Kapitäler
— Massa $ℙℇci⟑lt ℂKℰn
— Flera språk i samma
typsnitt

⤺ 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
trycksaker

5. Exempel


Länkar och referenser:
www.linkli.st/1typo


Tack!
www.konstochteknik.se
@haraldpeter
www.haraldpeterstrom.com


Stockholms Universitet — 8 nov 2011

Recommended

Recommended

More Related Content

Featured

Featured (20)

Stockholms Universitet — 8 nov 2011