Afmetingen van letters en toepassing met CSS

Voor het weergeven van tekst op een website wordt een font (lettertype) gebruikt. Zo is er Arial, Verdana, Courier New, enzovoort. Op je PC staat voor elk font een bestand, waarin het uiterlijk van het lettertype is vastgelegd.
Een bestand dat de beschrijving van een lettertype bevat wordt ook wel gewoon 'font' genoemd. Als je PC onder Windows draait kun je de geïnstalleerde fonts bekijken vanuit 'Lettertypen' in het configuratiescherm.

Tot voor kort moesten de fonts die een browser kan gebruiken zich fysiek op de PC bevinden. Daardoor ontstond voor webdesigners een beperking. Die konden er niet van uit gaan dat de fonts die hij/zij als webdesigner zou willen gebruiken stonden niet noodzakelijk op de PC's van de bezoekers van hun sites. Als webdesigner moest je je beperken tot de 'gangbare' fonts of je toevlucht nemen tot handigheidjes.

Zo'n oude truc is om de tekst in het speciale font in een plaatje (.JPG, .GIF, enz.) te vatten en dat op de site te zetten, in plaats van echte tekst. Dit kunstje werkt echter niet altijd; effecten als het aanpassen van de opmaak aan de breedte van het scherm is hiermee niet mogelijk. Als je te veel van dit soort dingen toepast wordt je site ook nog eens traag.

Om dit probleem te omzeilen is in verleden een aantal font's uitgekozen door website bouwers, die op elke PC beschikbaar zouden

Om dit probleem te omzeilen is in verleden een aantal font's uitgekozen door een aantal browserfabrikanten. Die fonts zouden p elke PC beschikbaar moeten zijn. Dit worden de core fonts genoemd. Bekende namen zijn:
 
Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana en Webdings.
 
Je kunt er van uit gaan dat deze fonts beschikbaar zijn op alle PC's die onder Windows draaien.

Met de komst van CSS2 en de steeds bredere ondersteuning van de eigenschap @font-face, verbetert er veel. Je kunt nu je eigen, bijzondere fonts op je webserver plaatsen en die in je website gebruiken. Hoe je dat doet vind je in het item Niet-standaard fonts gebruiken.

Op deze pagina worden de font-afmetingen beschreven. Dit gebeurt niet uitgebreid, maar beperkt zich tot de zaken die je moet weten om er goed mee te kunnen werken in CSS.

Belangrijke termen
Er bestaan heel wat termen die op fonts betrekking hebben. De belangrijkste zijn:

• De letters worden geschreven op de Basislijn.
• De meeste kleine letters (a, c, e, enz) zijn niet hoger dan de x. Die bovengrens heet Haarlijn. De hoogte heet x-hoogte.
• Andere kleine letters (b, d, f, enz) steken uit boven de Haarlijn. Dat deel heet Stok. De bovenste lijn heet stoklijn.
• Andere kleine letters (j, p, q, enz) steken door de Basislijn. Dat deel heet Staart. De onderste lijn heet staartlijn.
• De hoogte van de hoofdletters heet Kapitaal-hoogte.

Zie de figuur hieronder.

Het ligt voor de hand te veronderstellen dat de x-hoogte plus de stokhoogte gelijk is aan de Kapitaalhoogte. Vaak is dat zo, maar lang niet altijd! Er bestaan fonts waarin de Kapitaalhoogte kleiner is dan x-hoogte plus de stokhoogte. Zie de figuur rechts; het font is er een uit de Frutiger-familie.
Andersom (grotere Kapitaalhoogte) komt ook voor.

In de drukkerij-wereld hoor je vaak de term corps. Dit wordt niet gebruikt bij webdesign. Het corps is gelijk aan stokhoogte + x-hoogte + staarthoogte.

Een andere belangrijke term is spatiering of letterafstand. Dat is de afstand tussen twee letters. Er wordt onderscheid gemaakt tussen Vaste en Variabele letterafstand, ook bekend als Monospaced en Proportional.
Dan is er ook nog het verschil tussen schreefloze fonts en schreef-fonts. Een schreef is een streepje dat aan de letters zit, met als doel de leesbaarheid te beïnvloeden. Voor een beeldscherm gebruik je het beste een schreefloos font zoals Arial of Verdana dat op deze website is toegepast. Voor gedrukte tekst is een schreef-font vaak meer geschikt.

