Per què la tipografia és invisible quan funciona bé
La millor tipografia és la que no notes. Quan llegir és fàcil i fluid, els usuaris ni tan sols són conscients de les decisions de disseny que ho han fet possible. Però quan la tipografia està malament, és impossible ignorar-la: text massa petit, massa ajuntat o amb colors que no contrasta.
Els estudis sobre llegibilitat web mostren que el 95% de la informació a la majoria de llocs web és text. Si aquest text no és fàcil de llegir, no importa que bonic sigui el teu disseny visual, els usuaris se n'aniran.
La diferència entre fonts amb serif i sans-serif
Les fonts serif tenen petits traços decoratius al final de cada lletra, com Times New Roman. Històricament, s'han considerat més llegibles en text imprès perquè aquests traços guien l'ull al llarg de la línia.
Les fonts sans-serif, com Arial o Helvetica, no tenen aquests traços. Durant molts anys, es van considerar millors per a pantalles perquè la resolució baixa de monitors antics feia que els serifs es veiessin borrosos. Però amb les pantalles retina modernes, aquesta distinció ja no és tan rellevant.
El que realment importa és l'altura x (l'altura de les lletres minúscules sense ascendents ni descendents) i l'espai entre lletres. Fonts amb altures x grans i bona separació són més llegibles, independentment de si tenen serif o no.
La jerarquia tipogràfica: guiar l'ull del lector
Quan arribes a una pàgina web, el teu cervell processa la informació en mil·lisegons buscant patrons. La jerarquia tipogràfica crea aquests patrons utilitzant mida, pes i espai per indicar què és més important.
Una jerarquia clara típicament té almenys tres nivells: títols principals (H1), subtítols (H2-H3) i text del cos. Cada nivell ha de ser visualment distint però harmoniós amb els altres. Una regla útil és mantenir una escala modular: si el teu text base és 16px, els teus subtítols podrien ser 24px (1.5x) i els teus títols principals 36px (2.25x).
Longitud de línia i llegibilitat
La longitud òptima d'una línia de text és de 50-75 caràcters, aproximadament 10-12 paraules. Quan les línies són massa llargues, l'ull del lector es cansa buscant el principi de la següent línia. Quan són massa curtes, el ritme de lectura es trenca constantment.
Maria, dissenyadora d'UX, va redissenyar el blog d'una empresa tecnològica. El disseny original tenia línies que s'estenien per tota l'amplada de la pantalla, sovint arribant a 120 caràcters. Simplement reduint l'amplada del text a 65 caràcters per línia, el temps de lectura va augmentar un 35%. Els lectors finalment es quedaven perquè podia consumir el contingut còmodament.
Interlineat: l'espai que respira
L'interlineat (o line-height en CSS) és l'espai vertical entre línies de text. Un interlineat massa estret fa que el text sembli dens i intimidant. Massa espai i el text sembla desconnectat.
Per a text del cos, un interlineat d'1,5 a 1,7 vegades la mida de la font sol funcionar bé. Per exemple, si la teva font és 16px, un interlineat de 24-27px crea respiració sense perdre coherència. Per a títols, pots ser més ajustat (1.2-1.3) perquè són més curts i més grans.
Contrast de color i accessibilitat
El WCAG (Web Content Accessibility Guidelines) recomana una ràtio de contrast mínim de 4.5:1 per a text normal i 3:1 per a text gran. Això assegura que persones amb deficiències visuals, o simplement llegint en llum brillant, puguin llegir el teu contingut.
Gris sobre blanc pot semblar elegant i modern, però #999999 sobre blanc només té una ràtio de 2.8:1. Això és insuficient. #666666 sobre blanc té 5.74:1, compleix els estàndards i encara sembla professional i net.
Combinar fonts: la regla dels oposats complementaris
Combinar fonts pot ser complicat. Un error comú és utilitzar fonts massa similars que competeixen entre elles sense afegir contrast visual. L'altre extrem és utilitzar fonts tan diferents que xoquen visualment.
Una estratègia fiable és aparellar una font amb personalitat per als títols amb una font neutra pel cos del text. Per exemple, una serif clàssica com Merriweather per als títols amb una sans-serif moderna com Open Sans pel cos crea contrast harmònic.
O pots invertir-ho: una sans-serif amb caràcter com Montserrat per als títols amb una serif llegible com Georgia pel text. El que vols evitar és, per exemple, Arial amb Helvetica - són tan similars que semblen un error en lloc d'una decisió deliberada.
Fonts variables: el futur de la tipografia web
Les fonts variables són una tecnologia nova que permet que una sola font tingui múltiples pesos, amplades i estils sense necessitat de carregar arxius separats per a cada variant. Això significa càrrega més ràpida i més flexibilitat de disseny.
En lloc de carregar Regular, Bold, Italic i Bold Italic com a quatre arxius separats, una font variable ho conté tot en un arxiu. Pots fins i tot animar entre pesos o ajustar dinàmicament basant-te en la mida de pantalla.
Rendiment: optimitzar fonts per a velocitat
Les fonts web personalitzades poden afegir significativament al temps de càrrega. Cada font és un arxiu que el navegador ha de descarregar abans de renderitzar el text. Mentre espera, sovint mostres FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text).
Per optimitzar: utilitza font-display: swap per mostrar text del sistema immediatament mentre la font personalitzada es carrega. Carrega només els pesos que realment necessites. I considera self-hosting en lloc d'utilitzar Google Fonts per evitar la cerca DNS extra.
Casos d'ús reals: quan trencar les regles
Jordi, dissenyador freelance, estava creant una landing page per a un festival de música electrònica. Va utilitzar intencionalment una font decorativa extrema per al títol principal, trencant totes les regles de llegibilitat. Però va funcionar perquè era només una paraula gran, i el context (música experimental) justificava l'elecció.
Per al text explicatiu sota, va tornar a una sans-serif ultra llegible. Va entendre que les regles existeixen per a guiar, no per a limitar. Saber quan trencar-les és tan important com conèixer-les.
Eines per a prendre decisions tipogràfiques
Type Scale et permet experimentar amb escales tipogràfiques modulars. Ajustes la mida base i la ràtio, i genera automàticament una escala harmònica per a tots els nivells de títol.
Contrast Checker verifica si les teves combinacions de colors compleixen amb els estàndards WCAG. FontPair suggereix combinacions de Google Fonts provades que funcionen bé juntes.
Construir un sistema, no decisions aïllades
Els millors dissenys tipogràfics no es fan font per font, sinó com un sistema coherent. Defineix les teves regles una vegada: família de fonts, escala de mides, pesos disponibles, interlineat, espai de paràgrafs. Després aplica-les consistentment.
Aquesta consistència no només fa que el teu disseny sembli més professional, sinó que també fa que la codificació sigui més fàcil i el manteniment més simple. Un sistema tipogràfic ben pensat és una inversió que continua pagant dividends en cada nou disseny que creïs.