Digital typografi @ Beckmans, december 2015

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

www.konstochteknik.se

http://www.konstochteknik.se

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

http://imprint.printmag.com/design-thinking/the-future-of-web-fonts-is-sooner-than-it-used-to-be/

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

http://www.slideshare.net/haraldpeter

http://www.konst-teknik.se

http://www.haraldpeterstrom.com

Education

Digital typografi @ Beckmans, december 2015