Aquesta setmana a la feina he dedicat una estona a analitzar i comparar breument tres “tècniques” (o maneres) per a aconseguir usar noves fonts online sense necessitat que l’usuari les hagi de tenir instal·lades, buscant una alternativa a les ja molt (potser massa) vistes fonts que s’usen a internet fins que no arribi el dia en que tots els navegadors suportin la propietat CSS @font-face.
El copio aquí, obert a comentaris, suggerències, advertències, correccions….
ASPECTES COMUNS
Tant sIFR com Typeface i Facelift ofereixen una solució per a aplicar diferents tipus de fonts a l’hora de maquetar una web, sense haver de crear manualment una imatge per a cada bloc de text. Les tres es basen en arxius específics per a cada font, sense necessitat de que l’usuari final l’hagi de tenir instal·lada.
CARACTERÍSTIQUES DE sIFR (Scalable Inman Flash Replacement)
1. Es basa en arxius de fonts generats en flash (un arxiu per a cada font), tot i que també es poden generar amb un conversor (http://www.sifrgenerator.com).
2. Requereix dels arxius de fonts, un arxiu CSS i un arxiu javascript. Pel que fa a la maqueta no implica cap modificació.
3. Permet “seleccionar” el text generat.
4. Permet jugar amb les següents opcions a l’hora del “reemplaçament”: Color del text, Color d’un enllaç (i el seu hover), Color del Background (inclou transparent per alguns navegadors), Transformació a Uppercase/Lowercase, Paddings…
5. Podem definir que el text que es reemplaçat aparegui o no durant la càrrega del Flash.
6. Requereix que l’usuari tingui el Flash Player instal·lat, però en cas de no tenir-lo o bé si el JavaScript està desactivat, la pàgina es visualitza amb els estils assignats (un 98% dels usuaris té Flash instal·lat).
7. Permet indexació SEO (ja que el text existeix realment, sota el Flash).
8. S’obté una millor qualitat visual del text (no s’observen “desenfocs”).
9. Té add-ons com per exemple el jQuery sIFR Plugin ( http://jquery.thewikies.com/sifr)
http://www.disenorama.com/tutoriales/sifr-facil-con-jquery
* Article interessant:
http://www.divitodesign.com/2008/09/implant-sifr3-healthy-alternative-browser-tex/
CARACTERÍSTIQUES DE TYPEFACE
1. Es basa en arxius de fonts generats amb javascript (utilitzant un “conversor”).
2. Requereix dels arxius javascript de les fonts, un arxiu CSS i un arxiu javascript. Pel que fa a la maqueta implica assignar una classe als elements que volem modificar.
3. Permet “seleccionar” el text generat però l’usuari no veu què està seleccionant.
4. El text queda un pèl “desenfocat” (http://typeface.neocracy.org/examples.html).
5. El text generat és imatge però el text original existeix al codi HTML (i per tant, és posicionable).
6. Només requereix carregar el javascript, i és una mica més ràpid que sIFR.
7. L’estil de la font s’indica mitjançant CSS (tot i que es cridi a l’arxiu js).
* Article interessant:
http://www.divitodesign.com/2008/11/render-text-with-javascript-typeface-js/
CARACTERÍSTIQUES DE FACELIFT (FLIR)
1. És combinable amb jQuery, prototype, scriptaculous o mootools.
2. Genera PNGs amb fons transparent (però no té cap problema amb IE6).
3. El text reemplaçat es manté en el codi i per tant s’indexa.
4. Permet fer servir alguns plugins: http://facelift.mawhorter.net/doc/plugins-quickeffects
5. Els estils els assignem a través de l’arxiu CSS.
6. Requereix d’arxius javascript, CSS, i PHP.
* Article interessant:
http://www.divitodesign.com/2008/10/install-flir-typography-solution-for-the-web/
Conclusió personal: Després de provar i mirar-ne els resultats (però sense encara una opinió ferma, em falten més proves “en real”), em decanto o bé per la opció de sIFR (tot i incloure Flash) o bé per la opció de FLIR. Els resultats que dóna Typeface no em satisfan gràficament parlant (si és cert que és el més còmode d’aplicar).
Val a dir que no seria recomanable que l’ús d’aquestes “tècniques” per usar noves fonts online s’apliquessin a “tota la web”, ja que el resultat seria una web lenta i segurament poc llegible. Personalment crec que és una solució molt bona per a tractar títols i subtítols i altres elements puntuals com ho poden ser les cites, obtenint així una mica més de joc amb el disseny i (si es fa bé) aconseguint una estructura més llegible i clara.
Entrades relacionades:
