Skrifttyper og FONT

Når man læser, bevæger øjet sig i små ryk langs tekstlinien. En normal læser registrerer de enkelte ord som "ordbilleder", dvs. at kombinationen af bogstaver genkendes og identificeres som et bestemt ord. Denne proces er hos de fleste mennesker mere eller mindre automatiseret, men når et ordbillede ikke genkendes eller ikke giver mening i sammenhæng med den øvrige tekst, må øjet fokusere på de enkelte bogstaver, og derved brydes læserytmen.

Som formidler er det trykte ord et uovertruffent medie. Siden 1440, hvor bogtrykkerkunsten blev opfundet, har tryk på papir været langt den væsentligste kilde til formidling. Dette skyldes i høj grad, at tryk på papir opfylder alle de vigtigste krav til læsning. Det kræver ikke ekstra udstyr (ok, briller måske), det kan medbringes og benyttes overalt. Når ordet er trykt, kan teksten ikke ændres (uden det kan ses).

Som formidler af skrift repræsenterer computeren stort set alt det, som er forstyrrende for læsning: billedet vil altid flimre en lille smule og derved bryde øjets rytme, der skal en del udstyr og elektricitet til, før man kan begynde at læse, der er mange forstyrrende momenter ved udstyret, ved interaktivitet osv. At formidle et skriftligt budskab via computeren kræver derfor omtanke, specielt med hensyn til typografi og opsætning.

Vi skal i denne artikel se på, hvordan man kan ændre på skrifttyper, skriftstørrelse og farver på websider.

I HTML er der fire basale måder at fremhæve tekst på. Teksten kan skrives med fed skrift, understreget, kursiv, eller man kan vælge at SKRIVE MED STORE BOGSTAVER.

Ord skrevet med store bogstaver (majuskler) virker som at råbe. At skrive et ord kun med majuskler nedsætter læsbarheden. Ordbilledet af et ord skrevet kun med MAJUSKLER er en kasse, mens ordet skrevet med minuskler (små bogstaver) giver et ganske andet billede: majuskler. Bogstaverne "j", "k" og "l" bryder rammen. Se også [1].

Ord, der er understregede, vil ofte blive opfattet som noget klikbart, idet links sædvanligvis vises understregede (havde du lyst til at klikke?). For at undgå denne potentielle tvetydighed anbefales det at benytte en anden måde at fremhæve tekst på. Det gælder også i overskrifter.

Fed skrift og kursiv er ganske velegnede til at fremhæve tekst med. Kursiv skrift kan dog være svær at læse, hvis fontstørrelsen bliver for lille.

Fremhæv ikke for meget. Gør du det, vil resultatet være, at intet fremstår fremhævet.

Formatering af teksten i et HTML dokument, sker vha. tags (et engelske fagudtryk, der kan oversættes ved 'kode'), hvor de fleste tags har nogle attributter (egenskaber), der kan tildeles forskellige værdier.

Vil man i HTML ændre på skrifttype, farve og størrelse, kan man benytte FONT tag'et. Det kan gøres på følgende måde:

FONT er navnet på den pågældende tag. De fleste tags skal efterfølges af et sluttag, i dette tilfælde. I starttag'et er attributterne FACE, SIZE og COLOR anført med deres værdier [2].

Ændringerne specificeret ved attributternes værdier gælder som hovedregel for den tekst (og de HTML-elementer) der står mellem start- og sluttag'ene.

Ovenstående attributværdier vil resultere i følgende tekst:

De to mest benyttede browsertyper er Netscapes Navigator og Microsofts Internet Explorer. Både Netscape og Microsoft har nogle sider, hvor man kan se, hvilke tags og attributter de understøtter [3]. Ud over at understøtte HTML-standarderne har både Microsoft og Netscape tilføjet egne tags, som kun deres browsere forstår. Hvis man laver websider, som skal kunne ses med forskellige browsere, er det vigtigt at finde ud af, hvilke tags man kan bruge. Se også [6].

