En aquesta pàgina documento com he triat les lletres (tipografies) del meu portfoli: quins criteris he seguit, quines opcions he provat, quina combinació he escollit i com l'he aplicada a tot el lloc.
1. Imatge corporativa del portfoli
El portfoli ha de transmetre una imatge tècnica, moderna i ordenada, pròpia d'una persona que estudia Sistemes Microinformàtics i Xarxes (SMX). Per això busco una lletra neta i fàcil de llegir per als textos, i un toc més "informàtic" per als detalls tècnics.
2. Criteris aplicats
| Criteri | Què busco |
|---|---|
| Llegibilitat | Lletres clares en pantalla, amb bon espaiat i que es vegin bé en ordinador i en mòbil |
| Jerarquia | Que es distingeixi de seguida què és un títol, un subtítol, un text i un fragment de codi |
| Coherència amb la imatge corporativa | Que la lletra transmeti un estil tècnic i modern, i que sigui la mateixa a tot el lloc |
3. Tipografies provades
| Tipus | Llegibilitat | Jerarquia | Coherència amb la imatge |
|---|---|---|---|
| Sans-serif (Segoe UI) | Molt alta | Molt bona amb pesos normal i negreta | Alta: moderna i neta |
| Serif (Georgia) | Alta en text llarg | Bona | Mitjana: estil més editorial que tècnic |
| Monoespaiada (Consolas) | Mitjana en textos llargs | Limitada | Alta per a detalls tècnics |
4. Combinació escollida i justificació
He triat una combinació de dues famílies amb funcions diferents:
- Segoe UI (sans-serif) per als títols i per als textos. Si el dispositiu no la té, el navegador fa servir una lletra de sistema equivalent. És neta i molt llegible, i amb pesos diferents (normal i negreta) ja crea la jerarquia sense necessitat d'afegir una altra família.
- Consolas (monoespaiada) només per a codi, comandes i els detalls tècnics del fons i de l'etiqueta. Dona el toc informàtic de SMX i fa que el codi es distingeixi del text.
Combinar una lletra de pal sec per al contingut amb una monoespaiada per als detalls tècnics funciona perquè el contrast és clar: cada família té un paper concret i mai competeixen entre elles. A més, usar només dues famílies manté el lloc coherent i ràpid de carregar.
5. Procediment d'aplicació
Pas 1: obrir el Personalitzador
Des de l'escriptori de WordPress entro a Aparença → Personalitzar. Aquesta és la pantalla real del Personalitzador amb Astra com a tema actiu, on hi ha les seccions Global, Header, Footer, etc.
Pas 2: definir la lletra base
Dins de Global → Typography es pot triar la família, el pes i l'interlineat del text base i dels encapçalaments. Jo he establert Segoe UI com a lletra base, amb un interlineat ampli (1,7) per llegir còmodament.
Pas 3: aplicar-la a tot el lloc
Perquè la tipografia sigui exactament la mateixa a totes les pàgines, també l'he definida a l'estil general del lloc (CSS). Així no depèn de la pàgina ni del bloc: títols, textos, botons i formularis hereten la mateixa lletra. La lletra monoespaiada Consolas s'aplica només al codi, a les comandes i als detalls tècnics.
Pas 4: comprovar la jerarquia
Obro una pàgina del lloc i comprovo que cada nivell es distingeix bé dels altres, tant en ordinador com en mòbil.
6. Aplicació coherent i jerarquia visual
La jerarquia és clara perquè cada nivell canvia de mida, pes o color, però sempre dins de la mateixa família. Els títols són en negreta i el principal porta el degradat blau i lila de la imatge corporativa. El text és en pes normal amb molt interlineat, i el codi canvia de família per destacar.
