Webbtypografi; Södertörns Högskola

Webbtypografi
Peter Ström
Grafisk designer
Konst & Teknik

tisdag den 14 juni 2011

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

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


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


Del 1
En webbsidas struktur


HTML


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

En (modern)
webbsidas struktur
— Bild
— Text / typografi
— ’Multimedia’
— Designelement

1

3

2 4


CSS


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

Standards:
CSS, HTML mm


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


HTML-standards
— HTML 1: 1990
— HTML 2–4: 1995–1998
— HTML 5: in progress...


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


Shockwave
Silverlight
Real Audio
...


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

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

T ex:
Olika språk

Formulär


Browsers
— Chrome
— Internet Explorer
— Firefox
— Opera
— Safari
— ...

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

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

HTML 5
CSS 3
Båda under utveckling


Del 2
Typografi på webben


Webbtypsnittshistoria
(!)


HyperText:
November 12, 1990


Det har ’alltid’ gått att visa
typsnitt på webben, men
användaren har behövt ha
typsnittet installerat 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


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


ClearType
(Windows Vista)
2007
Calibri, Cambria,
Candara, Consolas,
Constantia, Corbel


Typografi är mer än bara
typsnittsval...


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

Det kommer aldrig bli exakt
likadant överallt;
designern / typografen har
inte full kontroll


Alternativ till de
medföljande typsnitten


Alternativ 1:
Göra bilder av text
(.png, .gif, .jpg)
Fungerat sedan
bilder på WWW

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

Alternativ 2:
SIFR
Scalable Inman
Flash Replacement
ca 2003–

SIFR
Fördelar:
— Sökbart
— Typografisk kontroll
— Kopierbar text
— Skalbart
— Licenciering av typsnitt
— Dynamisk inmatning

SIFR
Nackdelar:
— Kräver Flash
— Fungerar inte på iOS etc
— ’Svårjobbat/fult’

Alternativ 3:
Cufon
ca 2008–


Cufon
Fördelar:
— ’Typ’ markerbart
— CSS-kopplat
— Bra kantutjämning


Cufon
Nackdelar:
— Bara typ markerbart
— Inte alltid lagligt
— Kräver Javascript
— Börjar avvecklas...

Alternativ 4:
Webfonts
(@font-face)
2009/10–


Del 3
Webfonts
Standard för att visa
typsnitt på webben


WOFF
Web Open Font Format
2009–


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

EOT, TTF/OTF, SVG
WOFF
Hösten 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, höst 2011


Några
webbtypsnitts-
distributörer


— Utvecklingen sker i takt
med standarden (W3C)
— Men många satsar på
work arounds/ful-
lösningar 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/


Såhär funkar det


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


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


Vilket ska man välja?


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

Typografi på nätet:
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⟑☙t ℂKℰn
— Flera språk i samma
typsnitt

⤺ 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ärlden

Webb-plugins för
typografisk kontroll
— letteringjs.com
— kernjs.com
— fittextjs.com


Några exempel


Del 4
Blandat


Att tänka på


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

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


iPad/iPhone
Android
(Samsung Galaxy etc)


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

Typsnitt Android
Droid Sans
Droid Sans Mono
Droid Serif


Android & iOS
bygger båda
på Webkit


— Retina: 320 dpi
— iPad: ca 150 dpi
— Vanlig laptop: 72 dpi
— Dagstidning: ca 150 dpi
— Bok: 300< dpi


Nya användningssätt
— Symboler
ist för
text


En vanlig länk
med massa olika
bokstäver!


Vad har det här betytt?


Anpassa print-
typografin till
(standard)
webbtypografin


Omvänd process


Bra resurser:
blog.typekit.com
nicewebtype.tumblr.com
trentwalton.com
www.linkli.st/1typo

Det var det!


Konst & Teknik


Småländsk Antiqua
ABCDEFGHIJKLM
nopqrstuvwxyzåäö
1234567890
The quick brown fox

Sapmi Grotesk
ABCDEFGHIJKLM
nopqrstuvwxyzåäö
123456790

The quick BROWN fox

Dutopia
ABCDEFGHIJKLM
nopqrstuvwxyzåäö
1234567890

The quick brown fox

SITE Specific
123 hamburgare på dig
ABCDEF
GHIJKLMNOPQ

TEATRON Techno

wwwwwwwwww
wwwwwwwwww
wwWwwwwww.se


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 2009


Tack!
haraldpeterstrom.com
www.konst-teknik.se
www.linkli.st/1typo


Webbtypografi; Södertörns Högskola

Recommended

Recommended

More Related Content

Featured

Featured (20)

Webbtypografi; Södertörns Högskola