Tipografia Web: Guia Essencial per a la teva Marca Digital

La tipografia defineix el to de la teva marca digital. Aprèn a combinar fonts, optimitzar la llegibilitat i millorar el rendiment del teu web.

La tipografia és la veu visual de la teva marca. Una font ben escollida comunica professionalitat i confiança fins i tot abans que l'usuari llegeixi una sola paraula. Tot i així, la majoria de webs cometen errors tipogràfics que costen diners.

El 95% de la informació al web és llenguatge escrit. Optimitzar la tipografia és optimitzar gairebé tot — Oliver Reichenstein, iA.

La Regla de les Dues Fonts

La regla d'or és combinar màxim dues fonts: una per a títols i una altra per a cos de text. Busca contrast:

• Serif + Sans-serif: el combo clàssic — Playfair Display per a títols + Inter per a cos
• Sans-serif + Sans-serif: modern i net — Space Grotesk per a títols + DM Sans per a cos
• Display + Neutral: màxim impacte — Clash Display per a headlines + General Sans per a text

Evita combinar fonts massa similars o massa diferents. La tensió ha de ser interessant, no caòtica.

Llegibilitat: L'Innegociable

La llegibilitat és innegociable. Estàndards provats:

• Mida mínima de 16px per a text de cos (18px en mòbil)
• Interlineat d'1.5-1.75 de la mida de font
• Longitud de línia entre 50-75 caràcters (45-65 en mòbil)
• Contrast mínim 4.5:1 entre text i fons
• Evita text justificat en pantalla: crea rius d'espai en blanc irregulars

Una millora del 20% en la llegibilitat pot augmentar el temps de permanència un 25% — Nielsen Norman Group.

Fonts Variables: El Futur és Ara

Les fonts variables són una revolució tipogràfica. Un sol arxiu conté tots els pesos i estils, reduint dràsticament els arxius que el navegador necessita descarregar.

• Reducció de pes: una font variable reemplaça 4-8 arxius estàtics, estalviant 100-400KB
• Flexibilitat creativa: pots usar pesos intermedis (450, 550) per a matisos tipogràfics únics
• Animacions tipogràfiques: pots animar el pes amb CSS transitions
• Exemples recomanats: Inter Variable, DM Sans Variable, Plus Jakarta Sans Variable

System Font Stacks: Rendiment Màxim

Si el rendiment és la teva prioritat, les system font stacks eliminen la descàrrega de fonts completament. El navegador usa les fonts ja instal·lades al dispositiu:

• Apple: San Francisco (SF Pro) — elegant i llegible
• Windows: Segoe UI — professional i clara
• Android: Roboto — versàtil i moderna

Rendiment Tipogràfic: Cada KB Compta

Cada font que carregues afegeix 20-100KB al teu web. Estratègies per optimitzar:

• Usa WOFF2: fins un 30% més lleuger que WOFF
• Limita els pesos: regular (400) i bold (700) solen bastar per al 90% dels casos
• Implementa font-display: swap: mostra text amb font del sistema mentre carrega la personalitzada
• Preload les fonts crítiques: per a la font del heading
• Subsetting: genera versions que només incloguin els caràcters que uses

Jerarquia Visual: Guia l'Usuari

• H1 (32-48px): Títols principals — contundents, amb font display
• H2 (24-32px): Subtítols de secció — contextualitzen i separen
• H3 (20-24px): Sub-subseccions — organitzen el detall
• Body (16-18px): Text principal — la columna vertebral
• Small (14px): Text auxiliar — metadata, timestamps, captions

Casos d'Estudi: Marques que ho Fan Bé

• Apple: San Francisco — claredat absoluta, jerarquia perfecta
• Stripe: font display personalitzada amb Söhne per a cos — elegància tècnica
• Linear: Inter amb pesos seleccionats — minimalisme funcional
• Airbnb: Cereal — calidesa i accessibilitat amb personalitat única

Conclusió

La tipografia no és només triar una font bonica: és un sistema complet que afecta la llegibilitat, el rendiment, l'accessibilitat i la identitat de la teva marca. Inverteix temps a definir el teu sistema tipogràfic i mantén-lo coherent en tots els touchpoints.