Ai, que maco aquest moment de triar les tipografies per al teu nou disseny web.
Descobreixes una Serif preciosa des del teu mac. Et fas il·lusions de poder utilitzar-la en el teu nou i flamant disseny web. Peeeero, abans d’usar-la passes a veure-la per un pc que navega amb Firefox, per allò de comprovar que es veu igual de fantàstica i llavors: Nooooo! S’ha convertit en una font rosegada i de definició pèssima!
Bé, abans de posar-nos esquizos i córrer com un pollastre sense cap per l’estudi cal seguir dues senzilles normes:
- NORMA Nº1- Saber quina tipografia triar. Després comentem alguns aspectes essencials.
- NORMA Nº 2- Acceptar que tenim un problema de limitació tecnològica. Els navegadors i sistemes operatius interpreten les fonts de forma diferent. Dóna-li la culpa al motor de renderització, al filtre gràfic, i fins i tot al propi usuari que ha decidit canviar la grandària de la font (“la poso més gran, que així es veu millor”). Però no podem tenir el control absolut de visualització. Ens hi hem de posar fulles.
(Chrome vs safari FOTO de http://clagnut.com/)
Donarem per assumida la norma número 2, així que ens centrarem en escollir bé la nostra tipografía web. Comencem.
On trobar tipos per a web
Tenim 3 opcions:
- Fonts del sistema operatiu, gratuïtes. Són les fonts que mai donaran problemes i tots coneixem pero també tenim molt vistes: Georgia, Verdana, Tahoma (Gracias Matthew Carter, por diseñarlas) Impact, Arial, Times New Roman…
- Webfonts que podem comprar a fundicions o distribuïdores como Lynotype https://www.linotype.com/es/, Fontfont https://www.fontfont.com/, House Industries http://www.houseind.com/… o llogar-les per un temps mitjançant subscripció, com ens proposen des de Typekit https://typekit.com/.
- C) Google Fonts. L’ alternativa més utilitzada, no per ser la millor, sinó per ser gratuïta. Per cert, han renovat no fa massa la seva interface i és molt pràctica. https://www.google.com/fonts
Existeixen centenars de posts sobre les millors Google Fonts. Així que per no fer-nos pesats, us deixem alguns dels moltíssims links que podeu trobar arreu i no aportarem l’enèssima short list.
https://www.typewolf.com/blog/most-popular-fonts-of-the-year
http://www.esandra.com/20-fuentes-gratis-excelentes-para-diseno-web/
https://webdesignersjourney.wordpress.com/2013/06/12/10-great-modern-google-font-combinations/
COM TRIAR UNA TIPOGRAFIA.
Ara que ja sabem on anar a buscar les tipografies, cal triar-les. Triar una tipografia té molt d’emocional, però cal parar esment al fet que es llegeixi bé, no cansi, aguanti cossos petits… L’ideal és triar dos, màxim tres tipografies per al nostre disseny web, que generin contrast. Crear amb elles jerarquies que situïn a l’usuari (titular, subtitular, text genèric…) és imprescindible. La tipografia forma part del branding així que com a bons professionals intentarem no cometre barbaritats en el nostre disseny web. Aquí van alguns consells:
1.- MIRA LA TIPOGRAFIA EN DIFERENTS GRANDÀRIES
Tries una tipografia, la veus primer a una grandària de cos generós.
Funcional, moderna, versàtil, sí; però recorda veure-la també a un cos petit. No oblidis que la tipografia en píxel no és la mateixa que en paper. T’evitaràs disgustos.
2.-ASSEGURA’T QUE LA FONT TÉ TOTES LES VERSIONS QUE NECESSITES
Sembla obvi, però ens emocionem de vegades amb una tipografia i hem d’assegurar-nos que la família sigui completa. Montserrat, és per exemple una sans serif moderna de look fresc i que enamora a simple vista. Podràs usar-la en titulars, menús o text genèric, però mai posar-la en cursiva. La versió itàlica no existeix, i és una llàstima.
3.-COMBINA TIPOGRAFIES DE FORMA COHERENT
Donem per fet que sabrem combinar tipografies. Però pels no professionals, una eina interessant que ofereix Google Fonts és la llengüeta de “pairings”. Allí pots veure tipografies complementàries amb les quals combinar la teva font.
Us deixem també un link interessant de Themearmada http://blog.themearmada.com/8-amazing-google-font-combinations/ on combinen diferents tipografies de Google Fonts.
4.- EINA AMIGA:
COM PAL·LIAR LA NORMA NÚMERO 2
Hem acceptat que els navegadors i sistemes operatius ens fastiguegin, ok. Però una cosa és acceptar-ho a consciència i l’altra mirar cap a un altre costat. Abans de llançar qualsevol pàgina web us recomanem revisar-la en els diferents navegadors i sistemes. Si les variacions no són significatives, avanti. Si els canvis són abismals, sempre podrem corregir l’estil, afinar els cossos o triar una altra tipografia semblant que es comporti millor.
Així que…“Déu de l’html, sí, ja sé que això del flash i el java et va ocupar molt temps però podries evolucionar el tema tipografia web un pel més? Vinga, quan ho tinguis, ens avises i ho expliquem a Xoot”.