Lad os nu se nærmere på de tre attributter SIZE, COLOR og FACE.

En øget fontstørrelse kan bruges til at fremhæve de dele af teksten på en side, forfatteren mener bør være mere fremtrædende end resten. Det kan fx bruges til at fremhæve det første afsnit efter overskriften (i avissammenhæng også kaldet underrubrik, manchet eller resumetekst), sådan som vi har valgt at gøre i denne artikel.

Nogle finder det også relevant at skrive billedtekst med en lidt mindre fontstørrelse (og/eller kursiv skrift) for også visuelt at adskille den fra brødteksten.

Det kan være fristende at sætte fontstørrelsen ned for at have plads til hele teksten på en skærmside, eller sætte den op så en kort tekst fylder mere af skærmen. Men man må nødvendigvis gå ud fra, at læseren har justeret på browserens standardindstillinger, så de passer til læserens behov. Hvis du generelt sætter fontstørrelsen op, kan det være irriterende, og sætter du den ned, kan det måske betyde, at læseren får svært ved at læse din tekst.

3D effekt:
Ved at ændre på fontstørrelsen kan man opnå simple 3D effekter.

De kan forstærkes ved også at justere en smule på farverne, således at teksterne i 'forgrunden' skrives med klare farver, mens teksterne i baggrunden skrives med lidt mere slørede farver.

Det er muligt at ændre på tekstens farver ved at benytte

Hvis man ønsker at ændre på tekstens farve i hele dokumentet, gøres det bedst ved at benytte attributter i dokumentets BODY tag [5]. Hvis jeg fx ønsker at præsentere mit dokument med sort baggrund, hvid tekst, gule links (både besøgte og ikke-besøgte), ser det ud som følger[6]:

Klikkede du på den blå tekst? Havde du lyst til det?

Ligesom understreget tekst, signalerer blå tekst, at teksten er klikbar. På tilsvarende måde signalerer violet tekst en henvisning til en link, der har været fulgt.

Hvis man overvejer at ændre på tekstens farve, er der flere hensyn at tage:

• Brug ikke mange forskellige farver, det forvirrer øjet
• Tænk på baggrunden, teksten skal være til at læse. Brug farver med god kontrast
• Hvid tekst på sort baggrund virker godt på skærm, men hvad med print? Mange browsere er indstillet til ikke at printe baggrundsfarver og baggrundsbilleder ud. Hvid tekst på papir (hvidt) er en uheldig kombination!
• Tag højde for folks browserindstillinger. Hvis du ændrer på tekstens farve enten vha. FONT tag'et eller vha. BODY tag'en er det bedst at sikre sig, at den nye tekstfarve kan ses på dokumentets baggrund. Dette gøres ved også at sætte baggrundsfarven i BODY tag'et.

På Internet findes der steder, hvor man kan forsøge sig frem til en farvesammensætning, der virker fornuftig [7].

Ved at benytte

Browseren benytter den første font i listen, som den kan finde på læserens maskine. Finder den ikke nogen af de fonte, der er angivet i listen, benytter den standardfonten.

Antallet af fonte, der er installeret på læserens maskine, kan variere meget, og det er langt fra sikkert, at de er identiske med dine fonte. Det er derfor fornuftigt at angive flere alternative fontnavne, bl.a. mindst en af de fonte, der bliver installeret sammen med styresystemet på de maskiner, du forventer at dine læsere benytter.

I Yales "Web Style Guide" [8] er der et afsnit, som handler om forskellen mellem forskellige fonte og forskellen mellem fonte i Windows95 og Machintosh OS. I det pågældende afsnit finder man bl.a. en tabel, der viser de fonte, de to styresystemer har som udgangspunkt.

Hvis man vil være nogenlunde sikker på, at man får vist sin tekst uden seriffer [9], må man vælge en sans serif, som man er nogenlunde sikker på findes i Windows95, og en man er nogenlunde sikker på findes i Macintosh OS. Det kunne fx være

Det giver følgende resultat i din browser:

