Tekstopmaak in CSS.
Posted by Puma on 19 november 2008, 20:43:50

De [FONT] tag wordt reeds lang geweerd uit HTML pagina's. Het is een overblijfsel uit lang vervlogen HTML 3.0 tijden. Daarom is het een goed idee om je te bekwamen in het gebruik van 'font-color', 'font-size' en 'font-family' via CSS. Met CSS werken geeft namelijk een veel grotere manipulatie mogelijkheid aan [FONT] dan in gewone HTML ooit mogelijk was.


De 3 basis ' properties' van FONT zijn:





Font-Color


Om de tekstkleur in CSS te wijzigen volstaat het de kleurnaam of de hexadecimale codes op te geven. Gebruik ook het liefst één van de kleuren uit het 'websafe' kleurenpalet. Gebruik bijvoorbeeld:



dat geeft rood




Font-size



Er zijn verschillende manieren om font-size te definiëren. Het is vrij simpel: exacte afmetingen gebruiken we enkel voor afdrukken naar de printer. Elke gebruiker ziet Uw webpagina anders (verschillende schermresolutie, monitor afmetingen, MAC of PC gebruiker, of zelfs gewoon al de standaard letterinstelling van de gebruiker kan een ander resultaat geven).
Gebruik voor wegpagina's enkel relatieve verwijzingen. Het gebruik van pixels, centimeters of inches kan voor onaangename verassingen zorgen wanneer U het eindresultaat ziet op het beeldscherm van de eindgebruiker.


Onze aanbeveling: gebruik altijd ems. Ems houdt Uw pagina's toegankelijk. Om het even wie ze bekijkt.


Probeer dit even:



Dat geeft respectievelijk:


dit is lettergrootte 0.85em


dit is lettergrootte 1em


dit is lettergrootte 1.25em




Font-family


Dit is het eigenlijke lettertype dat U gaat gebruiken. Hoewel het U vrijstaat om het even welk lettertype te kiezen, toch graag nog even deze opmerking: als de gebruiker het lettertype dat U hebt gespecifieerd niet op zijn machine heeft geïnstalleerd zal de browser proberen een gelijkwaardig lettertype te vinden dat in overeenstemming is met hetgeen door U werd opgegeven. De pagina zal er dus ook weer niet meer uitzien zoals oorspronkelijk de bedoeling was!


Om dat probleem het hoofd te bieden, kunt U een specifieke lijst met lettertypes opgeven, gescheiden door comma's, dat op een breed spectrum van machines werkt.
De volgorde waarin de lijst van lettertypes voorkomt, bepaalt hoe de gebruiker Uw pagina ziet. Arial dat bv. een standaard lettertype is op een PC, is geen standaard lettertype op MAC. Het is dus aangewezen voor genoeg varianten te zorgen.


Een goede all-round keuze voor de definitie van font-family is:



Deze set is een sans-serif collectie. Geneva en arial zien er dan niet echt gelijkwaardig uit, ze zijn beide relatief standaard aanwezige lettertypes zowel op een Macintosh als een Windows computer. Helvetica en helv zijn dan weer gebruikelijk bij andere operating systems zoals Unix of Linux, die over een minder robuust arsenaal van lettertypes beschikken.



Welke font-size kiezen?


Er zijn verschillende waarden mogelijk, afhankelijk van het doel dat u voor ogen hebt: webpagina's of afdrukken op de printer


Relatieve lengtewaarden (browser)



Absolute lengtewaarden (printer)




Points voor printen


Veel Web designers hebben de slechte gewoonte aangenomen om de monitor fonts in punten (Pt) uit te drukken. Punten zijn voor printers, punt uit!
Als U 14pt lettertype gebruikt, kan dat er veel groter uitzien dan U verwacht. Het grootste verschil merkt U bij Macintosh en Windows. Macintosh toont een pagina +/- 25% kleiner dan in de Windows versie.


Web designers moeten absoluut blijven pt maten gebruiken, maar dan enkel als dat bestemd is voor style sheets die ontwikkeld zijn voor het afdrukken van documenten op de printer.


Wat nu?


Ok, we weten waarvoor we de style sheet gaan gebruiken. Nu moeten we nog beslissen welke maateenheid we effectief gaan gebruiken.


2 vuistregels: