Jørgen Farum Jensens noter om

Valg af skriftstørrelse

Kort og klar besked om, hvordan du fastsætter størrelsen på skriften på dine websider.

Den gode nyhed om skriftstørrelser er, at der er mange forskellige måder, du kan bestemme din skriftstørrelse på.

Den dårlige nyhed omkring skriftstørrelser er, at hver af dem giver højest forskellige resultater i forskellige browsere.

Den rigtigt dårlige nyhed er, at de fleste af dem er komplet ubrugelige.

På de websider, du finder link til i menuen til højre, forklarer jeg en hel del om de forskellige metoder til fastsættelse af skriftstørrelser og skriver også om fordele og ulemper ved de forskellige metoder.

Hvis du ikke er meget optaget af emnet, kan du nøjes med at skimme artiklen Skriftbestemmelse i CSS for at få fat på hovedpunkterne omkring skriftbestemmelse.

Herunder resumerer og supplerer jeg denne artikel:

Skriftbestemmelse i CSS

Den fuldstændige formdeklaration for skrift ser således ud:

selektor {
font-style:værdi;
font-variant:værdi;
font-weight:værdi;
font-size:værdi;
line-height:værdi;
font-family:værdi;
}

Her er selektor det eller de elementer, der skal vises med den pågældende skrift.

Det, der er interessant her er formreglen: font-size:værdi;. Hvad skal vi skrive i stedet for værdi?

Det korte svar er: Ingenting. Nul. Nada. Zilch. Drop den!

Ok, og hvad så?

Hvad er det lige der sker, hvis vi helt udelader formreglen font-size: En-eller-anden-værdi?

Det sker det, at din læser ser den skriftstørrelse, hun foretrækker. Hendes browser henter nemlig oplysningen om, hvilken størrelse, skriften skal have, i browserens tekststørrelsesværktøj. I 9 ud af 10 tilfælde er dette værktøj sat til at vise en medium skrift.

Og hvad er så det? kunne du spørge. Det kan du se på denne side, hvor brødskriften vises i denne størrelse (medium – forudsat selvfølgelig at du ikke har ændret indstillingen i dit tekststørrelsesværktøj).

Den skrifttype, jeg bruger, og som med stor sandsynlighed også findes på din Windows computer, er georgia. Hvordan andre skrifttyper ser ud i deres “naturlige størrelse”, kan du overtyde dig om ved at betrage min eksempelside Ingen skriftstørrelse.

Ja, men skriften er jo alt for stor!

Ja, det synes jeg altså ikke.

Men jeg vil da medgive, at mange andre websidekonstruktører og ikke mindst webdesignere synes det samme, at en grundskrift i størrelsen 1 em er for stor.

Så brug en mindre skrift

Hvis du gerne vil have en mindre skrift, må du under ingen omstændigheder sætte nogen global font-size. (Med global mener jeg her en font-size formregel for html-elementet eller body-elementet.)

Det, du skal gøre, er at sætte en font-size på de elementer, der skal have en mindre størrelse, og du skal gøre det ved hjælp af procenter. For eksempel:

p,td,li,dt,dd,h4 {font-size:90%;}

Resultat af en sådan øvelse kan du se på eksempelsiden 90 procent skriftstørrelse

Pas på arven!

Ovenstående holder kun, så længe der ikke er arv på spil. Arv er det fænomen, at et HTML-element arver en række egenskaber fra det overordende element. Det gælder for eksempel alle skriftegenskaberne. Hvis du bruger ovenstående eksempel og indeslutter en p-markør i en tabelcelle, vil teksten i en sådan p-markør blive 90 procent af 90 procent, altså ca. 80 procent. Og det er næpppe meningen. Et måske mere nærliggende eksempel er en li-markør i en indlejret liste.

Det fænomen vil optræde næsten uanset hvordan du sætter din skriftstørrelse, så du er nødt til at forholde dig til det. Har du for eksempel en liste i en indlejret liste, skal du formatere den indlejrede liste på følgende måde:

li li {font-size:100%;}

