Skriftstørrelser med længdemål

De forskellige former for længdemål er nok den mest anvendte metode til at angive skriftstørrelse.

Også disse metoder har deres fordele og ulemper, som vi skal se på i denne artikel.

Du kan give din skrift en absolut størrelse med forskellige længdeværdier. Der er 5 længdemål, der sætter en absolut skriftstørrelse.Og du kan give din skrift en relativ størrelse med forskellige andre længdeværdier. Der er 3 længdemål, der sætter en relativ størrelse. De forskellige metoder er illustreret i nedenstående tabel:

Absolutte størrelser på skrift, længdemål
VærdiBetydningEksempel
ininches (tommer)font-size:0.4in;
cmcentimeterfont-size:1cm;
mmmillimeterfont-size:10mm;
ptpoints (punkter)font-size:30pt;
pcpica (cicero)font-size:2.5pc;
Relative størrelser på skrift, længdemål
pxpixelsfont-size:28px;
emem-højdefont-size:2.5em
exex-højdefont-size:5ex
Bemærk vedr. punktstørrelser følgende: 1 pica = 1/6 amerikansk tomme = 12 points. Da en europæisk tomme er lidt længere end den amerikanske tomme, er et punkt lidt større end end et point, mens en cicero er lidt større end en pica.

Pixels eller punkter?

I en kort tid efter at jeg var begyndt at anvende stylesheets brugte jeg punkter (points) til angivelse af skriftstørrelse. Så blev jeg opmærksom på farerne ved dette og gik over til pixels, som jeg har brugt i temmelig lang tid. Det er trods alt det, de fleste guruer anbefaler.

Hvad er farerne ved at bruge punkter (points – pc)?

Når en browser får den oplysning, at den skal tegne en skrift med en størrelse på f.eks. 12pt, skal browseren konvertere længdemålet 12pt til et antal pixel. For at kunne gøre det, bruger browseren en omsætningsfaktor, der hentes i computerens operativsystem.

Humlen er her, at forskellige operativsystemer bruger forskellige omsætningsfaktorer. Min Windows 2000 bruger f.eks. en omsætningsfaktor på 1,33 ved min normale opsætning (1024 pixel * 768 pixel med normal (100%) system font size).

Dette ændres imidlertid, hvis jeg ændrer resolution og system font size, f.eks. til en faktor 1,2, hvis jeg øger opløsningen til 1152 pixel * 864 pixel og sætter en system font size til 110 procent.

På en Macintosh computer er det både bedre og værre – der er omsætningsfaktoren altid 1:1. Det er jo til at regne med. Det vil sige, at f.eks. en 12 punkt skrift konverteres til en 12 pixel skrift på skærmen. Men det betyder, at de meget små arial- eller verdana skrifter, der synes at være så populære hos tidens webbureauer, bliver aldeles ulæselige på en Mac computer og ikke meget bedre på en Windows PC, der er rettet blot en lille smule til af en bruger, der måske gerne vil have en stor skrift på en højopløsnings-skærm.

Og hvordan ser skriftbilledet ud på et Linux-system med en Konqueror browser? Eller et andet Unix-system? Eller en håndholdt computer?

Tekststørrelsen kan ikke varieres

Hvis ikke det allerede nævnte er problematisk nok, er der endnu et alvorligt problem med skriftstørrelser i punkter, når det gælder Internet Explorer: Alle elementer, der har fået en skriftstørrelse i punkter, er låst til denne størelse. Brugeren kan ikke ændre på skriftstørrelsen ved hjælp af Internet Explorers værktøj til dette. (Men det går fint i andre moderne browsere - ja selv i Opera, hvis zoom-værktøj er det bedste, nogen browser har). Eksempel 7 er min prøveside, hvor alle skriftstørrelserne i indholdsdelen er sat ved hjælp af punktstørrelser.

De kloge siger: brug pixelstørrelser

Det førstnævnte problem – det med, at visningen af skriften varierer med operativsystemet og med operativsystemets indstillinger – kan vi ret let komme ud over ved at bruge pixelstørrelser. Hvis en 10 pixel skrift er læsbar på én computer, er den også på en anden.

Desuden er pixelværdier fortrinlige i forbindelse med positionering af elementerne. Gennemført anvendelse af pixelværdier giver os en vidunderlig følelse af, at vi har fod på tingene, og kan kontrollere udseendet af vore websider og kvaliteten af brugerens oplevelse.

Det er – naturligvis – en falsk følelse. Brugeren har altid det sidste ord. Hvis hun vil ha' en større skrift og ikke kan få det, går hun et andet sted hen – eller bruger det værktøj, jeg omtalte i den første artikel til helt at sætte dit stylesheet ud af kraft.

