Principis base per construir l'escala
- Defineix una progressio estable: Una escala modular simple evita salts visuals i manté harmonia entre titols i cos de text.
- Assigna rols tipografics clars: Cada mida ha de correspondre a una funcio concreta per evitar decisions ad hoc.
- Escala per breakpoint global: Ajusta tokens per dispositiu en lloc de tocar components aillats.
Com passar d'estils dispersos a un sistema real
Molts projectes comencen be i acaben amb tipografies inconexes entre pantalles.
La solucio no es sumar mes estils, sino reduir variabilitat i crear un mapa facil de mantenir.
Quan documentes rols i mides des de l'inici, disseny i desenvolupament avancen molt mes rapid.
Implementacio en quatre passos
Un flux practic per definir, validar i desplegar tipografia escalable en producte digital.
| Fase | Focus | Resultat |
|---|---|---|
| 1 | Auditar la interfície actual | Detecta duplicats, estils sense us i conflictes de jerarquia en pagines clau. |
| 2 | Definir tokens | Estableix mides, pesos i interlineats associats a rols de contingut. |
| 3 | Provar amb contingut real | Valida l'escala en blocs llargs, cards i formularis per assegurar llegibilitat. |
| 4 | Documentar i aplicar | Publica regles d'us i connecta tokens amb components per a una adopcio uniforme. |
Resultats d'una bona arquitectura tipografica
El sistema impacta tant en percepcio visual com en velocitat d'execucio de l'equip.
- Lectura mes fluida: Els usuaris entenen abans el contingut gracies a una jerarquia visual mes clara.
- UI mes coherent: Totes les pantalles mantenen el mateix llenguatge visual sense excepcions aleatories.
- Manteniment mes simple: Actualitzar tipografia es torna previsible en estar centralitzada en tokens.
Preguntes frequents sobre tipografia UI
Quants nivells tipografics son recomanables?
L'habitual es treballar amb una base de 6 a 9 nivells ben definits. Massa nivells afegeixen soroll.
Cal una escala diferent en mobil?
Si, pero a traves dels mateixos tokens adaptats per breakpoint per mantenir coherencia.
Quin error es mes habitual en construir l'escala?
Dissenyar des de pantalles aillades. L'escala s'ha de validar en context real de producte.