Webbtypografi SU Nov 2010 - del 2

Digital typografi
(och design)
Del 2
Harald Peter Ström
peter@konst-teknik.se
onsdag 19 oktober 11

November 23
— Repetiton senaste gång
— Fördjupning i webb-
typografi; Webfonts
— Exempel
(egna och andras)
— Eventuellt video

Alla länkar och
referenser:
http://linkli.st/1typo


Kort repetition av
förra veckan


Standards


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

HTML 5
CSS 3
Båda under utveckling


Typografi på webben


Det har ’alltid’ gått att visa
typsnitt på webben, men
besökaren har behövt ha
typsnittet installerat i sin
dator


Baskerville
Big Caslon
Didot
Futura ...
Andale Mono, Arial, Comic
Sans, Courier New, Georgia,
Impact, Times New Roman ...

Gemensam nämnare:

Arial, Courier, Times,
Verdana, Georgia


Bilder
SIFR, Cufon


Slut på repetition


2009/10
Webfonts


Webfonts:
Standard för att visa
typsnitt på webben


WOFF
Web Open Font Format


Enorm utveckling:
Typsnitten behövs inte i
datorn hos besökaren


‘It’s finally happening’
Chris Lilley, W3C
imprint.printmag.com/design-thinking/the-future-
of-web-fonts-is-sooner-than-it-used-to-be


På tiden!


— Firefox 3.6: jan 2010
— Safari: sommaren 2010
— IE 9 beta: sept 15 2010
— Chrome 5.0:
sommaren 2010
— iOS: Sedan tidig höst


Webfonts
— Typsnitten ligger på
leverantörens server,
laddas in vid ned-
laddning
— Betalning som pre-
numeration
— Krypterat: JavaScript

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


EOT, TTF/OTF, SVG
WOFF


@font-face


Typsnittsleverantö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 enkelt är 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

Under utveckling


Webfonts
— OpenType-stöd
Ligaturer, kapitäler etc


CSS / HTML
— Kerning
— Avstavning
— Spalter


⤺ När det där fungerar, ⤺
då kommer vi äntligen
ha samma typografiska
förutsättningar på
webben som tidigare
endast existerat i tryck

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

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


Att designa
(typografiskt)
för webben
Exempel


Nya konstochteknik.se


Skönt att det där
är över!!!!!!!!


Exempel!


(Browser)


Eventuellt;
Tim Brown —
More Perfect Typography


Frågor?


FREE KEVIN
December 5
@ Rutger
Fuchsgatan 9
12:00–24:00
freekevin.info

Webbtypografi SU Nov 2010 - del 2

Recommended

Recommended

More Related Content

Featured

Featured (20)

Webbtypografi SU Nov 2010 - del 2