Webbtypografi SU Nov 2010 - del 1

Webbtypografi
och digital design
Harald Peter Ström
peter@konstochteknik.se
Grafisk designer
Konst & Teknik
onsdag 19 oktober 11

November 16
— Introduktion
— Att designa för webben
— Webbtypografi;
historia och teknik
— Frågor


November 23
— Fördjupning i webb-
typografi; webfonts etc
— En massa exempel i
browser (egna och
andras)
— Framtiden...

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


Ställ gärna frågor!


Bakgrund


1995:

16 år

Harald.net med
Martin Ström


(kom.och.pussa)
peter.nu


Första egna typsnitten...

ABCDEFGHIJKLM
nopqrstuvwxyz

The quick bron fox

Speedway
(Digital Army)


Mattias Jakobsson

Barmeno


Abel & Baker Sthlm
↓
Abel & Baker Gbg
↓
’Frilans’ Berlin


Gerrit Rietveld
Academie


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
–2006–
Grafisk design etc


50% web
50% print


Web
(K&T&M)


Print + Web


BACDE
FGHIJK

Andperseand (publishing)
Show & Tell
CopyPasteCharacter.com
linkli.st


Rutger Fuchsgatan 9

FREE KEVIN is an ongoing and roving screening series from a collection FREE KEVIN
of 15.4 GB of downloaded lms and documentaries depicting hackers 28.11.2010
and related computer culture from the 1980s-2000s. A range of material
including blockbuster lms, educational television programming, CURATED BY PIRATETURK
and documentaries produced within the hacking community will be ORGANIZED BY LAUREL PTAK AND KONST & TEKNIK
presented in various cities worldwide over the next year in order to HOSTED BY KONST & TEKNIK
stimulate dialogue around issues of intellectual property and open
culture.
The title FREE KEVIN is an appropriated slogan that was originally
used by the hacker community in the 1990s to protest the arrest of
Kevin Mitnick, a legendary hacker who at the time was the most wanted
computer criminal in United States history. Mitnick’s story is of interest
(and depicted in several lms in the screening series) for its fascinating
particularities concerning hacker culture, intellectual property, and
media representation historically, but at the same time it also functions
as a contemporary symbol. If anything, the struggle over intellectual
property has only intensi ed in the last decade and FREE KEVIN can be
read as the embodiment of resistance in an ongoing struggle for rights
and freedoms from corporate and state control in an information age
and economy.
The project also serves as a re-imagining of the role of
the curatorial inside network culture where information is often
freely, widely and anonymously distributed. All the lms, videos,
documentaries to be screened as part of FREE KEVIN were compiled
and distributed via peer-to-peer torrent sharing technologies. They
originate from one collection found online, assembled and distributed by
an anonymous Pirate Bay user known only as “pirateturk”. This person
is credited as the screening series’ curator, though they are not in any ALL FILMS ARE STREAMED TO PORTABLE COMPUTERS (LAPTOPS,
way directly involved with the event. IPAD, IPHONE, ETC) — BRING YOUR OWN DEVICE AND HEADPHONES
A set of publication will accompany the screening in order to AND HANG OUT IN A CORNER WITH YOUR FILM OF CHOICE!
contextualize and complicate the ideas at stake concerning intellectual
property and the hacker as cultural and criminal gure. A PDF of the
catalogue, research notes, documentation, bibliography, and a DIY
FREE KEVIN kit (to enable others to create their own screenings) will
eventually be released as a torrent le on Pirate Bay and the entire
project will continue to be updated at www.freekevin.info.


Typsnitt & språk


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 Speciﬁc
123 hamburgare på dig

ABCDEF
GHIJKLMNOPQ

TEATRON Techno

wwwwwwwwww
wwwwwwwwww
wwWwwwwww.se


this-domain-name-uses-
the-maximum-amount-of-
characters-possible.com


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


Del 1
Slut


Del 2
(Typografisk)
design på webben


Idag
1. Att designa för webben
Webbsidors struktur
2. Webbtypografihistoria
Typsnitt på nätet
Att tänka på

Säg till om det blir
för o/tekniskt


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
=
Cascading Style Sheets
’Styr’ typografi och form
av sidor från (oftast)
samma fil(er)

— Bild: position av CSS
— Typografi: CSS
— Formelement: CSS
— ’Multimedia’: Ofta flash,
i framtiden layout
via CSS?


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

<body>

! <p>
! Welcome!
! </p>

! <img src=”bild.jpg”>

</body>
</html>


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

<body>

! <p>
! Welcome!
! </p>

! <img src=”bild.jpg”>

</body>
</html>


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


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


Hur skapar
man webbsidor?


Kod
Fördel:
Total kontroll
Nackdel:
Behöver kunna
programmera

WYSIWYG
Fördel:
Inte programmera
Nackdelar:
Dålig kod, svårt att
påverka

CMS
Wordpress, Indexhibit,
Drupal, Episerver etc
Fördelar: blir rätt, enkelt
Nackdel: Utan hjälp blir
det som allt annat...

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


Flash, fördelar:
— Ej programmera
— Vektorgrafik
— Multimedia
— Interaktivt


Flash, nackdelar:
— Stängt/ej öppen
standard
— Plugin/fungerar inte
överallt
— På väg bort?

Flash
Framtiden?


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


Annat att tänka på...
Olika browsers
Olika operativsystem
Mobiltelefoner
...


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

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

Andra faktorer
(inte så aktuella längre)
— Uppkopplingshastighet
(bredband, 4G, 3G, 2G,
brandväggar)
— Skärmstorlek
— Upplösning
— Färgdjup

Vilka browsers stödjer
vilken CSS-version?


Tänk på sammanhanget


Del 2
Slut


Del 3
Typografisk design
för webben


Historia


HyperText:
November 12, 1990


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,


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


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


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


stylesheets.css

body {
! font-family: Calibri, ‘Trebuchet MS’, Futura,
Arial, Helvetica, Sans-serif;
! }


Alternativ


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
— Dålig typografisk koll
— 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

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


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

Alternativ 4:
Webfonts
2009/2010
Mer om det nästa vecka

Del 3
Slut


’Vad kommer hända med
yrket webbdesigner när så
mycket nytt görs med
exempelvis Wordpress-
templates? Kommer
webbdesignern göra
någonting från scratch
längre?’

37 Signals


Behöver man som
webbdesigner kunna
programmera?


Nobile


typography.css
.courier {
! ! font-family: 'courier new', courier;
! ! letter-spacing: 0px;
! ! line-height: 18px;
! ! font-size: 14px;
! ! text-align: left;
! ! text-indent: 0em;
! ! margin: 0;
! ! text-align: left;
! ! }


Omvänd process


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


Webbtypografi SU Nov 2010 - del 1

Recommended

Recommended

More Related Content

Featured

Featured (20)

Webbtypografi SU Nov 2010 - del 1