Een andere term die hiermee samenhangt is Kerning. Dat is het aanpassen van de ruimte tussen twee letters, waardoor de leesbaarheid verbetert. Zie de figuur hiernaast. Links: zonder kerning, rechts met.
Let op de letters A en V van AVOND, en op de T en de o van Toolkit. De verschillen zijn klein, maar goed te zien!

Tenslotte is er nog de Interlinie. Vroeger was dat de witruimte tussen twee regels, dus de afstand tussen de staartlijn van de ene regel en de stoklijn van de volgende regel.
Tegenwoordig is het de regelafstand, dus de afstand tussen twee opeenvolgende basislijnen.

De font-eigenschappen toepassen in CSS
Met behulp van CSS kun je de font-eigenschappen op je website eenvoudig instellen, zie het. De onderstaande tabelletje.

Om een afstand of grootte op te geven heb je eenheden nodig. Binnen CSS zijn er negen. Van belang daarbij is ook hoe je de afstand/grootte opgeeft: Absoluut of Relatief.

Opmerkingen:
• Binnen CSS2 geldt de volgende verhouding: 16px = 12pt = 100%.
• De methode om met percentages in CSS te werken is:
   
  • Zet voor het zichtbare deel van het document (dat wil zeggen: het element <body>) het percentage op de waarde die je voor het document wilt hebben, bijvoorbeeld 87.5%:
    body { …
    font-size: 87.5%;
    …}
  • Omdat dit bij oudere browsers (o.a. Internet Explorer 6) niet goed werkt, zet je voor het hele document de waarde op 100%:
    html { font-size: 100%;}
  • Hierna kun je voor elk element instellen wat je wilt. Let wel op de volgorde die bij andere browsers weer van belang is:
    html { font-size: 100%;}
    body { …
    font-size: 87.5%;
    …}
    .
    .
    enz.
    .
    .
   
• Let op met het nesten van elementen. Als je bijvoorbeeld instelt:
  p {font-size:80%} en td {font-size:60%},
  dan komt in de volgende constructie de font-size uit op 60% van 80% = 48%:
   
  <table><tr><td>
    <p>De font-size is hier 60% van 80% = 48%.
    Dat komt doordat de <p>-tag is genest binnen de <td>-tag.</p>
  </td></tr></table>
   
• Behalve met maateenheden en percentages, kun je de lettergrootte in CSS ook instellen met behulp van sleutelwoorden, waarvan de namen min of meer voor zichzelf spreken: xx-large, x-large, large, medium, small, x-small en xx-small.
  Van deze sleutelwoorden ligt echter niet goed vast hoe groot de bijbehorende letters zijn. Daardoor zullen de letters in de ene browser groter of kleiner zijn dan in de andere. De enige mogelijkheid om dit te vermijden is door maateenheden te gebruiken. Vergeet die sleutelwoorden dus maar.
   
• De regelafstand stel je in met line-height. Dat doe je het beste in verhouding met de x-hoogte of de M-hoogte, dus in ex, of em. Met % gaat het ook goed.
  Bepaal de regelafstand altijd op het oog. Kies een waarde en bekijk op het scherm hoe het uitkomt. Richtwaarden voor een letterhoogte van 10 punten zijn:
  line-height ≥ 2ex of line-height = 1.2em.
   
• Voor de spatiëring, dus de afstand tussen de letters, gebruik je bij voorkeur de defaults van het font zelf. Je geeft letter-spacing dus alleen op als je die wilt veranderen, bijvoorbeeld voor de opmaak van een kopen. Meestal is 1 à 2px voldoende. Als je de letterafstand te groot maakt wordt de kop moeiljk leesbaar.
   
• Het is in CSS mogelijk om de eigenschappen font-family, font-size en line-height samen te voegen tot één eigenschap
   
    p { font-family: Verdana,Arial,sans-serif; font-size:10pt; line-height:12pt}
   
  is het zelfde als:
   
    p { font:10pt/12pt Verdana,Arial,sans-serif}
   
• In HTML 4 en eerder bestaat een tag <font>. Daarmee kun je het lettertype, de kleur en de grootte wijzigen. De mogelijkheden zijn echter beperkt in vergelijking met wat je met CSS kunt bereiken. Het gebruik van deze tag, anders dan voor het tijdelijk wijzigen van de kleur, wordt daarom afgeraden.

Opmerking
Meer over dit onderwerp vind je in het item Over eenheden in CSS.
 
De terminologie van typografie is fraai uitgewerkt in de site Type Terms.