En el mundo del diseño web, la tipografía juega un papel fundamental en la estética y legibilidad del contenido. Por esta razón, es esencial tener en cuenta las unidades de medida en CSS para definir tamaños de fuente, espaciados y otros aspectos relacionados con la tipografía.
Dos de las unidades de medida más utilizadas son «em» y «rem». En este artículo, exploraremos qué son estas unidades, cuál es la diferencia entre ellas, para qué se utilizan y algunos ejemplos de su uso en CSS.
Tabla de contenidos
¿Qué es em y rem en CSS?
Em y rem son unidades de medida relativas en CSS que permiten definir tamaños de fuente y espaciados de manera proporcional a la fuente base definida en el documento. La diferencia entre ambas unidades radica en cómo se calcula la fuente base.
La unidad «em» toma como referencia la fuente del elemento padre inmediato. Si no se especifica una fuente para un elemento, este heredará la fuente de su padre. Si se establece una fuente diferente en el elemento padre, la unidad «em» se ajustará en consecuencia.
Por otro lado, la unidad «rem» se basa en la fuente establecida en el elemento raíz del documento. Esto significa que la unidad «rem» es inmutable en toda la estructura del documento, incluso si se cambia la fuente en los elementos padres.
¿Para qué se utilizan em y rem en CSS?
Ambas unidades de medida se utilizan para definir tamaños de fuente, márgenes, rellenos y otros aspectos relacionados con la tipografía. La ventaja de utilizar unidades relativas como em y rem es que permiten que el tamaño de la fuente se ajuste automáticamente en función del tamaño de la pantalla o el dispositivo en el que se visualiza el sitio web. Esto hace que el sitio sea más accesible y legible para todos los usuarios.
Además, estas unidades de medida son útiles en la construcción de diseños responsivos y adaptables, ya que permiten que la fuente y los espaciados se ajusten automáticamente a diferentes tamaños de pantalla.
Ejemplos de uso de em y rem en CSS.
1. Definir el tamaño de fuente de un elemento en em:
h1 {
font-size: 2em;
}
2. Definir el tamaño de fuente de un elemento en rem:
p {
font-size: 1.5rem;
}
3. Definir un margen en em:
.section {
margin: 2em;
}
4. Definir un relleno en rem:
.button {
padding: 0.5rem;
}
Diferencias de Em, Rem y Px en CSS.
A continuación, analizaremos las diferencias entre estas unidades de medida y cuándo es conveniente utilizar cada una.
Em:
Como ya habíamos visto, la unidad «em» es una medida relativa que se basa en el tamaño de la fuente del elemento padre inmediato. Esto significa que si se cambia el tamaño de la fuente del elemento padre, el tamaño de la fuente del elemento hijo también cambiará en consecuencia. Por ejemplo, si se establece un tamaño de fuente de 1.5em en un elemento y el tamaño de fuente del elemento padre es de 16px, el tamaño de fuente resultante será de 24px (1.5 x 16).
Rem:
La unidad «rem» también es una medida relativa, pero se basa en el tamaño de fuente establecido en el elemento raíz del documento. Esto significa que el tamaño de la fuente en un elemento hijo no cambiará si se cambia el tamaño de la fuente del elemento padre. Por ejemplo, si se establece un tamaño de fuente de 1.5rem en un elemento y el tamaño de fuente del elemento raíz es de 16px, el tamaño de fuente resultante será de 24px (1.5 x 16).
Px:
La unidad «px» es una medida absoluta que se basa en un tamaño fijo en píxeles. A diferencia de las unidades relativas, el tamaño de fuente o espaciado definido en px no cambiará en función del tamaño de la pantalla o el dispositivo en el que se visualiza el sitio web.
¿Cuándo utilizar cada unidad de medida?
La unidad «em» es útil cuando se desea definir tamaños de fuente o espaciados en relación con la fuente del elemento padre. Es especialmente útil para crear diseños que se adapten automáticamente a diferentes tamaños de pantalla o dispositivos.
La unidad «rem» es útil cuando se desea definir tamaños de fuente o espaciados en relación con la fuente del elemento raíz del documento. Es especialmente útil para crear diseños que no cambien de tamaño si se cambia la fuente en los elementos padres.
La unidad «px» es útil cuando se desea definir tamaños de fuente o espaciados en un tamaño fijo y absoluto. Es especialmente útil cuando se desea lograr un diseño pixel-perfect que no cambie de tamaño en diferentes dispositivos o tamaños de pantalla.