Det andet problem, som jeg nævnte ovenfor – at skriftens størrelse ikke kan ændres ved hjælp af browserens værktøj til dette – består nemlig stadigvæk – jf. eksempel 8.

em To the Rescue

Blandt alle de længdemål, du har mulighed for at anvende, er em-enheden den bedste.

For så vidt angår skriftstørrelser giver denne metode den samme fleksibilitet som nøgleordsmetoderne, men giver dig alligevel en bedre kontrol. Eksempel 9 viser min lille øvelsesside, hvor teksten nu er formateret med em-størrelser. Du kan af eksemplet se, at også IE's tekststørrelsesværktøj nu fungerer, og at de forskellige skrifter bevarer deres indbyrdes størrelsesforhold når teksten øges og mindskes i størrelse.

Maksimum fleksiblitet opnår du, hvis du undlader at fastsætte nogen skriftstørrelse for body-elementet. I så fald er det slet ikke din webside, der styrer skriftstørrelsen, men brugerens browserindstilling. Hvis den permanent er indstillet til f.eks. "Større" (det vil de facto sige 120%), ja så vil din webside med dette system blive vist med 120 procent skriftstørrelse.

Se, dét er er brugervenligt

Brug ikke nogen basis skriftsttørrelse

Det er vigtigt, at du ikke lader dig friste til at sætte en basisskriftstørrelse ved hjælp af angivelse af en størrelse i elementet body, som f.eks:

body {
font-size:12pt;
}

I så fald låser du em-størrelsen fast til en punktstørrelse, og derved har du forpasset din mulighed for at give brugeren det, hun ønsker, nemlig kontrol over skriftstørrelsen – jf. eksempel 10. I hvert fald, hvis din bruger ligesom 90 procent af befolkningen bruger Internet Explorer.

De eneste værdier, du kan give som basisskriftstørrelse og bevare fleksibiliteten hos brugeren er ved at anvende de relative længdeværdier, em eller procent.

I eksempel 11 har jeg vist dette. Denne eksempelside er lavet lige efter bogen med en basisskriftstørrelse på 1em og med tekstelementerne målsat i forskellige andele af em. Det ser jo tilforladeligt ud, ikke sandt?

Her må jeg bede dig – hvis du er IE-bruger – gøre noget aktivt, nemlig i eksempel 11 at gå ind i tekststørrelsesværktøjet, kontrollere at dit tekststørrelsesværktøj er sat til medium (eller mellem) og dernæst bestille en mindre skrift.

Ups!

Internet Explorer har endnu en fejl her. Skriften bliver alt for meget mindre.

Løsningen er her at bruge en anden angivelse af basisskriftstørrelsen, nemlig 100 procent. Dét trick har jeg læst om for i Eric Meyers weblog, www.meyerweb.com.

Men hvorfor overhovedet skrive enten font-size:1em eller font-size:100%; ind i formdeklarationen for body-markøren? Grundskriften på websiden bliver jo alligevel 1 em, hvor 1 em svarer til brugerens indstilling af sin browsers tekststørrelsesværktøj.

Forholdsregler

Set fra et brugersyspunkt er det en yderst fornuftigt ting med justerbare (skalerbare) relative skriftstørrelser. Men webdesigneren river sig i håret og spørger, hvad sker der med mit lækre pixelbaserede sidelayout?

Ja, det går jo i stykker, når brugeren frit kan gøre skriften større eller mindre. (Selvom ikke mange af dagens websteder kan tåle, at skriften gøres mindre). Jeg formoder, det er derfor, det er så populært også at fastholde pixelbaserede skriftstørrelser. Så tvinger vi jo brugeren til at se (tror vi) nøjagtigt det, vi har konstrueret.

Kamp op ad bakke

Jeg er helt på det rene med, at jeg kæmper op ad bakke med mit synspunkt, at skriftstørrelser bør kunne skaleres også i Internet Explorer. Men for at bevise, at det faktisk ikke er sværere end som så, har jeg lavet en prøveside, baseret på min standardlayout, men udelukkende lavet med em-størrelser. (Eksempel 12).

Den bedste af begge verdener

Både af hensyn til mig selv og til alle dem, der ikke vil hoppe ned i min båd med begge ben, vil jeg imidlertid runde disse artikler om valg af skriftstørrelser af med en model for, hvordan du både kan blæse og have mel i munden. Læs mere herom på websiden Brugervalgte stylesheets.

Denne side er senest opdateret: 22. November, 2006