FACE attributtet giver mulighed for at anvende en masse forskellige fonte på samme side. Bl.a. for ikke at forstyrre læsningen af teksten anbefales det, at man ikke bruger for mange forskellige fonte. Brug fx en font til overskrifter og en anden til brødtekst [10].

Dmitry Kirsanov har skrevet en artikel "The World of Fonts" om skrifttypers udvikling gennem tiderne. Han skriver også i artiklen om, hvilke fonte, han mener passer sammen og hvorfor [11].

Hvis man placerer en tabel inde mellem

Kode:
Tekst før tabellen. Det står med en mindre fontstørrelse.

Resultat:
Tekst før tabellen. Det står med en mindre fontstørrelse.

I en senere artikel vil vi vende tilbage til de muligheder, tabeller giver mht. layout, positionering og rammer.

Med dynamisk HTML, Cascading Style Sheets og de nyeste versioneraf Netscape og Internet Explorer er der endnu flere muligheder for at justere på dokumentets tekster, men det er en helt anden historie.

Skrifttyper, ombrydning af teksten, farver og effekter er kun midlertil at understøtte teksten. Det er indholdet af teksten, ikke formen, der er det væsentlige.

1. Yale C/AIM Web Style Guide - Typography I
2. BrianWilsons "HTML Support History" indeholder bl.a. en side om FONT tag'et, hvor de tre nævnte attributter samt nyere attributter beskrives nærmere.
3. Netscape manual over HTML tags.
   Netscape HTML tags sorteret efter browserversion
   Microsofts HTML dokumentation for Internet Explorer
4. Farvens værdi er her angivet som en hexadecimal værdi. Nyere browsere forstår også navne på farver såsom "blue" for blå.
   Microsoft har en farvetabel, der viser hvilke farvenavne man kan bruge i IE 4.0 og senere.
   Netscape har en tilsvarende tabel.
   
5. Brian Wilsons "HTML Support History" indeholder bl.a. en side om BODY tag'et, hvor de forskellige attributter beskrives nærmere.
6. Beskrivelser af de forskellige HTML tags findes flere steder på Internet, bl.a.:
   • w3c (World Wide Web Consortium) har under deres HTML hjemmeside en henvisning til "HTML 4.0 Specification"
   • Netscape. Beskriver hvilke tags og attributter Netscape understøtter, herunder naturligvis Netscapes egne udvidelser af HTML-standarderne.
   • Microsoft. Beskriver hvilke tags og attributter Microsoft understøtter, herunder naturligvis Microsofts egne udvidelser af HTML-standarderne.
   • Sandia. Siderne bliver dog ikke opdateret længere. Dvs. de nyeste tags og attributter er ikke tilføjet.
   • Brian Wilsons HTML Support History beskriver de forskellige tags og deres attributter og viser samtidig, hvilke tags og attributter, der understøttes af de forskellige versioner af browserne Internet Explorer, Mosaic, Netscape og Opera.
7. Vi vil her nævne to steder, hvor man kan forsøge sig frem med farvekombinationer, hvor den første kræver, at browseren kan køre Java, mens den anden benytter sig af JavaScript.
   • ColorCenter [Red: Sitet eksisterer ikke længere.]
   • Farvevælger
8. Yale C/AIM Web Style Guide: Typefaces
9. En skrifttype med seriffer har 'fødder' på bogstaverne. Sans serif bogstaver har derimod ikke fødder (Sans er fransk og betyder uden). Bogstavet "k" skrevet med hhv. en sans serif og en serif type ser således ud: k og k.
   Se også en definition på serif.
10. Se fx HotWired og Dmitry’s Design Lab: The World of Fonts
11. Dmitry’s Design Lab: The World of Fonts
12. Brian Wilsons "HTML Support History" indeholder bl.a. en side om TABLE tag'et, hvor de forskellige attributter beskrives nærmere.
13. Jakob Nielsens artikel Marginalia of Web Design om bl.a. "Text Size and Color"
14. HotWired: Why Type on the Web is So Bad