Lettertypes op het web, deel 2

17 maart 2009 om 11:20

Inleiding

Op zoek naar de Ene manierIn 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

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

Nadelen van FLIR

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/
  • http://www.denieuwezaak.nl Menno

    …voor het geval alleen HTML tekst mogelijk is: http://www.typetester.org

  • http://www.joelcox.nl Joël Cox

    Ik zou graag een kleine correctie willen geven over de Typeface.js oplossing.
    – Je hebt PERL slecht eenmalig nodig om TrueType om te zetten naar het typeface.js formaat. Dus niet standaard op de server. Een keer runnen, output op de server gooien en klaar.
    – Browsers die het element ondersteunen, en dus SVG kunnen weergeven, selecteren de tekst wel, maar geven geen visuele feedback zoals bij systeemtekst.

    Verder leuk stukje. Hup W3, tijd voor standaardisatie!

  • http://www.joelcox.nl Joël Cox

    Dat moet dus zijn canvas element tussen , maar die stript WordPress blijkbaar. 😉

  • http://www.carstenaltena.nl Carsten Altena

    Thanks Joel, je hebt inderdaad gelijk! Heb het even aangepast.

  • http://www.kiitos.nl Pieter ter Berg

    Nog een (heel) klein puntje: Er is een verschil tussen ‘graceful degradation’ en ‘progressive enhancement’, zie ALA.
    Waarbij de laatste hier van toepassing is en eigenlijk (volgens mij) de betere oplossing.

  • http://www.carstenaltena.nl Carsten Altena

    Pieter, dank je. Ik kende nota bene dit artikel van Alistapart, maar moet tijdens het schrijven van het artikel deze twee door elkaar hebben gehaald.

  • http://www.pasz.nl Pasz

    Goed gedaan, Knazzen!