Menu
En aquest petit article le vull parlart-te de la importància de saber escollir bé les tipografies d’una pàgina web, quines utilitzar, i com aplicar-les, i com NO fer-ho.
Escollir una bona lletra ajudarà als usuaris a entendre millor el contingut d’una pàgina web i en dependrà, en part, el temps que es quedin o marxin de la web. Optimitzar-la, fa millorar l’experiència d’usuari.
La tipografia és un factor clau a l’hora de dissenyar la web, perquè juga un rol important a l’hora de comunicar els teus productes o serveis.
Som-hi!
Quantes tipografies utilitzar en una web?
Hi ha tantes tipografies per escollir, que triar-les pot ser complicat, moltes vegades és difícil decidir-se.
La idea principal és buscar-ne una, màxim dos, que millorin la llegibilitat dels textos.
Amb una, seria suficient, jugant amb els seus estils tindríem la varietat necessària, i a més, en utilitzar-ne només una, es reduirà el nombre de peticions que realitza la pàgina web, la qual cosa millorarà la velocitat de càrrega d’aquesta.
Però entenent que també es busca l’estètica del disseny, utilitzar-ne dues, també seria molt correcte. Una per títols i l’altre pels textos. Però assegura’t que combinen bé entre elles, després veiem com.
Exemple d’estils: Jugant amb la tipografia Open Sans i els seus estils.
Com combinar tipografies. S’han de complementar bé!
Tenim dues opcions:
- Utilitzar la mateixa tipografia a tota la pàgina, tant per títols com per paràgrafs.
- Fer servir dues tipografies, una per títols i una per paràgrafs.
Si esculls emprar-ne dos, és molt important que combinin i es complementin bé entre elles.
Perquè això passi, una opció que quasi mai falla, és utilitzar una Serif per títols i una Sans Serif per paràgrafs. O a l’inrevés, també funcionaria.
N’existeixen de molts tipus i cal anar amb compte, cada una transmet una personalitat diferent, algunes són més elegants, altres informals, algunes són modernes… millor no barrejar-les, cal transmetre dins d’una uniformitat de criteris.
Busca quin tipus d’imatge i idea vols transmetre i tria la tipografia adequada d’acord amb això.
Quina triar? Tipus de Fonts
A l’hora d’escollir una tipografia, hem de saber que n’hi ha de diferents tipus:
- Serif
- Sans Serif
- Script
- Handwriting
- Decorativa
- Etc
Els dos grups de fonts principals, serien la Serif i la Sans Serif.
Serif
Aquesta tipografia és la que coneixem per tenir petites decoracions, ubicades, generalment, als extrems de les líneas dels caràcters.
Aquest tipus de font, és utilitzada per transmetre formalitat, tradició, delicadesa o refinament.
Alguns exemples serien la Times New Roman o Century Schoolbook.
Sans Serif (sense serifa)
Al contrari de l’anterior, aquest tipus de font, es caracteritza per tenir els extrems dels caràcters rectes, sense decoració.
Són tipografies més modernes, netes i clares.
Els exemples de Sans Serif més coneguts serien la Verdana, Arial, Montserrat, Roboto…
Script o Handwriting
Aquest tipus de lletres són les que simulen l’escriptura feta a mà.
Gràcies a les traces irregulars, seran un punt d’atenció en el teu disseny però cal anar en compte, dificulten la lectura dels textos. És millor utilitzar-les en títols o cites concretes i no en paràgrafs de text.
En resum
Cada tipus de lletra pot comunicar i transmetre conceptes diferents, depenent del contingut de la teva web, t’interesserà més fer-ho amb un estil o un altre.
Tamany i color adequat per les tipografies
Tamany
En una web, exiteixen diferents tamanys de text.
Els paràgrafs <p> i els títols <h1> <h2> <h3>… Sent H1 un títol principal, H2 un subtitol d’H1, H3 un subtitol d’H2 i així fins que es necessitin subtítols.
El millor és configurar el tamany de cada tipus de text abans de començar a entrar contingut des de WordPress. Així evitem trobar-nos paràgrafs a 16px i d’altres a 18px.
Per això, es configura previament, i a mesura que introduim el text, ja no cal pensar-hi, cada text agafa el tamany amb el que ha quedat establert. Això també ens pemet, que si mai volem fer un canvi de tamany, aquest s’apliqui automàticament a tot el text de la web.
Per triar el tamany del text, existeixen uns criteris “base” que ajuden a que el text sigui llegible fàcilment.
No totes les tipografies tenen les mateixes proporcions, per això els intervals recomanats.
- Paràgrafs entre 14 i 18 px.
- H1 entre 36 i 42 px.
- H2 entre 30 i 36 px.
- H3 entre 24 i 30 px.
- H4 entre 20 i 24 px.
En dispositius mòbils, el tamany dels títols principals, seria menor.
Color
Personalment, m’agrada treballar amb colors fàcils de llegir, text fosc sobre fons clars. En aquest punt, hi ha diversitat d’opinions, cada cop hi ha més gent que prefereix un fons fosc amb lletra clara, el contrast és major, però a la llarga cansa més.
El fons negre, seria més adequat per la presentació d’imatges, les faria destacar molt més. El text, millor sobre un fons clar, o t’imagines un llibre o un diari amb les pàgines fosques?
La meva recomanació pel color del text, és utilitzar colors molts propers al negre com el #333333 o el #444444.
On trobar tipografies.
Anem a veure algunes eines i consells que ens poden ajudar.
Google Fonts
El més recomanable és utilitzar Google Fonts, perquè moltes de les seves tipografies ja venen implementades en els temes i maquetadors de WordPress, d’aquesta manera, no cal descarregar-les i pujar-les a la web.
Des de Google Fonts, podrem escollir còmodament les tipografies que més ens agradin. Ens permet, entre altres opcions, a:
- Escriure un text mostra personalitzat, i veure les diferents fonts, representades en aquest text.
- Filtrar per diferents tipus de fonts, amb serif, sense, text manual…
- Filtrar per idioma, funció important, que permet que el text tingui tots els accents, apòstrofs o lletres específiques del nostre idioma.
Google ens mostrarà el text en tots els tipus de fonts, o en els tipus que hem filtrat prèviament. La llista és infinita.
En clicar damunt d’una mostra, podrem veure-la amb més detall i també trobarem tota la informació sobre l’autor, llicències, etc.
Adobe Fonts
Una altra opció és Adobe Fonts que ens permetrà utilitzar les seves fonts afegint codi CSS a la web.
L’eina ens deixa filtrar les tipografies per diferents paràmetres fins a trobar la que millor s’adapti al nostre contingut.
Com saber la tipografia d’una pàgina web?
Si has estat consultant altres pàgines i has trobat una tipografia que t’agarada, hi ha una extenció de Google Chrome que ens ajudarà a saber quina és: Fonts Ninja.
Activant l’extensió, apareixerà una finestra flotant amb la informació de les tipografies, a més podràs posar-te sobre els textos amb el cursor, i la identificarà individualment, donant informació sobre el tipus, el tamany, la mida…
Com instal·lar una extenció?
1. Des del navegador, obrir el controlador de Google Chrome. (Tres punts verticals, a la part dreta de la pantalla)
2 i 3. Menú Més eines>Extensions
Des de la pantalla Extensions, clicar damunt les 3 linies horitzontals. Seguidament, al final de la finestra, a “Obre Chrome Web Store”
Un cop al Chrome Web Store, només ens quedar buscar l’extensió i instarl·lar-la.
Un cop instal·lada, la podrem utilitzar des del navedador, quedaran visibles a la dreta de la barra d’adreces.
Les tipografies més utilitzades
Amb una simple cerca a Google Fonts, podem seber quines són les tipografies més “trending” ara mateix.
Aquí tens la llista!!
Conclusions
Com pots veure, és difícil triar una tipografia a causa de la gran quantitat per escollir que hi ha. Espero que aquestes pautes t’ajudin a buscar la millor pel teu projecte.
Et deixo un petit resum de tot el treballat i alguns consells:
- Utilitza com a màxim 2 tipografies, una pels títols i l’altre pels paràgrafs.
- No triïs tipografies molt estranyes, millor ser tradicional que innovador.
- Assegura’t que la tipografia escollida tingui totes les lletres, accents i apòstrofs que necessita el teu idioma. I que treballi, com a mínim amb 4 estils diferents (tipus de negretes, cursives…)
- Recorda treballar amb la mida i color adequats.
- Respectar espais entre línies i paràgrafs, no crear blocs de text molt extensos, treballar els salts de línia. I sobretot, que el text, no vagi de marge a marge fent servir tota la pantalla, utilitzant marges amples. Si el text respira, és més fàcil de llegir.
