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:

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.

Font-eigenschap CSS-eigenschap Opmerkingen
Karakterhoogte font-size Alle 9 eenheden bruikbaar
Spatiëring letter-spacing Percentage niet mogelijk
Regelafstand line-height Alle 9 eenheden bruikbaar

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.

Eenheid Abs./Rel. Opmerkingen:
px Abs. 
pixels. Dit heeft het nadeel dat de letters op het scherm kleiner worden als de resolutie van het scherm hoger wordt.
cm Abs. 
De letters worden op elk scherm even groot, ongeacht de resolutie.
mm Abs. 
De letters worden op elk scherm even groot, ongeacht de resolutie.
pc Abs. pica. 1 pica = 12 pt = 4,2175176 mm
in Abs. 
inch. De letters worden op elk scherm even groot, ongeacht de resolutie.
pt Abs. 
punten. Lijkt op pica, maar is beter hanteerbaar voor webdesign.
ex Rel. 
x-hoogte. Gebaseerd op de hoogte van de letter x. De x-hoogte is per font verschillend. Om het uiterlijk van de letters op het scherm precies in te stellen is ex het beste gereedschap in CSS.
em Rel. 
Vergelijkbaar met ex, maar nu gebaseerd op de hoogte van de letter M.
% Rel. 
Met percentage stel je de hoogte van de letters in ten opzichte van een default-waarde, bijvoorbeeld:
stel: de letterhoogte staat ingesteld op 20px. Dan komt er een tag met style="font-size:60%". Dan is de letterhoogte binnen die tag gelijk aan 60% van 20 pixels = 12 pixels.

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.

 
terug

html-302; Laatste wijziging: 15 april 2020