Jerarquia tipogràfica

A causa de la diversitat de plantilles i estructures del sistema web de la UAB, no és possible establir mides estrictes per a cada nivell de títol (H1, H2, H3...), ni per a botons o altres components específics.

En lloc d’això, s’utilitza un sistema escalable de mides de text gestionat mitjançant variables CSS (--font-size-xx), que s’ajusten dinàmicament segons la mida de la pantalla.

Jerarquia tipogràfica

Escala	Variable CSS	Mida (en píxels)	Ús orientatiu
-2	--font-size--2--font-size--2	12.3 – 14.2	Textos auxiliars, notes
-1	--font-size--1	13.1 – 16	Text petit, navegacions secundàries
0	--font-size-0	14 – 18	Cos de text
1	--font-size-1	14.9 – 20.2	Resums, destacats, navegacions principals
2	--font-size-2	15.9 – 22.8	Títols petits
3+	--font-size-3+	17 – 58.4	Títols mitjans i grans, Seccions Hero, capçaleres

 

La jerarquia resulta d’una progressió modular amb un ràtio de 1.125 (conegut com a Segona Major), i amb la funció  clamp() s’apliquen valors mínims i màxims per tal que el text s’emmotlli de manera fluïda a la mida de la pantalla.

L’escala abasta des de -3 fins a 10 passos. Aquesta és la progressió completa:

Pas -3: de 11.52 px a 12.64 px

--font-size--3: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.79rem);

Pas -2: de 12.30 px a 14.22 px

--font-size--2: clamp(0.77rem, calc(0.70rem + 0.24vw), 0.89rem);

Pas -1: de 13.12 px a 16.00 px

--font-size--1: clamp(0.82rem, calc(0.72rem + 0.36vw), 1.00rem);

Pas 0: de 14.00 px a 18.00 px

--font-size-0: clamp(0.88rem, calc(0.73rem + 0.51vw), 1.13rem);

Pas 1: de 14.94 px a 20.25 px

--font-size-1: clamp(0.93rem, calc(0.74rem + 0.67vw), 1.27rem);

Pas 2: de 15.94 px a 22.78 px

--font-size-2: clamp(1.00rem, calc(0.75rem + 0.87vw), 1.42rem);

Pas 3: de 17.01 px a 25.63 px

--font-size-3: clamp(1.06rem, calc(0.76rem + 1.09vw), 1.60rem);

Pas 4: de 18.15 px a 28.83 px

--font-size-4: clamp(1.13rem, calc(0.75rem + 1.35vw), 1.80rem);

Pas 5: de 19.36 px a 32.44 px

--font-size-5: clamp(1.21rem, calc(0.74rem + 1.66vw), 2.03rem);

Pas 6: de 20.66 px a 36.49 px

--font-size-6: clamp(1.29rem, calc(0.73rem + 2.00vw), 2.28rem);

Pas 7: de 22.04 px a 41.05 px

--font-size-7: clamp(1.38rem, calc(0.70rem + 2.41vw), 2.57rem);

Pas 8: de 23.52 px a 46.18 px

--font-size-8: clamp(1.47rem, calc(0.66rem + 2.87vw), 2.89rem);

Pas 9: de 25.10 px a 51.96 px

--font-size-9: clamp(1.57rem, calc(0.61rem + 3.40vw), 3.25rem);

Pas 10: de 26.78 px a 58.45 px

--font-size-10: clamp(1.67rem, calc(0.55rem + 4.01vw), 3.65rem);

 

Aquest sistema tipogràfic garanteix una jerarquia visual coherent i textos que escalen de manera fluida i amb bona llegibilitat en qualsevol dispositiu, tant en pantalles grans com en mòbils.

La mida dels títols, elements de navegació o botons pot variar segons el disseny, la resolució de pantalla i les necessitats de cada pàgina, ja que el sistema s’adapta automàticament sense necessitat de definir media queries manuals. Però aquesta flexibilitat també comporta que dissenyadors i desenvolupadors l’apliquin amb coherència.

A continuació es presenten els criteris mínims per garantir-ne un ús correcte:

• El cos de text ha de tenir una mida mínima de 18 px en pantalles grans i 14 px en dispositius mòbils, que es correspon a la mida base --font-size-0. Si cal donar-li més presència, també es pot utilitzar un pas més alt,--font-size-1.
• Els títols de secció (H1, H2, H3...) s’han d’assignar a escales compreses entre --font-size-2 i --font-size-10, en funció del seu pes jeràrquic i del context visual.
• Eviteu utilitzar valors inferiors a --font-size--1 per a textos llargs, ja que comprometen la llegibilitat.
• Mantingueu una diferència mínima de 4 px o 1 escala entre nivells de títols consecutius per preservar la jerarquia visual.
• L’escala tipogràfica ha d’anar acompanyada d’un espaiat proporcional per reforçar la jerarquia visual.