Grundlæggende Webdesign

Præsentationer af emnet: "Grundlæggende Webdesign"— Præsentationens transcript:

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

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 Find eksempler på henholdsvis push og pull medier

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 Hdxp Hdxp Skriftens grundtyper Eksempel på serif type
‘Times New Roman’ Eksempel på sans serif type ‘Arial’ 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 de Alt+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

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 ens 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 , 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 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”