Grundlæggende Webdesign – typografi på nettet

1. Grundlæggende Webdesign – typografi på nettet Bjarne Sandstrøm IT-højskolen 19.9.2002

2. Plan for i dag • Evt. spørgsmål om den forestående opgave (?) • Muligheder for typografi på nettet • i ‘brødtekst’ (Lynch & Horton) • med HTML • med CSS • som display-tekst (i grafik: Siegel) • Skriftens grafiske elementer • Skriftens udvikling i overblik

3. HTML og tekst • HTML som tekstmedium • forskel mellem ‘tekst’ og ‘skrift’ (dvs. mellem teksten som ‘indhold’ og teksten som ‘billede’) • HTML skal vise ‘tekst’, ikke ‘typografi’ • Tekst visualiseres ved brug af fonte, der er installeret på brugerens computer • Brugerens browser-opsætning afgør den viste websides typografi

4. Browserindstillinger for skrift Funktioner / Internetindstillinger… / Skrifttyper Vis / Tekststørrelse

5. Computerens to skrifttraditioner • Fra skrivemaskine (og DOS-skærm) • de monospatiale skrifter, hvor alle bogstaver er lige bredde • fx Courier New, Monospaced, Lucida Console • Fra bogtryk • de individuelt spatierede skrifter, hvor hvert bogstav har sin individuelle bredde • Times (New Roman), Arial, Palatino osv.

6. Monospatiering og variabel spatiering

7. Skrifter på brugers computer

8. Font substitution Font substitution i Dreamweavers tekstmenu med tilhørende html-kode for to grundtyper

9. Eksempel på serif type ‘Times New Roman’ Eksempel på sans serif type ‘Arial’ Skriftens grundtyper Hdxp Hdxp • Serif skrifter stammer historisk fra ANTIKVA-traditionen • Sans serif stammer historisk fra GROTESK- traditionen

10. Vore alfabeter Majuskeltal: Minuskeltal De fire standard-skriftsnit: normal, kursiv, fed, fed-kursiv

11. KURSIV : italic eller oblique Serif :kursiv / italic Sans-serif :kursiv / oblique Bemærk henholdsvis forskel og lighed mellem a, f, g og k. Seriffens kursiv bevarer forbindelsen tilbage til håndskriften.

12. Fonten har flere tegn end tastaturet Der er forskel på bindestreg - og tankestreg – tankestreg / en-dash: Alt+0150 Der er forskel på tommetegn " og typografiske citationstegn, som findes i flere sæt: I dansk typografisk tradition kaldes de 99/66 : „ “nummerisk hedder deAlt+0132 / Alt+0147 [med fx Verdana erstat 147 med 148] Man bruger også de såkaldte korporalvinkler, også kaldet franske anførselstegn: » «Alt+0187 / Alt+0171 Tegnets nummeriske værdi

13. Bogstavernes proportioner 1. Versalhøjde 2. Overlængde 3. X-højde 4. Underlængde 5. Grundlinje

14. Hvad er et bogstavs højde? Typerne til venstre har alle samme højde i typografiske punkter (1 punkt = 0,37593 mm), men punkt-størrelsen afgøres ikke af det trykte bogstavs egen højde, men af højden på den blyklods, der ‘bærer’ bogstavet.

15. Skriftens tone skifter med proportioneringen • Verdana: Letterforms have tone, timbre, character, just as words and sentences do. The moment a text and a type face are chosen, two streams of thought, two rhythm • Arial: Letterforms have tone, timbre, character, just as words and sentences do. The moment a text and a type face are chosen, two streams of thought, • Helvetica: Letterforms have tone, timbre, character, just as words and sentences do. The moment a text and a type face are chosen, two streams of thought,

16. Skriftens tone... • Georgia: Letterforms have tone, timbre, character, just as words and sentences do. The moment a text and a type face are chosen, two streams of thought, • Times New Roman: Letterforms have tone, timbre, character, just as words and sentences do. The moment a text and a type face are chosen, two streams of thought, • Century Schoolbook: Letterforms have tone, timbre, character, just as words and sentences do. The moment a text and a type face are chosen, two streams of thought, two rhythmical systems,

17. Gode grunde til at bruge CSS • Cascading Style Sheets gør arbejdsprocessen lettere og hurtigere; • Cascading Style Sheets sikrer, at webstedets typografiske formatering bliver konsistent; • Cascading Style Sheets skaber en enklere kode, som hurtigere fortolkes af browseren; • Cascading Style Sheets giver muligheder for styring af den typografiske layout, som ikke findes i HTML

18. Dreamweavers CSS Type menu

19. Dreamweavers CSS Block menu

20. Tekstblokkens placering • Klummens bredde: trykt tekst ikke over 65 tegn, på skærm mindre (undgå <align justify> i smal spalte!) • Afsnit/paragraf: HTML sætter som standard en tom linje med <P>. <BR> sætter – mere typografisk - kun ’ny linje’. • Hertil kræves indrykning i afsnittets første linje. • standard er geviert/ems (em-space) • indrykningen sættes normalt til skrifthøjde/ skydning (leading), så ’luften’ mellem linjer og venstre kant-indrykning er kvadratisk.

21. Linjeafstand / Skydning (Leading) • I tekstbehandling er linjeafstand et relativt begreb: • (fontstørrelsen i pt + 20%) × linjeafstand (fx 1,3) • Med ccs kan man på typografisk vis definere sin skydning (leading) • sæt den til mindst 130% af størrelsen af brødteksten (ved bred spalte gerne større) • hvor skriftstørrelsen øges (fx i overskrifter) skal skydningen dog relativt aftrappes (to linjer i en overskrift skal opleves som sammenhørende)

22. ”Enhver er sig selv nærmest”

23. Markeringer • Typografiens æstetiske ideal er, at en tekstklumme virker som en egal sammenhørende enhed • derfor undgår man så vidt muligt markeringer • det vildeste man tillader sig er kursivering • Typografi på nettet lægger mere vægt på at markere tekstens pointer men • kursiv, fed, understreg (fra skrivemaskinen), farve, baggrundsfarve, font, der skiller sig ud • ikke forbudt, men pas på!

24. Knibning / kerning i PhotoShop 6 knibning/kerning (bogstavpar) knibning/spacing (flere bogstaver) Window/Character-paletten

25. Marshall McLuhan’s synspunkt • “Vi lever i en post-gutenbergsk æra” • dvs. at vi historisk har bevæget os fra skrift over typografi tilbage til skrift, som er frigjort af de trykte medier • Se fx Jeff Bridges’ homepage • http://www.jeffbridges.com

26. Håndskriftens status • Efter bogtrykkets opfindelse trak håndskriften sig bort fra offentlighedens og mangfoldiggørelsens zone. • Ved skrivemaskinens fremkomst trak håndskriften sig tilbage til intimzonen (det personlige brev, kæreste-brevet). • Ved e-mailens fremkomst synes type-skriften at have sejret helt. Håndskriften bruges kun til det flygtige notat. • Sådan ser det i hvert fald ud!

27. Håndskriftens status • Med digitaliseringen er en række skriftformer, der simulerer den ekspressive skrift væltet frem. • Skriften som billede • ekspressiv • peger på sig selv • Skriften som type • anonym • formidler • Skriften på vej til at forvandle sig til billed • logoet

28. Bogtryk mellem skrift og type • Den kalligrafiske tradition • fra den håndskrevne bog (den sakrale bog) • til den gutenbergske tradition • fra det håndskrevne kancelli-dokument (det verdsligt-administrative dokument) • til den italienske tradition • Den vertikale ‘type’ versus den horisontale ‘skrift’

29. Gutenbergs Bibel Udsnit af Gutenbergs Bibel fra 1452-56, den første trykte bog i den vestlige verden, kun trykt i et oplag på små 200 eksemplarer. Typerne står meget lodret og har meget få kurver. De er mere tegnede end skrevne, og er forsøg på at efterligne den kalligrafiske tradition i tiden. Typen kaldes ofte ‘gotisk’.

30. Den håndskrevne tradition Gutenbergs bestræbelse på at følge de håndskrevne/-tegnede typer viser sig især i, at han udformede særlige typer for skrivernes måde at sammenskrive to bogstaver på (de såkaldte ligaturer). Derfor opererer Gutenberg ikke kun med godt et halvt hundrede bogstaver, som moderne bogtryk, men med over 300.

31. Den italienske tradition Italiensk bogtrykkerkunst er baseret på en mere funktionel ‘skrevet’ skrift, antikva-skriften, hvor minuskler, udviklet til administrationsbrug i middel-alderens kancellier, kombineres med romerske versaler. Det er således en italiener, Aldus Manutius, der opfinder kursiv-skriften, der oprindeligt var en selvstændig skrift, ikke tilbehør til enhver skrift.

