Lettertypes op het web, deel 2

7

17 maart 2009 om 11:20

Carsten Altena

Meer over: Design

Tweet

Inleiding

In het eerste deel van deze serie heb ik alle problemen rondom lettertypes op het web uiteen proberen te zetten. In dit tweede deel zal ik oplossingen die we vandaag de dag hebben onder de loep nemen. De voordelen van elke oplossing mogen duidelijk zijn: meer vrijheid in de keuze van lettertypes voor de designer, geautomatiseerde vervanging of “transformatie” van tekst. Aan elke oplossing kleven helaas ook nadelen, die ik telkens opsom. Aan het einde van de rit hoop ik de ene, de beste methode te vinden!

Fonts en licenties

Maar voordat we hierin duiken, eerst even iets over fonts en licenties. Aan commerciele fonts zijn “End-User Licence Agreements” (EULA) verbonden. Zulke licenties kunnen bij de eigenaar beperkingen in het gebruik van een font opleggen.

In het geval van de oplossing sIFR is bijvoorbeeld Fontfoundry Hoefler & Frere-Jones daarover in hun FAQ heel duidelijk in: om een font van deze foundry waarbij het toegestaan is om deze te embedden te gebruiken binnen sIFR dient een extra licentie gekocht te worden voor de webserver waarop dit font geinstalleerd is. Na rechtstreeks informeren wist de foundry mij zelfs mede te delen dat het niet toegestaan was om hun fonts te gebruiken binnen de overige in dit artikel beschreven oplossingen.

Het is dus verstandig om de EULA van een font te bestuderen en bij twijfel contact op te nemen met de foundry ervan alvorens deze te gebruiken binnen een van de oplossingen die ik ga beschrijven, om zo eventuele rechtzaken te voorkomen. Uiteraard is het wel toegestaan om gratis, licentievrije fonts te gebruiken zonder dat men zorgen hoeft te maken over licenties.

sIFR

sIFR (Scalable Inman Flash Replacement) gebruikt een combinatie van javascript en Flash. Flash bied de mogelijkheid om fonts te embedden in een flashmovie, en op deze manier kunnen er dus fonts worden gebruikt die wellicht niet standaard aanwezig zijn op het systeem van de bezoeker. De oplossing is inmiddels alweer aanbeland bij versie 3.

Hoe werkt het?

1. Het javascript scant de webpagina op teksten waarvoor is bepaald dat ze vervangen of zeg maar “getransformeerd” moeten worden.
2. Daarna maakt het script voor elk stuk tekst een flashmovie aan, aan de hand van een andere flashmovie waarin het te gebruiken lettertype is ge-embed.
3. Daarna vervangt het javascript deze stukken tekst met de aangemaakte flashmovies.

Voordelen van sIFR

De getransformeerde tekst is selecteerbaar, letter voor letter, vergelijkbaar met de manier waarop systeemtekst zich laat selecteren.

Nadelen van sIFR

• Javascript en Flash is vereist. sIFR vereist dat de gebruiker javascript heeft ingeschakeld en Flash heeft geinstalleerd en inschakeld. Gelukkig is er sprake van zogenaamde “progressive enhancement”. Wanneer Flash of javascript niet werkt, toont de pagina systeemtekst, maar uiteraard niet in het gewenste lettertype. Nu zullen sommige lezers zich afvragen of er uberhaupt nog gebruikers bestaan die geen flash hebben geinstalleerd. Dat hangt natuurlijk deels af van je doelgroep. Bijvoorbeeld: binnen sommige bedrijven zijn scripting en plugins uit veiligheidsoverwegingen uitgeschakeld door de systeembeheerder. Andere bezoekers gebruiken apparaten die simpelweg niet in staat zijn flashcontent weer te geven. Te denken valt aan sommige mobieltjes en TV’s.
• De tekst is niet schaalbaar. In moderne browsers blijkt dat bij het schalen van tekst door de bezoeker zelf geen effect heeft op “gesIFR-de” elementen binnen de pagina.
• Het vergt rekenkracht van het systeem van de bezoeker. OK, vandaag de dag is dat minder een issue, nu snelle processoren betaalbaar zijn en RAM geheugen erg goedkoop is. Maar hele lappen teksten sIFR-en “on the fly” transformeren vergt in de praktijk toch te veel rekenkracht van de computer van de bezoeker, en dus tijd, al is het maar een fractie. Zo’n fractie kan echter een groot verschil maken in de bruikbaarheid van de site. Vandaar dat sIFR in de praktijk vaak alleen word gebruikt voor headlines.
• De custom stylesheet van de bezoeker zal de getransformeerde tekst niet “overrulen”.

FLIR

FLIR (Facelift Image Replacement) doet wat sIFR in feite doet, maar dan “server side”. Het is feite een combinatie van een PHP script en Javascript.

Hoe werkt het?

1. Een Javascript checked welke stukken tekst “geFLIRD” mogen worden en zend deze informatie naar de PHP-server.
2. Daarna genereert het PHP-script een afbeelding van bijvoorbeeld een kop in een specifiek lettertype.
3. De Javascript vervangt die blokken systeemtekst met een afbeelding van de tekst in het juiste lettertype.

Voordelen van FLIR

• geen plugins zoals Flash nodig
• in een aantal browsers (IE7, Opera, Firefox 3) zal met het schalen van tekst ook images schalen, wat een voordeel is voor gebruikers met een visuele handicap.

Nadelen van FLIR

• Het vergt rekenkracht, maar ditmaal vooral aan de serverside.
• Wanneer systeemtekst vervangen word door een <img …/> met alt tekst, zal bij het selecteren door de bezoeker van deze tekst bij de meeste browsers de alt-tekst worden geselecteerd, al is het natuurlijk niet mogelijk om een enkel woord uit een zin te selecteren binnen een <img …/>: de gebruiker selecteerd de complete image, en dus de complete alt-tekst.
• Het vereist een PHP-server, en is dus niet bruikbaar voor webapplicaties die bijvoorbeeld werken op .NET (al zijn er al wel pogingen tot een een ASP.NET port). Update: Bart de Vries heeft een vergelijkbare techniek ontwikkeld genaamd bATR, dat gebruik maakt van .NET.
• De custom stylesheet van de bezoeker zal de getransformeerde tekst niet “overrulen”.

Over de auteur

Carsten Altena

Carsten Altena is een grafisch ontwerper met een affiniteit voor clean, lean, user-centered en toegankelijk webdesign. Naast grafisch ontwerp heeft hij ook veel ervaring als front-end developer, en was hij een van de eersten in Nederland die webstandaarden zoals XHTML en CSS omarmden. http://www.carstenaltena.nl/creeert/