Tips voor webmasters

Voorzichtig met lettergroottes

Een bepaalde tendens onder ontwerpers, die menen dat kleine letters een webpagina een nette verschijning geven en per “pagina” meer ruimte voor daadwerkelijke inhoud laat, resulteert soms in het gebruik van onredelijk kleine lettergroottes.

Helaas gaat dit niet altijd goed vanwege de diversiteit aan computers, van draagbare apparaten met uiterst kleine schermen tot projectiesystemen die met computers worden verbonden. En ook binnen een bepaalde computeromgeving kunnen de tekstgroottes variëren.

Het probleem is hier een basiskwestie van bruikbaarheid en toegankelijkheid: een goed ontwerp zou leesbaar moeten zijn zonder de gebruiker te dwingen om de tekstgrootte te vergroten of te verkleinen.

Vergeet <font>, gebruik CSS

De juiste, moderne manier om de grootte van de tekst in een webpagina te bepalen, is door gebruik te maken van Cascading Style Sheets (CSS) oftewel stijlbladen. Dit wordt sterk aangeraden in plaats van <font> tags in HTML, omdat CSS meer flexibiliteit biedt, gemakkelijker is te onderhouden en bandbreedte bespaart. Het is het doel van deze Tip om de voordelen van CSS ten opzichte van <font> tags te bespreken, lezers die meer details over deze kwestie willen, kunnen hun favoriete zoekmachine raadplegen voor gerelateerde informatie... We concentreren ons op goed gebruik van de CSS technologie om leesbare webpagina's maken.

Goed gebruik van CSS font eigenschappen

Hier zijn enkele basisregels die men zou moeten volgen om webpagina's te creëren die gemakkelijk (genoeg) zijn te lezen, gebruikmakend van de lettertype eigenschappen van CSS.

De grootte: respecteer de voorkeuren van de gebruikers, vermijd kleine afmetingen voor de inhoud

• Als een standaardgrootte voor letters in een document is 1em (of 100%) gelijkwaardig aan een grootte die overeenkomt met de voorkeur van de gebruiker. Gebruik dit als een basis voor uw letterformaten en vermijd een kleinere standaard.
• Vermijd afmetingen in em kleiner dan 1em voor tekstmateriaal, behalve misschien voor auteursrecht­verklaringen of andere soorten van "kleine lettertjes".

Eenheden: vermijd absolute lengte-eenheden voor weergave op scherm

• Specificeer de lettergrootte niet in pt of andere absolute lengte-eenheden voor schermstijlbladen. Zij zien er verschillend uit in verschillende computeromgevingen en kunnen niet aangepast worden door de gebruikerstoepassing (bv. browser). Beperk het gebruik van dergelijke eenheden tot het vormgeven op media met vaste en bekende fysieke eigenschappen (e.g afdruk).
• Gebruik relatieve lengte-eenheden zoals percentages en (beter) em
• Beter nog, indien er een standaard lettergrootte is bepaald voor het document, gebruik absolute grootte ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) of relatieve grootte ([ larger | smaller ]) bij het bepalen van de lettergrootte voor een individueel onderdeel binnen het document.

Leesbare families van lettertypen

Indien gebruik gemaakt wordt van een kleine font-size, kies een leesbare font-family met een hoge aspectwaarde (zie de paragraaf over font-size-adjust in de CSS2 specificatie voor een verklaring van de aspectwaarde), die waarschijnlijk beter leesbaar zijn op een dergelijke kleine schaal.

Verder lezen

Sommige van deze adviezen wijken af van de onze. “Corpus 1em, nihil minor” —Bert Bos naar Cato.

• Fonts in de CSS2 W3C Specification
• What's wrong with the FONT element? door Warren Steel
• Size Matters door Todd Fahrner
• Big Type Campaign door Lighthouse International
• Making Text Legible: Designing for People with Partial Sight door Aries Arditi

Over de "QA Tips"

De W3C QA Tips zijn korte documenten met wetenswaardigheden voor webontwikkelaars en webontwerpers, geproduceerd en gehost door de Quality Assurance Interest Group, de kwaliteits­bewaking­belangen­groep van het W3C.

Hoewel de tips zorgvuldig nagekeken worden door deelnemers aan de groep, moeten ze niet gezien worden als iets anders dan informatieve wijsheden. Bovenal, ze zijn geen normatieve W3C technische specificaties.

Meer over de Tips, hoe eigen parels van wijsheid bij te dragen en alle andere QA tips zijn te vinden in de Tips Index.