Webtypografie

Webtypografie betreft het gebruik van lettertypes op het Web. In de eerste versie van HTML was het nog niet mogelijk om te bepalen welke lettertypen zouden worden gebruikt om de tekst weer te geven. Netscape introduceerde de <font> tag in 1995, waardoor het mogelijk werd om lettertypen te specificeren. Later werd dit onderdeel van HTML 2.

Kenmerkend voor webtypografie is dat de fonts die gebruikt worden aanwezig dienen te zijn op de computer van de gebruiker die de website bekijkt. Wanneer dit niet het geval is wordt er een alternatief gekozen. Sinds de introductie van CSS is het mogelijk om zelf lettertypen te kiezen waar de browser op terugvalt bij het ontbreken van het lettertype op de computer van de gebruiker. Hiervoor koos de browser zelf een alternatief, zoals sans-serif of monospace. Ook werd in de eerste versie van CSS2 de functie ondersteund om lettertypen te downloaden bij het bezoeken van een website, wat het mogelijk maakte om niet-standaardlettertypen te gebruiken. Deze functionaliteit werd echter weer verwijderd in CSS2.1. Internet Explorer bleef de download functionaliteit ondersteunen vanaf IE4. De CSS3-standaard maakt het downloaden van fonts wederom mogelijk en is reeds geïmplementeerd in Safari 3.1, Firefox 3.5 en Opera 10.

Web lettertypen

Web-safe fonts

De term Web-safe fonts duidt op lettertypen die op vrijwel alle computers geïnstalleerd zijn. Deze lettertypen worden meestal door websiteontwerpers gebruikt, om de kans te vergroten dat de tekst in het gekozen lettertype wordt weergegeven. Hiermee wordt inconsistentie in het ontwerp tegengegaan.

Core fonts for the Web

Microsoft initieerde in 1996 het Core fonts for the Web project. Het doel van dit project was het gratis verspreiden van een standaardset lettertypen die ontworpen waren om goed leesbaar te zijn op het scherm, een grote verscheidenheid aan stijlen te bieden, en geschikt te zijn voor internationaal gebruik. De set bestond uit de volgende lettertypen:

• Andale Mono
• Arial
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

Hoewel het project in 2002 tot een einde kwam, zijn dit nog steeds veelgebruikte lettertypen op het web.

CSS-ondersteuning

CSS1

Met de introductie van CSS1 werd het mogelijk om eigenschappen als 'font-family', 'font-style' en 'font-weight' aan lettertypen toe te kennen. De eigenschap 'font-family' maakt het mogelijk alternatieven te specificeren in het geval van het ontbreken van het gebruikte lettertype op de computer van de gebruiker. Van deze functionaliteit wordt tot op heden nog steeds veel gebruikgemaakt. Het specificeren van het lettertype bijbehorende alternatieve gaat als volgt: font-family: Arial, Helvetica, "Liberation Sans", sans-serif;

Hierbij zijn de lettertypen gesorteerd op prioriteit. De browser begint bij het eerste lettertype en gaat zo nodig verder in de lijst. Vaak gebruikt men als laatste alternatief de term 'sans-serif' of 'serif'. Dit is een instructie voor de browser om respectievelijk een schreefloos lettertype, dan wel lettertype met schreef te kiezen.

CSS2

CSS2 introduceerde voor het eerste de mogelijkheid om fonts in te bedden in een webpagina, middels de @font-face regel. In de CSS2.1-specificatie was deze regel weer verwijderd. Internet Explorer bleef de functionaliteit echter ondersteunen.

CSS3

In de CSS3-specificatie is de @font-face regel wederom opgenomen. Dit maakt het mogelijk om CSS3 ondersteunende browsers zoals de Firefox (vanaf versie 3.5), Safari (vanaf versie 3.1) en Opera (vanaf versie 10) lettertypen in te bedden.

Lettertypen inbedden

Het inbedden van lettertypen door middel van de @font-face regel is een controversieel onderwerp vanwege mogelijke auteursrechtschendingen, omdat lettertypen als software beschouwd worden. Meestal wordt namelijk niet door de browser gecheckt of een lettertype zomaar gebruikt of gedownload mag worden. Niettemin is de verwachting dat met de introductie van CSS3 deze optie vaker gebruikt zal worden.

Bestandsformaten

TrueDoc

TrueDoc, de eerste standaard voor het inbedden van lettertypen werd ontwikkeld door Bitstream. Netscape 4 ondersteunde het TrueDoc-formaat, maar vanaf Netscape 6 werd deze ondersteuning stopgezet, omdat Netscape de broncode van dit formaat niet kon prijsgeven.

Embedded OpenType

Internet Explorer 4 en hoger ondersteunen het imbedden van fonts via hun propriëtaire formaat Embedded OpenType. EOT-lettertypen worden ingebed via de @font-face regel. DRM-technieken worden gebruikt om auteursrechtenschendingen tegen te gaan.

Scalable Vector Graphics

Lettertypen zijn onderdeel van de SVG-specificatie sinds versie 1.1. Safari introduceerde ondersteuning van SVG-lettertypen in versie 3 en Opera 10 ondersteunt ze sinds september 2009.

TrueType/OpenType

Mozilla Firefox, Safari, Opera ondersteunen op dit moment TrueType en OpenType.

Alternatieven

Voor het gebruik van niet-standaardlettertypen bestaan er ook alternatieven naast het inbedden. Een veelgebruikte methode is 'image replacement'. Hierbij wordt de tekst in de vorm van een afbeelding over de oorspronkelijke tekst heen gezet. Dit is voordelig in verband met zoekmachineoptimalisatie. Om dit effect te bereiken worden onder andere de op PHP en JavaScript gebaseerde Facelift Image Replacement (FLIR) en de op Flash gebaseerde Scalable Inman Flash Replacement (sIFR).

Externe links

• (en) Facelift Image Replacement
• (en) Scalable Inman Flash Replacement 3
• (en) Web Design is 95% Typography