Els colors i la tipografia d’una web són la primera impressió que rep un visitant: abans de llegir ni una sola paraula, ja s’ha format una opinió sobre l’empresa. Els colors comuniquen el caràcter del negoci i la tipografia —les lletres— decideix si el text es llegeix amb comoditat o cansa la vista. No és una qüestió d’estètica per a dissenyadors: és una qüestió de confiança, de llegibilitat i, en última instància, de vendes. En aquest article t’expliquem com triar els colors i les lletres de la web de la teva empresa amb criteri, sense necessitat de saber disseny. Pensat per a propietaris de negocis que volen una web professional que transmeti el que són.
En resum
- Els colors comuniquen abans que les paraules: han d’estar alineats amb el que el teu negoci vol transmetre.
- Tria tres colors i no te’n surtis: un de principal, un de secundari i un de neutre.
- El botó d’acció ha de destacar clarament sobre la resta: si no es veu, no es prem.
- Text fosc sobre fons clar, lletres prou grans i contrast alt: el que no es llegeix no ven.
- Màxim dues tipografies —una per a titulars i una per al text— i comprova sempre els accents, la ce trencada i la ela geminada.
- Els colors i les lletres de la web han de ser els mateixos que els de la resta de la teva marca.
Continguts
- Per què els colors importen més del que sembla?
- Quants colors ha de tenir la web de la teva empresa?
- Com ha de ser el color del botó d’acció?
- Com s’aconsegueix que el text es llegeixi bé?
- Com es tria la tipografia d’una web?
- Com es combinen els colors sense ser dissenyador?
- Per què els colors i les lletres han de coincidir amb la teva marca?
- Quins errors cal evitar en colors i tipografia?
- Preguntes freqüents
Per què els colors importen més del que sembla?
Els colors comuniquen abans que les paraules. Un blau fosc transmet serietat i confiança —per això l’usen bancs i asseguradores—; un verd evoca natura i salut; un taronja o un groc transmet energia i proximitat. No és màgia: són associacions culturals que tots compartim i que la teva web activa en segons.
Això no vol dir que hagis de triar el color «psicològicament correcte» com si fos una fórmula. Vol dir que els colors han d’estar alineats amb el que el teu negoci vol transmetre. Una funerària amb una web de color rosa xiclet generaria una dissonància evident; una ludoteca amb una web gris i seriosa, també.
Quants colors ha de tenir la web de la teva empresa?
Una norma senzilla que funciona gairebé sempre: tria tres colors i no te’n surtis. Més de tres colors i la web comença a semblar un circ. Menys d’això i costa diferenciar les seccions. Tres és el punt dolç per a la immensa majoria de negocis.
| Paper | Què és | On es veu | Exemple |
|---|---|---|---|
| Color principal | El color de la teva marca, el del logotip | Capçaleres, botons importants, titulars | El blau fosc d’un banc o el verd d’una clínica |
| Color secundari | Un color que combina amb el principal | Detalls, icones i seccions secundàries | Un to suau que acompanya sense competir |
| Color neutre | Un gris fosc per al text i un blanc o gris molt clar per als fons | Text corrent i fons de les pàgines | Text gris fosc sobre fons blanc |
El color principal és el que més es veurà. El secundari serveix per a detalls, icones i seccions secundàries. Els neutres són els colors que fan que tot es llegeixi bé: normalment un gris fosc per al text i un blanc o gris molt clar per als fons.
Com ha de ser el color del botó d'acció?
El botó de «Demana pressupost» o «Truca’ns» és l’element més important de la teva web des del punt de vista comercial. Ha de destacar clarament sobre la resta: un color viu i amb bon contrast respecte al fons. Si el botó es confon amb el disseny, els visitants no el veuran, i si no el veuen, no el premran.
Un error molt habitual: fer el botó del mateix color corporatiu per «quedar bé». El botó no ha de quedar bé: ha de cridar l’atenció. Pots mantenir la identitat de marca i alhora tenir un botó que es vegi d’una hora lluny.
Com s'aconsegueix que el text es llegeixi bé?
La combinació més elegant del món no serveix de res si el text no es llegeix. Les normes bàsiques són aquestes:
- Text fosc sobre fons clar (o a l’inrevés): és la combinació més llegible i la més segura.
- Evita el text gris clar sobre fons blanc: queda «modern» però molta gent —sobretot gent gran o amb el mòbil al sol— no el pot llegir.
- No posis text sobre fotos sense un fons que el protegeixi: una foto bonica darrere d’un text il·legible és una foto malgastada.
- Vigila el contrast en els botons: text blanc sobre groc o sobre taronja clar sovint no es llegeix.
Pensa en els teus clients reals: si tens clients de més de 50 anys, la llegibilitat no és un detall, és una necessitat. Lletres prou grans i contrast alt marquen la diferència entre una web que tothom pot usar i una que només entén el dissenyador.
Com es tria la tipografia d'una web?
La tipografia són les lletres de la teva web. I la norma d’or és la mateixa que amb els colors: màxim dues tipografies —una per a titulars i una per al text normal— i, si pot ser, de la mateixa família.
Què ha de complir una bona tipografia web
- Llegibilitat: el text normal ha de ser una lletra clara i sense floritures. Les tipografies decoratives són per a logotips o titulars molt curts, mai per a paràgrafs.
- Mida suficient: el cos del text hauria de ser d’almenys 16 píxels. Més petit cansa la vista, sobretot al mòbil.
- Coherència: la mateixa tipografia a tota la web. Cada pàgina amb una lletra diferent transmet desordre.
- Accents i caràcters catalans: assegura’t que la tipografia inclogui correctament les vocals accentuades, la ce trencada (ç) i la ela geminada (l·l). Algunes tipografies gratuïtes fallen aquí i el resultat és molt poc professional.
Aquest últim punt és clau si la teva web és en català: comprova sempre com es veuen la «à», la «è», la «ç» i la «l·l» abans de decidir-te. Una tipografia preciosa que no té la ela geminada no serveix per a una web en català.
Com es combinen els colors sense ser dissenyador?
Triar tres colors que combinin bé pot semblar difícil, però hi ha mètodes senzills:
- Parteix del teu logotip: si ja tens un logotip amb colors definits, la feina està mig feta: fes servir el color principal del logotip com a color principal de la web i tria un secundari que hi combini.
- Mira què fa el teu sector: no per copiar, sinó per entendre les expectatives. Si totes les clíniques dentals usen blaus i verds suaus, un vermell intens pot desentonar (o pot diferenciar-te: depèn de la teva estratègia).
- Fes servir eines gratuïtes de paletes: hi ha eines en línia on tries un color i et suggereixen combinacions harmonioses. Són molt útils per no equivocar-te amb el color secundari.
- Prova-ho en context real: no jutgis els colors en una mostra aïllada: mira’ls aplicats a una capçalera, a un botó i a un titular. Un color preciós en abstracte pot no funcionar en una web.
I una norma pràctica per al color secundari: si dubtes entre dues opcions, tria la més sobria. El color secundari ha d’acompanyar, no competir amb el principal. El protagonisme visual ha de ser per al contingut i per als botons d’acció.
Per què els colors i les lletres han de coincidir amb la teva marca?
Els colors i la tipografia de la web han de ser els mateixos que els de la teva marca: el logotip, les targetes, la retolació del local, les furgonetes. Quan un client veu la teva furgoneta al carrer i després obre la teva web, ha de reconèixer immediatament que és la mateixa empresa.
Si no tens una identitat visual definida, la creació de la web és un bon moment per definir-la: triar els colors i les lletres que t’acompanyaran a tot arreu. És una decisió que convé prendre amb calma, perquè canviar-la després costa temps i diners.
Quins errors cal evitar en colors i tipografia?
Abans de publicar la web, repassa aquesta llista de comprovació:
- Massa colors: cada secció d’un color diferent. Resultat: caos visual.
- Colors de moda que no et representen: triar el color perquè «ara es porta» en comptes de perquè encaixa amb el teu negoci.
- Text clar sobre fons clar: el pecat capital de la llegibilitat.
- Més de dues tipografies: titulars amb una lletra, text amb una altra, botons amb una tercera… desordre garantit.
- Lletres decoratives per al text normal: precioses en un logotip, impossibles en un paràgraf.
- No comprovar-ho al mòbil: uns colors i unes mides que a l’ordinador es veuen bé poden ser il·legibles en una pantalla petita.
Preguntes freqüents
Quants colors ha de tenir una web d'empresa?
Tres: un de principal, un de secundari i un de neutre. Amb tres colors tens prou per diferenciar seccions i destacar els botons sense crear caos visual.
Quantes tipografies pot tenir una web?
Com a màxim dues: una per a titulars i una per al text normal, i si pot ser de la mateixa família. Més de dues tipografies transmet desordre.
Com sé si una tipografia serveix per a una web en català?
Comprova que inclogui correctament les vocals accentuades, la ce trencada (ç) i la ela geminada (l·l). Si alguna d’aquestes lletres es veu malament, la tipografia no serveix per a una web en català, per preciosa que sigui.
El botó de contacte ha de ser del color de la marca?
No necessàriament. El botó ha de destacar clarament sobre la resta de la pàgina, amb un color viu i bon contrast. Pots mantenir la identitat de marca i alhora tenir un botó que es vegi d’una hora lluny.
Per què és tan important comprovar la web al mòbil?
Perquè uns colors i unes mides que a l’ordinador es veuen bé poden ser il·legibles en una pantalla petita, i una bona part dels visitants arriben des del mòbil. Comprova el contrast, la mida de la lletra i la visibilitat dels botons en una pantalla petita abans de publicar.
Criteri abans que gust personal
Triar els colors i la tipografia de la web no va de gustos personals («a mi m’agrada el lila»): va de què necessita el teu client per confiar en tu i llegir-te còmodament. Tres colors ben triats, dues tipografies llegibles, contrast alt i coherència amb la teva marca: amb això tens una base visual sòlida per a qualsevol negoci.
Quan encarreguis el disseny web de la teva empresa, parla d’aquestes decisions amb el professional: un bon dissenyador no t’imposarà el seu gust, t’ajudarà a traduir el que és el teu negoci en colors i lletres que funcionin. Si vols una web pensada per transmetre confiança des del primer segon, demana el teu pressupost aquí o escriu-nos per WhatsApp i t’expliquem què necessitaria la teva.