Typografie en Websites

Gepost op in Design, Development

Het is voor klanten zoiets natuurlijks, dat de mededeling dat 't niet kan soms overkomt als "het kan wel, maar ik kan 't niet". Het toepassen van eigen typografie is niet zonder haken of ogen helaas, en moet altijd even goed bekeken worden van te voren.

Kijk 's om je heen op deze website: Ik gebruik 2 fonts die normaliter niet in 'n webbrowser gebruikt kunnen worden (Bistro Script en Museo), het zijn namelijk geen "webfonts". Toch gebruik ik ze: ze zitten gelukkig in de verzameling fonts van Typekit, een vrijwel altijd werkende implementatie van eigen lettertypes. Maar wat nou als je lettertype niet in de verzameling van Typekit zit? Er zijn 'n aantal oplossingen om toch je eigen lettertypes te gebruiken.

Typekit dus

Typekit is een commerciëel bedijf, dat deals heeft gesloten met grote lettertype-ontwerpers. De methode die ze gebruiken om deze lettertype's in een website op te nemen is aanzienlijk anders dan de twee methoden die ik hierna bespreek.

Na het registreren op typekit.com krijg je de mogelijkheid om sites te registreren. Voor elke site die je toevoegt krijg je 'n stukje Javascript-code toegewezen, welke je in je site op kan nemen. Vervolgens word je doorverwezen naar de verzameling lettertypes die ze aanbieden (as we speak 511 stuks), en is er naast elk lettertype de mogelijkheid om dat lettertype aan je site toe te voegen. Je krijgt vervolgens "font-families" toegewezen, welke je in je stylesheets kan gebruiken alsof 't een normaal webfont is.

Vervolgens implementeert het stukje Javascript dat je eerder had gekregen de @font-face methodiek. Dit is een methode die non-webfonts door de bezoeker op laat halen, maar die zelden gebruikt werd, vanwege de vele verschillende formaten die je moet gebruiken om verschillende browsers te bedienen (als ik me niet vergis moet je in totaal 6 keer per lettertype een verwijzing aan maken om iedereen te bedienen). Op deze manier worden de vervangen stukken teksten 'n stuk natuurlijker in je site opgenomen dan bij Cufon en sIFR, en is na de eerst-bezochte pagina ook niet meer zichtbaar dat de lettertypes ingeladen worden (wat bij Cufon en sIFR wel 't geval is).

Cufon

Cufon gebruikt Javascript om 'n heel stoer trucje uit te halen met je lettertype.

  1. Upload je lettertype
  2. Een script van Cufon zet je lettertype om in bogen (SVG).
  3. Na het laden van je pagina zoekt Cufon alle gedefinieerde elementen op, analyseert ze en vervangt elke letter met de bijbehorende set "bogen".

In principe ben je vrij om elk lettertype door hun script heen te halen, met een hele belangrijke voetnoot: De gebruikslicentie van het lettertype moet het opnemen in 'n webpagina toestaan. Oh, maar dat mag toch overal mee? Nee dus. Veel lettertypes staan dit juist expliciet niet toe, vanwege allerlei veiligheidsimplicaties waar je vast nog niet over had nagedacht.

Op Typekit na is dit de beste manier om eigen fonts in websites op te nemen. De enige afhankelijkheid is de aanwezigheid van JavaScript.

sIFR

sIFR staat voor Scalable Inman Flash Replacement. Zoals de naam misschien al doet vermoeden, gebruikt deze methode Flash om de gedefinieerde elementen te vervangen met je eigen lettertype. Hoewel de mogelijkheden van sIFR prima in orde zijn door de grondslag in Flash, brengt dit gelijk wel 'n zwakte met zich mee: behalve de afhankelijkheid van Javascript, is er ook nog 'n afhankelijkheid van Flash (waarmee bijvoorbeeld de iPhone/iPad al meteen gediskwalificeerd wordt). Als Cufon en Typekit geen opties zijn, is sIFR je beste optie.