Un dels maldecaps que tinc a l’hora de crear / reformar pàgines web és la tipografia. Concretament, la mida de la mateixa, ja que acostuma a ser un maldecap com les tipografies es poden llegir més o menys depenent del maquinari que facis servir.

Per això m’ha fet gràcia conèixer la regla del 62,5% per gestionar mides de fonts en una web. I com aquesta norma, combinada amb l’ús de les rem, ens pot ajudar a simplificar-ho tot.

Què és un rem?

Un rem (root em) és una mesura que té en compte la mida de la tipografia en una web. Per defecte, si no toquem res, la mida és de 16px, de manera que un rem (1rem) són 16px, si no toquem res.

Si canviem la mida de la font a través de CSS, i posem una altra mida com a base al document HTML, el valor de les rem també canvia. Per exemple, amb aquest codi fem que 1rem sigui 20px:

html {font-size: 20px;}

I per tant, ara 1rem seria equivalent a 20px. Tot i això, encara que sembli fàcil, a vegades per fer càlculs sobre quines mides de tipografia volem fer servir, ens pot portar una feina extra que potser no volem fer.

El percentatge que tot ho canvia

Ara bé, si posem com a base de mida de la font un percentatge concret, de cop i volta tot es simplifica. La clau està en fer servir aquest codi:

html {font-size: 62.5%}

Amb això, de base tindrem una mida de font de 10px en la majoria de navegadors, i a partir d’aquí, calcular la mida de les tipografies es converteix en posar el tamany que voldríem en píxels dividit per 10 com a rem. Així, un CSS facilet quedaria:

html {font-size: 62.5%}
p {font-size: 1.4rem;} /* 14 píxels */
h1 {font-size: 3rem;} /* 30px */
h2 {font-size: 2rem;} /* 20px */

Això ho podem combinar amb els em normals, en el sentit que els elements que facin servir rem agafaran el valor de la mida de la tipografia prenent com a referència la mida del HTML, i els elements que facin servir em prendran com a referència l’element pare immediatament superior.

html {font-size: 62.5%}
p {font-size: 1.4rem;} /* 14 píxels */
h1 {font-size: 3rem;} /* 30px */
h2 {font-size: 2rem;} /* 20px */

.petit {font-size: 0.75em;} 

En aquest cas, un paràgraf amb classe .petit tindria una mida de font de 11px si estigués a dins d’un paràgraf normal, però una mida de 7px si anés per lliure a dins del document (dos terços dels 10px establerts com a base del document)

Per saber més

• Megida, Dillion. What is rem in CSS? rem Unit Font Size, Padding, Height, and More. Consultat el 27 d’octubre de 2025.
• Sandu, Adrian. Rem in CSS: Understanding and Using rem Units. Consultat el 27 d’octubre de 2025.