Unidades para tamaño de letra en CSS: px, em, rem y más

Definir el tamaño de letra en CSS es una decisión que impacta en la accesibilidad como en la responsividad. Existen varias unidades para definir tamaños de letra, veamos las unidades más comunes en CSS para tamaños de fuente: px, em, rem, %.

Tipos de Unidades

Antes de examinar las diferentes unidades, veamos los tipos de unidades que existen:

Unidades Absolutas: definen tamaños fijos que no se escalan con el contenedor o viewport. Ejemplo: px.
Unidades Relativas: definen tamaños dinámicos que cambiar de acuerdo al tamaño del contenedor. Ejemplos: em, rem, %.

Unidades en CSS

Para definir el tamaño de los textos en CSS se tienen las siguientes unidades:

Pixeles

El pixel: px es una unidad absoluta que representa un punto en la pantalla del dispositivo. No depende del contenedor, sino de la resolución y densidad del dispositivo.


.calendar {
    font-size: 15px;
}

Ventajas: Ideal para diseños en los que se necesita precisión en los tamaños. Es bien soportado en todos los navegadores.

Desventajas: Los tamaños definidos en px no cambian en función de la configuración de tamaño de fuente del usuario, lo que puede afectar la accesibilidad.

em

El em es una unidad relativa que se basa en el tamaño de fuente del elemento padre. Si el tamaño del contenedor es 16px, entonces 1em será igual a 16px.


.calendar {
    font-size: 15px;
}

.calendar__title {
    font-size: 1.2em;     /* 18px */
}

Ventajas: El tamaño de fuente puede escalar en función del contenedor, permitiendo un diseño adaptable de manera sencilla.

Desventajas: El tamaño puede acumularse en elementos anidados, lo que puede ser complicado de manejar.

rem

rem es similar a em, pero en lugar de basarse en el tamaño de fuente del elemento padre, se basa en el tamaño de fuente raíz (<html>), normalmente es 16px en la mayoría de los navegadores.


.calendar {
    font-size: 15px;
}

.calendar__title {
    font-size: 1.2rem;     /* 19.2px */
}

Ventajas: No se ve afectado por el tamaño de fuente del contenedor padre. Escala adecuadamente si el usuario aumenta el tamaño de fuente en su navegador.

Desventajas: Cambiar el tamaño de fuente en la raíz afectará a todos los elementos que usan rem lo que implicaría cambiar el tamaño en los componentes.

Porcentaje

El porcentaje % define el tamaño en función de otro tamaño. Un tamaño de 100% corresponde al tamaño de fuente del elemento contenedor.


.calendar {
    font-size: 15px;
}

.calendar__title {
    font-size: 120%;     /* 18px */
}

Ventajas: Escala en función del tamaño de su contenedor. Además permite que los tamaños se adapten al tamaño del contenedor.

Desventajas: Si el tamaño del contenedor cambia, el tamaño en porcentaje se verá afectado, por lo que se pueden tener inconsistencias inesperadas.

Resumen

Unidad	Ventaja	Desventaja	Uso Recomendado
`px`	Control preciso	No escalable	Elementos con tamaño fijo
`em`	Flexibilidad y adaptabilidad	Puede acumularse	Elementos dentro de contenedores específicos
`rem`	Consistente y accesible	Dependiente de la raíz	Tipografía principal, márgenes globales
`%`	Escalable en contenedor	Difícil de predecir	Layouts responsivos

Convertir px a rem

Una conversión común en diseño web es de px a rem, por que rem es una unidad flexible y accesible. Normalmente, 1rem = 16px por lo que podemos crear un mixin en SASS para convertir fácilmente.


/* Función para convertir px a rem */
@function rem($value) {
  @return $value / 16px * 1rem;
}

/* Uso de rem */
.calendar {
    font-size: rem(15px);     /* 0.9375rem; */
}

.calendar__title {
    font-size: rem(18px);     /* 1.125rem; */
}

Conclusión

Cada unidad tiene sus ventajas y desventajas. Para la mayoría de los casos, rem es una excelente opción por su consistencia y adaptabilidad a los cambios en el tamaño de fuente raíz. Combinar unidades puede ser la mejor solución para mantener tanto control como flexibilidad, permitiendo que el diseño sea accesible y responsivo al mismo tiempo.