Select Page
La Comic Sans entra dins l’escola!

La Comic Sans entra dins l’escola!

És habitual que trobem la famosa tipografia Comic Sans en tot tipus de documents. Certament la seva utilització està molt estesa, tot i ser una tipografia absolutament menyspreuada pels dissenyadors gràfics. Jo mateix com a dissenyador no l’ha he usat mai em sembla. Buscant una mica per internet un pot veure tot tipus de pàgines que en parlen malament i webs anti Comic Sans. És lògic!

L’ordre del dia del comité de direcció on treballava, presentacions de tot tipus, avisos, diplomes, infografies … qualsevol informació pot esser víctima d’aquesta tipo. No fa gaire, el trofeu de la Copa del Rei va ser gravat amb aquesta lletra…

Ara puc afegir un nou capítol en aquesta penosa història, i em toca de ben aprop! Els meus fills estan aprenent a llegir amb Comic Sans! Aaarg!! A l’escola fan exercicis amb una pissarra electrònica, mouen lletres, construeixen frases i juguen amb paraules. Segurament per desconeixement i perquè aquesta font està instal·lada per defecte en els Pc’s és la escollida. Quina pena!

Per evitar qualsevol tipus de seqüela (aquí et pots imaginar les pitjors perversions i cataclismes del món mundial) en el seu desenvolupament prepararé un CD amb unes 20 tipografies variades i les portaré a l’escola.

La Comic Sans ha entrat dins l’escola però la foragitarem!! 🙂

Web fonts i @font-face

La manera com es mostren i dibuixen les tipografies a la web està canviant. Des de fa un temps s’estàn ampliant les tècniques i sistemes de fer-ho d’una manera efectiva i segurament més definitiva.

Fins fa no gaire, per mostrar un titolar amb una tipografia no inclosa per defecte en el sistema, els dissenyadors generàvem una imatge, i un cop ajustada de colors i pes (podia ser un jpg o gif), la implementàvem a la nostra web.

Aquesta manera de fer presenta grans inconvenients, ja que tot plegat pesa molt (imagina una web on tots els títols son gifs o jpg) i sobretot fa impossible que els cercadors puguin llegir la imatges. Aquest darrer punt és fonamental de cara a donar a conèixer el nostre site. Si no t’indexa, i bé, Google, no existeixes, no hi ha negoci possible. També usar imatges d’aquest tipus per emular el text és un gran problema davant de canvis o si volem generar un contingut dinàmic.

Alternatives actuals

En aquest escrit de Visualpanic, Com usar noves fonts online, podeu tenir una bona visió de les tècniques més o menys actuals (preneu en pinces això d’actuals, eh?!) per no utilitzar imatges (gif, jpg, png). També, amb més detall, trobareu molt bona informació en aquest altre post de Smashing Magazine: Rich typography on the web techniques and tools. I més també en l’article Real web type in real web context de A List Apart.

Podem agrupar les opcions en dues categories
Tècniques substitutives,  que d’alguna manera emulen la font desitjada.
sIFR, P+C DTR, Cufón, Typeface.js, Facelift, SIIR, sIFR Lite, Dynamic Text Replacement (DTR), PHP Image Replacement, FontJazz,

Tècniques inclusives (oferides com un servei o llicència d’utilització). Anexen la font que volem mostrar als estils i còdi de la pàgina.
Typotheque, Kernest, Typekit, FontDeck

La millor opció

De totes les possibilitats jo em decanto per l’ús de tipografies Open Type per incloure la font (CSS @font-face) per d¡ferents motius.
No intenta imitar o reemplaçar res, És la font original!
Gran varietat de fonts a escollir de les cases de tipografia
Edició en Css com un altre element més. No afegeix gaire codi extra a la web i dóna les opcions d’estil directament.
Regles d¡us aprovades per W3C.

Alguns punts millorables.
Compatibilitat browsers. No tots els browser en permeten la visualització (cal tenir la font alternativa de sistema pensada )
Pes fitxers tipos.otf. Al tractar-se de la tipografia otf inclou tots els glifs (). No es pot fer la càrrega d’aquells caracters que necessitarem exclusivament.

Futur

Està clar que la gran diversitat de maneres de mostrar les tipogarfies online no perdurarà, o millor dit, alguna d’elles s’extendrà per convertir-se en standard i la resta quedaràn com a residuals. No forçosament serà la millor la que guanyi. Hi haurà altres factors, però principalment seràn factors tècnics.

Jo aposto per la utilització de @font-face en un escenari de compatibilitat en la majoria dels browsers. En aquest moment tots els dissenyadors que fan feina online hauràn de dominar els estils CSS perfectament, per ajustar la tipo. Sinò aquesta tasca la faran els maquetadors / programadors, amb la pèrdua de control sobre el disseny que a vegades pot suposar. També, i aquí espero fallar 100% en la predicció, la relativa facilitat d’aplicació de @font-face omplirà la web de sites amb uns bonics h1 pintats amb la Comic Sans!!! 😉

Liza, lettres d’amour

Underware Liza

La gent de Underware ha llançat una tipografia que trobo boníssima, molt bonica. Es tracta de la tipo Liza. No és una exepció dins de les tipos dissenyades per aquesta companyia. Nomès cal fer un cop d’ull a la seva web i al portfoli. Per exemple, la Bello, que també és excel.lent.
La Liza és una tipografia de tipus script, i està desenvolupada en 4 estils: Liza Text Pro, Liza Display Pro, Liza Caps Pro i Liza Ornaments Pro. A mi m’encanta. I m’agrada també gràcies a la feina d’explicació i documentació que acompanya a la tipografia. És d’una qualitat notable. Per exemple el PDF anomenat Liza’s user guide, amb 34 pàgines amb mostres d’utilització, lligadures, característiques tècniques, etc… Brutal! Si algú em vol fer un regal de 150€ ja sap… 😉


Retolació USP Institut Universitari Dexeus

Estic sorprès d’haver descobert que la retolació del nou Hospital Intitut Universitari Dexeus ha guanyat un premi Laus de disseny. Sorprès, ja que creia que no era precisament un bon exemple. La troballa ha estat fruit de la petita recerca previ a escriure el post. Qui haurà fet la retolació? Doncs la resposta de l’autoria és l’estudi de Claret Serrahima. I sembla ser que els entesos en certifiquen el treball.

Jo pensava que la senyalització en un espai com és un hospital havia de complir unes normes (no escrites) de claredat, senzilleza i facilitat de lectura. En definitiva abandonar qualsevol pretensió estilística.

Doncs no. Mola més tallar el text, jugar amb diferents tamanys en el rètol i provar diferents alineacions! Proposo aplicar el mateix disseny als prospectes de les medicines que dispensin, receptes, històries clíniques i material quirúrgic.

Dexeus 1

Dexeus 2

Dexeus 3

El nou hospital és de l’arquitecte Ramon Sanabria.