Tegenwoordig wordt het overal gebruikt: text-replacement. Dit is het vervangen van een lettertype op een website door een lettertype wat niet bij de gebruiker geïnstalleerd is. Vaak worden deze technieken gebruikt bij h1 of h2-titels zodat deze mooier ogen en duidelijk opvallen. In deze blogpost wil ik even dieper ingaan op het gebruik van 2 text-replacement methodes: Cufon en sIFR.

Er worden verschillende manieren gebruikt voor text-replacement:

• CSS3 (font-face)
• fLIR
• typeface
• sIFR
• Cufon

Deze laatste 2 worden het meest gebruikt vandaar de keuze om deze te vergelijken in deze blogpost met een overzicht van de voor- en nadelen.

Het voordeel van text-replacement is dat SEO-gewijs de tekst die gereplaced wordt nog altijd in de broncode staat en dus door de zoekmachines geanalyseerd zal worden. Dit is dus veel beter dan het gebruik van afbeeldingen i.p.v. tekst, zoals het vroeger wel eens gebeurde.
 

sIFR

sIFR of voluit Scalable Inman Flash Replacement, biedt de mogelijkheid om text te vervangen door flash. Voor het gebruik van sIFR is JavaScript vereist en de flash plugin moet geïnstalleerd zijn. Indien dit niet het geval is zal de browser de text in de traditionele css-gebaseerde stijl weergeven.

Voordelen

• Het is makkelijker dan de image-replacement techniek.
• Het wordt gelezen door screenreaders.
• Tekst is selecteerbaar.
• Heeft enkele plugins (bv.: JQuery sIFR plugin).
• EULA of copyright rechten van het font worden niet geschonden.
• Schaduw, anti-aliasing en andere text-effecten kunnen in Flash toegepast worden.

Nadelen

• JavaScript mag niet geblokkeerd worden.
• Flash plugin moet in de browser geïnstalleerd zijn.
• Adobe flash is nodig om de font-file te genereren. Tegenwoordig kan dit ook wel via een sIFR generator maar deze zorgt voor moeilijkheden bij speciale karakters.
• Bij overdreven gebruik van sIFR op een pagina zal het even duren voor de requests naar de Flash-file, CSS en JavaScript-files afgehandeld worden wat kan resulteren in het knipperen van de tekst.

Cufon

Cufon werkt net zoals SIFR met JavaScript maar hier stopt meteen de vergelijking daar Cufon geen Flash gebruikt. Een font kan gemakkelijk omgezet worden naar een JavaScript file om zo te includen binnen de website. Eens dit gebeurd is vereist Cufon nog één enkele regel code om ervoor te zorgen dat het geactiveerd wordt.

Voordelen

• Snellere laad-tijd dan sIFR.
• Enkel JavaScript moet geactiveerd zijn.
• Fonts zijn snel om te zetten naar een JavaScript file via een font-generator.

Nadelen

• Tekst is niet selecteerbaar.
• Copyright en EULA problemen omdat het font embedded wordt.
• Line-height wordt niet bij alle DOC-types even goed ondersteund.

Mijn mening

Ondanks enkele nadelen van Cufon, heeft deze techniek toch een streepje voor op sIFR. Cufon is het snelst, werkt héél eenvoudig en vereist geen installatie van de Flash plug-in. Zodra er trouwens een cross-browser oplossing is voor het selecteren van tekst (dit werkt enkel in Opera niet), zal ook deze door de ontwikkelaars vrijgegeven worden.
Net zoals zo vaak geldt ook hier "less is more", het is mooi om te gebruiken en kan een extra dimensie geven aan een website, maar zodra de performance van je website eronder lijdt is het gebruik ervan toch af te raden.
 

Nuttige links

Cufon info-pagina
De officiële Cufon-pagina

Cufon font-generator
Gemakkelijk een JavaScript-file van je font genereren

sIFR info-pagina
De officiële sIFR-pagina

sIFR font-generator
Gemakkelijk een SWF-file van je font genereren