32. Bredpennen Bredpennes ‘spor’ hen over papiret skaber en vekslen mellem grundstreg og hårstreg

33. Renaissanceskriften Eksemplet viser typen ‘Centauer’, der har bevaret bredpennens dynamiske flow

34. Den klassicistiske tradition • Typografien frigør sig af kalligrafien • (bogtrykket frigør sig af håndskriften) • Rationalitetens frigørelse af traditionen • 1640 indkaldes hollandske bogtrykkere til at oprette et kongeligt bogtrykkeri i Louvre • 1661 nedsættes i Frankrig en kommission til at tegne en ny skrift, der bryder med traditionen • (stempelskærere erstattes af kobberstikkere)

35. Den klassicistiske tradition • Med den franske reform kan man tale om det første forsøg på at ‘digitalisere’ skriften. • Bredpennens spor slettes • Bogstavet placeres inden for et grid af 48 × 48 kvadrater • Grundtanken bag det franske initiativ forplanter sig over hele Europa og viser sig hos bl.a. • englænderen John Baskerville • italieneren Bodoni • franskmanden Didot

36. Baskerville

37. Bodoni

38. Didot

39. Klassicismens hovedtendens • Skriftens vertikalitet understreges. • Kontrasten mellem grundstreg og hårdstreg bliver større. • De horisontale seriffer mister enhver organisk forbindelse med de vertikale elementer. • Med renaissancens og klassicismens skrifter er brødskriften i bogtryk (stort set) etableret for de kommende århundreder.

40. 1800-tallet • Udviklingen af skrifter i 1800- tallet kommer til at foregå uden for bogen i polulær-medier som ‘skiltet’ og ‘plakaten’. • Den voksende kommercialisering og konkurrence udvikler et behov for iøjnefaldende displayskrifter. • Man har i den forbindelse talt om en ‘tivolisering’ af skriften, hvor billede og skrift smelter sammen.

41. A

42. 1800-tallets slutning • Den mest reflekterede indsats mod det, som man opfattede som den moderne industrikulturs forgrimmelse af verden, blev ydet af ‘Arts and Crafts Movement’, som man kan kalde en meget bevidst reaktionær bevægelse, der hentede inspiration i før-industiel ‘formgivning’. • Som førstemand inden for typografi og bogtryk står multikunst-fænomenet William Morris

43. Gotikken som ideal For Morris bliver bogen et total-kunstværk, der lader indhold, typografi og illustration gå op i en højere enhed. Her er vist en side fra Morris udgave af kunsthistorikeren John Ruskin’s “The Natur of Gothic”, et værk, som netop ‘ideologisk’ peger tilbage på gotikken, hvor man ikke skelnede mellem håndværk og kunst, som et enheds-kulturelt idealbillede.

44. Bauhaus Modsat ‘Arts and Crafts Movement’, der kæmpede mod industrialiseringen, ønskede det tyske Bauhaus som kraftcenter for udviklingen af et nyt formsprog en typografi, der var i overensstemmelse det industielle fremskridt. Bauhaus var en vigtig faktor for udviklingen (og især udbredelsen) af den moderne grotesk-skrift. I en rationel og geometrisk ånd opbyggede man en skrift, der ikke kun fjernede de ornamentale seriffer og ‘bredpennens vekslen mellem grundstreg og hår-streg, men også reducerede bogstavernes mang-foldighed til en kombination af nogle ganske få form-moduler.

45. Bauhaus’ funktionalitet • Der er ofte sat spørgsmålstegn ved, hvor funktionelle Bauhaus’ grotesk-skrifter i virkeligheden er: • bogstaverne er mindre individuelle og derfor vanskeligere at skelne, • den serif-løse skrift giver ikke øjet støtte til at fastholde linjen, hvorfor den kræver større linjeafstand. • På en skærm klarer sans-serif groteskernes faste form sig imidlertid bedre antikva-skrift med seriffer • (i hvert fald i lille udgave).

46. Digital skrift som simulation

47. Type Magic • Greg Simsic har på Hayden Books udsendt en række bind i serien ”Photoshop Type Magic” med eksempler på, hvordan man kan skabe sin egne øjnefaldede displayskrifter ved brug at diverse filtre • Noise, Distort, Blur, Render/Cloud, Pixelate osv. • for at filtrene virker på teksten, skal tekstlaget først rasteriseres (Layer/Rasterize/ …)

48. Næste gang • Om informationsarkitektur og navigation • læs Lynch & Horton, kap. 3, “Site Design”