Skriftbestemmelse i CSS

Dette er en artikel om grundlæggende skriftformatering ved hjælp af stylesheet.

Det er jo rart nok at have grundbegreberne på plads, før vi kaster os ud i dybere overvejelser.

CSS-specifikationen har en del regler, der handler om skrift. De mest betydningsfulde er:

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;
}

Selektor er som sædvanlig et HTML-element, eller en class (.storskrift) eller en id (#lilleskrift). I de to sidstnævnte tilfælde er formreglerne knyttet til de eller det HTML-element, der har fået den pågældende class eller id.

Hvilken skrift?

For at at starte bagfra og få det overstået, har jeg allerede skrevet et par artikler om font-family, og hvad du kan stille op med denne formregel. I disse artikler nævner jeg et par muligheder, du muligvis ikke kender, for at give dine websider lidt ekstra pizazzz alene gennem dit skriftvalg. (Skrift som grafik? La' vær!)

Linieskydning

... hedder det på dansk, når vi taler om afstanden mellem to linier. Som du ser af tekstboksen herover er det tilsvarende CSS-begreb line-height.

line-height eller linieskydning er afstanden mellem grundlinierne i 2 linier tekst, der følger efter hinanden inden for et tekstafsnit. line-height siger altså absolut intet om den lodrette afstand mellem to afsnit.

Browserens "naturtilstand" er 1:1 eller 100% – det vil sige en 12 punkt skrift har en linieskydning på 12 punkt. Typografer vil skrive det som 12/12 punkt. Som vi skal se, kan vi gøre næsten mage til.

line-height er en tekstegenskab og egentlig ikke en skriftegenskab. Men de fleste finder det meget naturligt at vælge linieskydning, samtidig med at de vælger skrift og skriftstørrelse. Jeg har vænnet mig til at bruge procentværdier og vælge en linieskydning på 120-130 procent. Hvis du ikke vælger noget, får du 100% og i mine øjne bringer det linierne for tæt på hinanden og gør dem dermed mindre læselige.

Du kan også fornøje dig med (og irritere dine læsere med) at bruge procenter mindre end 100, hvis du vil presse en masse tekst ind på et meget lille areal. Det ser herrens ud. Se eksempel 2.

Som værdi for linieskydning kan du bruge alle længdemål. Hvis du gør det, er det måske mest praktisk at bruge det samme længdemål, som du bruger til font-size. Bruger du f.eks. pixel til at angive skriftstørrelser, er det nok praktisk også at angive pixel som værdi for line-height.

Skrifstørrelse

... vil jeg springe lidt let hen over, fordi det er det, alle de øvrige artikler i denne serie handler om.

Kort fortalt har du følgende metoder til – via dit stylesheet – at angive skriftstørrelser:

BetegnelseEksempel
Absolutte størrelser med nøgleord font-size:medium
Relative størrelser med nøgleord font-size:larger
Absolutte størrelser med længdemål font-size:12pt
Relative størrelser med længdemål font-size:0.9em

font-weight

... handler om skriftens "tyngde", det vil sige, hvor fed eller tyk en skrift, der er tale om.

Du kender jo i forvejen fed skrift. Det er det, du får, hvis du bruger markørerne strong eller b. Det er også det, du får, når du bruger en overskriftsmarkør, såsom h3.

CSS-reglerne giver dig to sæt muligheder for at angive en font-weight, nøgleord eller talværdier:

normal | bold | bolder | lighter
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Der er ingen særlig korrespondance mellem nøgleordene og talrækken. Dog er det normalt således, at normal svarer til tallet 400 og bold svarer til tallene 500 og 600. De øvrige tal giver kun mening, dersom der på computeren er installeret flere varianter af den aktuelle skrift end normal og bold. Og det er som regel ikke tilfældet på almindelige installationer.

En undtagelse herfra er skriften arial. På en Windows computer installeres normalt 3 tykkelsesvarianter, arial, arial bold og arial black, der burde korrespondere med normal, bold og bolder, hhv. 400, 600 og 700. Som du ser i eksempel 3 er det imidlertid ikke tilfældet. Jeg er nødt til specifikt at angive Arial Black for at få den fedeste udgave af denne skrift frem.

Så hele diskussionen om fed skrift er for nærværende temmelig akademisk. Du har normal (ordinær hedder det faktisk i fagsproget) skrifttykkelse og du har fed skrifttykkelse. Færdig.

Det er ikke altsammen på grund af de halvfærdige browsere, vi må trækkes med. Det er ikke browserens opgave at tegne en skrift, der ikke findes på computeren. Det er derimod browserens opgave at finde en skrift, der ligner det, vi har bedt om. Og på dette punkt er browserne af i dag ikke særligt gode.

font-variant

Denne formregel har kun to værdier: normal og small-caps. normal gør ingenting, small-caps tegner følgende:

Skriften er med kapitæler

... det vil sige som kapitæler, det vil igen sige: med store bogstaver, hvor de bogstaver, der ellers er små bliver lidt mindre end dem, der ellers er store.

font-style

... har 3 værdier: normal, italic og oblique.

normal gør ingenting, italic tegner med kursiv skrift og oblique tegner med skrå skrift.

italic eller kursiv skal være kursivudgaven af den skrift, der er angivet i formreglen for font-family. De fleste skrifter har en sådan variant, på samme måde som de har en fed udgave.

oblique er skrå skrift. Hvor kursiv er en særlig tegnet udgave af skriften, er skrå skrift simpelthen grundskiften, der er givet en vis hældning. Det er rimeligt let at konstatere, at de fleste af dagens browsere substituerer en skrå skrift, når de faktisk bliver bedt om en kursiv. Også selv om den kursive skrift findes.

font kortformsudgaven

Der findes en kortformsudgave af font-markøren, sålunde:

p {
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:1em;
line-height:1.2em;
font-family:arial,sans-serif;
}

kan skrives på formen:

font:normal normal normal 1em/1.2em arial,sans-serif;

Ordenen på de 3 første formregler er ligegyldig. Faktisk kan de helt udelades, når de som her har værdien normal.

Derimod skal de to sidste formregler altid forefíndes i en font-deklaration, og de skal nævnes i den viste orden.

Denne side er senest opdateret: 22. November, 2006