Webbtypografi SU Nov 2010 - del 1

onsdag 19 oktober 11

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

November 16 — Introduktion — Att designa för webben — Webbtypografi; historia och teknik — Frågoronsdag 19 oktober 11

November 23 — Fördjupning i webbtypografi; webfonts etc — En massa exempel i browser (egna och andras) — Framtiden...onsdag 19 oktober 11

Länkar och referenser: http://linkli.st/1typoonsdag 19 oktober 11

Ställ gärna frågor!onsdag 19 oktober 11

Bakgrundonsdag 19 oktober 11

1995: 16 åronsdag 19 oktober 11

Harald.net med Martin Strömonsdag 19 oktober 11

(kom.och.pussa) peter.nuonsdag 19 oktober 11

pi.seonsdag 19 oktober 11

Första egna typsnitten... ABCDEFGHIJKLM nopqrstuvwxyz The quick bron foxonsdag 19 oktober 11

Speedway (Digital Army)onsdag 19 oktober 11

Mattias Jakobsson Barmenoonsdag 19 oktober 11

Abel & Baker Sthlm ↓ Abel & Baker Gbg ↓ ’Frilans’ Berlinonsdag 19 oktober 11

Gerrit Rietveld Academieonsdag 19 oktober 11

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, Amsterdamonsdag 19 oktober 11

Konst & Teknik –2006– Grafisk design etconsdag 19 oktober 11

50% web 50% printonsdag 19 oktober 11

Printonsdag 19 oktober 11

Web (K&T&M)onsdag 19 oktober 11

Print + Webonsdag 19 oktober 11

BACDE FGHIJKonsdag 19 oktober 11

Andperseand (publishing) Show & Tell CopyPasteCharacter.com linkli.stonsdag 19 oktober 11

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.onsdag 19 oktober 11

Typsnitt & språkonsdag 19 oktober 11

Småländsk Antiqua ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxonsdag 19 oktober 11

Sapmi Grotesk ABCDEFGHIJKLM nopqrstuvwxyzåäö 123456790 The quick BROWN foxonsdag 19 oktober 11

Dutopia ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxonsdag 19 oktober 11

SITE Speciﬁc 123 hamburgare på dig ABCDEF GHIJKLMNOPQ TEATRON Technoonsdag 19 oktober 11

wwwwwwwwww wwwwwwwwww wwWwwwwww.seonsdag 19 oktober 11

this-domain-name-uses- the-maximum-amount-of- characters-possible.comonsdag 19 oktober 11

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 2009onsdag 19 oktober 11

Del 1 Slutonsdag 19 oktober 11

Del 2 (Typografisk) design på webbenonsdag 19 oktober 11

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

Säg till om det blir för o/teknisktonsdag 19 oktober 11

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.’onsdag 19 oktober 11

En (modern) webbsidas struktur — Bild — Text / typografi — ’Multimedia’ — Designelementonsdag 19 oktober 11

1 3 2 4onsdag 19 oktober 11

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

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

<!DOCTYPE html> <html> index.html <head> ! ! <title>Sidans titel</title> </head> <body> ! <p> ! Welcome! ! </p> ! <img src=”bild.jpg”> </body> </html>onsdag 19 oktober 11

<!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>onsdag 19 oktober 11

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); ! }onsdag 19 oktober 11

Standards: CSS, HTML mmonsdag 19 oktober 11

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

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

Hur skapar man webbsidor?onsdag 19 oktober 11

Kod Fördel: Total kontroll Nackdel: Behöver kunna programmeraonsdag 19 oktober 11

WYSIWYG Fördel: Inte programmera Nackdelar: Dålig kod, svårt att påverkaonsdag 19 oktober 11

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

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

Flash, fördelar: — Ej programmera — Vektorgrafik — Multimedia — Interaktivtonsdag 19 oktober 11

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

Flash Framtiden?onsdag 19 oktober 11

Shockwave Silverlight Real Audio ...onsdag 19 oktober 11

HTML 5 — SVG — Drag and drop — Ljud — Video — (Webfonts) — med meraonsdag 19 oktober 11

SVGonsdag 19 oktober 11

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

T ex: Olika språk Formuläronsdag 19 oktober 11

Annat att tänka på... Olika browsers Olika operativsystem Mobiltelefoner ...onsdag 19 oktober 11

Browsers — Chrome — Internet Explorer — Firefox — Opera — Safari — ...onsdag 19 oktober 11

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

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

Vilka browsers stödjer vilken CSS-version?onsdag 19 oktober 11

Tänk på sammanhangetonsdag 19 oktober 11

Del 3 Typografisk design för webbenonsdag 19 oktober 11

Historiaonsdag 19 oktober 11

HyperText: November 12, 1990onsdag 19 oktober 11

PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, onsdag 19 oktober 11

Mac OS Baskerville Big Caslon Didot Futura Optima ...onsdag 19 oktober 11

Arial 1992onsdag 19 oktober 11

Courier New 1955 (1992)onsdag 19 oktober 11

Times (New Roman) 1931 (1992)onsdag 19 oktober 11

Arial Courier New Times New Romanonsdag 19 oktober 11

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

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

ClearType (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbelonsdag 19 oktober 11

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

stylesheets.css body { ! font-family: Calibri, ‘Trebuchet MS’, Futura, Arial, Helvetica, Sans-serif; ! }onsdag 19 oktober 11

Alternativonsdag 19 oktober 11

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

Text som bild Nackdelar: — Ej sökbart — Svårt för t ex blinda — Tidskrävande — Dålig typografisk koll — Går inte att kopieraonsdag 19 oktober 11

Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–onsdag 19 oktober 11

SIFR Fördelar: — Sökbart — Typografisk kontroll — Kopierbar text — Skalbart — Licenciering av typsnittonsdag 19 oktober 11

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

Alternativ 3: Cufon ca 2008–onsdag 19 oktober 11

Cufon Fördelar: — Typ markerbart — CSS-kopplatonsdag 19 oktober 11

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

Alternativ 4: Webfonts 2009/2010 Mer om det nästa veckaonsdag 19 oktober 11

Del 4onsdag 19 oktober 11

’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?’onsdag 19 oktober 11

37 Signalsonsdag 19 oktober 11

Behöver man som webbdesigner kunna programmera?onsdag 19 oktober 11

nJaonsdag 19 oktober 11

Nobileonsdag 19 oktober 11

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; ! ! }onsdag 19 oktober 11

Omvänd processonsdag 19 oktober 11

www.linkli.st/1typo haraldpeterstrom.com www.konst-teknik.seonsdag 19 oktober 11

Webbtypografi SU Nov 2010 - del 1

by Harald Peter Ström on Oct 19, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Webbtypografi SU Nov 2010 - del 1 — Presentation Transcript