Denne formdeklaration vil sikre at en indlejret liste får en skriftstørrelse på 100 procent af den overordnede listes skriftstørrelse, som jo er 90 procent.

Bemærk her, at det generelt er en dårlig idé at sætte skriftstørrelse på elementer, der ikke kan indeholde tekst, for eksempel ul, ol, dl, table og tr for at nævne de mest indlysende, men også for eksempel blockquote.

Hvad med overskrifterne

Overskrifternes størrelse bestemmes også af browseren ud fra browserens tekststørrelsesværktøj. Det er dette værktøjs indstilling der er bestemmende for størrelsen af 1 em. En h1-overskrift er 1em *1,2*1,2*1,2, en h2-overskrift 1em *1,2*1,2 og en h5-overskrift 1em *0,83.

Bemærk, at dette er omtrentligt, og forskelligt fra browser til browser. W3C har ikke fastsat noget bestemt korrespondance mellem størrelsen på grundskriften og størrelsen på overskrifterne.

Konsekvensen af af dette er, at dersom du sætter grundskriftens størrelse til 90 procent, har du ikke ændret på den em-størrelse, browserens tekststørrelsesværktøj regner med. Forholdet mellem dine overskrifter og din brødtekst bliver derfor et andet end hvis du ikke havde sat grundskriftens størrelse til 90 procent.

Ønsker du at ændre på størrelsen af dine overskrifter er du derfor nødt til eksplicit at sætte disse til en eller anden passende procent. Bemærk her at h1 {font-size:100%;} eller h1 {font-size:1em;} begge vil lave en h1-overskrift der har samme størrelse som grundskiften, det vil sige 1em.

Overskrifters marginer

I min erfaring kan det være sådan, at overskrifter tegner sig lidt forskelligt fra browser til browser, så jeg har fået den vane altid at at nulstille linehøjde, margin og padding på disse elementer, for eksempel:

h1,h2,h3 {line-height:100%;margin:0 auto;padding:0;}

Så giver jeg disse overskrifter egenskaber alt efter deres placering i kildekoden, for eksempel #sidehoved h1, #indhold h2 og så videre.

Visdommens stemme

Hvor nyt alt dette end kan forekomme dig er det forholdsvis konventionel visdom, i hvert fald for os, der har været ved faget i nogle år.

Nu er konventionel visdom jo noget, der fra tid til anden skal efterprøves, ikke sjældent af kætterske kræfter. Således også med det her forklarede. Owen Briggs, som er en anerkendt CSS guru ( www.thenoodleincident.com), har sat de forskellige metoder til fastsættelse af skriftstørrelser på prøve i en række forskellige browsere på en række forskellige platforme.

Resultatet er flere hundrede screenshots af en skrift, hvis størrelse er bestemt ved forskellige metoder.

På denne baggrund gør Owen Briggs op med alle de metoder, jeg beskriver i denne og de øvrige artikler om denne sag.

Argumenterne for

Owen har et par gode argumenter for sin sag. Han skriver, at han ønsker at fastsætte skriftstørrelsen på websider på en sådan måde, at skriftens størrelse er ens, uanset browser og platform, og at brugeren frit kan ændre størrelsen ved hjælp af browserens tekststørrelsesværktøj.

Owen skriver desuden, at det er hans opfattelse at en passende skriftstørrelse er lidt større end skriften i browserens værktøjslinie. Det er hans udgangspunkt, at hvis folk kan læse deres værktøjslinie, kan de nok også være tilfredse med en skrift på websiden, der er lidt større end denne.

Disse betragtninger fører til Owen Briggs' universalopskrift på skriftstørrelse:

Sæt p til 1em og body font-size til 76 procent (76%). Sæt derefter størrelsen på alle andre elementer i em'er.

Owen har videre eksperimenteret med body font-size og konkluderer, at den ikke må være mindre end 75 procent, så sker der mærkelige ting i Opera.

Jeg har taget mig den frihed at kopiere Owens eksempelside, briggs.php, med stylesheet'et indsat i head-delen. (For en ordens skyld – jeg har mailet Owen om dette og han har svaret, at det er ok.)

Denne side er senest opdateret: 22. November, 2006