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.
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!)
... 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
.
... 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:
Betegnelse | Eksempel |
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 |
... 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.
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.
... 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.
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