Si abre cualquier hoja de estilo de un sitio web, encontrará rems, ems o píxeles, o cualquier combinación de ellos. En el estilo CSS, estas son las principales unidades de medida que se utilizan. Ya sea que esté diseñando un sitio desde cero o si ha "heredado" un sitio diseñado anteriormente que necesita mantener, estos son importantes para la tipografía, el espaciado y otros tamaños en el diseño visual.

¿Qué hace que una unidad de medida sea mejor que otra? No hay una respuesta definitiva y, dependiendo de la situación, se puede preferir una sobre otra. Conocer el caso de uso y lo que funcionará mejor ayudará a determinar la mejor medida para su estilo.

Píxeles

Desde los primeros días de la web, los píxeles han sido una opción que se encuentra en las hojas de estilo en todas partes. Son confiables, precisos y su consistencia no se puede igualar. Los píxeles son compatibles con todos los navegadores, lo que facilita el trabajo con ellos.

Aunque los píxeles son geniales, tienen algunas limitaciones. Debido a que son una medida tan establecida, los usuarios no pueden cambiar el tamaño del texto predeterminado del navegador en la configuración del navegador. Las cosas no se amplían como lo hacen con ems y rems, lo que dificulta el cambio de tamaño desde el punto de vista de la accesibilidad para el usuario. Se puede argumentar que un usuario puede simplemente acercar, en lugar de ir a la configuración del navegador. No hay una respuesta correcta o incorrecta, es solo algo a tener en cuenta.

¿Qué son?

Los píxeles son una unidad de medida que se basa en el tamaño establecido. Son la unidad para medir dimensiones en una pantalla y se utilizan cuando se requiere un diseño preciso. Decimos cosas como "resolución de píxeles", por lo que estamos acostumbrados a esta medida.

Un ejemplo sería algo como esto:

.main-header p {
font-size: 14px;
}

Los píxeles tienen su uso en el diseño web, pero en la era del diseño web independiente del dispositivo, las medidas de la pantalla no son el enfoque principal. Se trata de cómo hacer que nuestro contenido se adapte mejor a innumerables dispositivos, por lo que hay ems y rems que pueden ayudar con eso.

ccsme

Esta unidad de medida tiene una larga historia. Se remonta a 1996 y existe desde los primeros días de CSS. Los píxeles se consideraban la mejor práctica, por lo que los ems no eran tan populares en esos primeros días. Desde entonces, han ganado popularidad porque su propósito es servir como una unidad relativa al tamaño de fuente en contenido específico y ayudan con la consistencia.

¿Qué son?

Si le gusta mucho la tipografía clásica, probablemente haya reconocido "em", porque es una unidad de medida que se origina en el mundo de la tipografía impresa. Usando esto como una unidad en tipografía, esta medida es igual al tamaño de punto especificado actualmente. Por ejemplo, un em en un tipo de letra de 16 puntos es de 16 puntos. Esta unidad es la misma para todos los tipos de letra en un tamaño de punto dado.

No estamos hablando de impresión aquí, entonces, ¿cómo figura ems en el diseño web? El tamaño relativo es un gran punto de venta para ems porque ayuda a controlar el tamaño de los elementos a medida que se relacionan con otros. Ems puede funcionar como grandes bloques de construcción para los elementos del sitio web debido al hecho de que los valores em se combinan. Sin embargo, es importante comprender realmente cómo funciona esta composición.

Comprender el ems

En la mayoría de los casos, a menos que el navegador predeterminado esté configurado en otra cosa, un em es de 16 px. Cuando vea 1,5 em, eso lo convertiría en 24 píxeles. Sin embargo, no siempre es tan simple. ¿Qué sucede cuando se trata de anidamiento? Puede ser conveniente y confuso. Saber cómo funcionan las cosas cuando se trabaja con ems sin duda ayudará a resolver cualquier misterio. ¿Cuál es el tamaño del párrafo "Estoy anidado" a continuación?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Hay tres divs aquí, y el párrafo está bastante anidado. Con la conexión en cascada del DOM, es posible que deba hacer un trabajo de detective. Digamos que estamos trabajando con un em de 16px, ya que eso es lo más común.

La clase .one multiplica 1 em por 0,5, que es 0,5 em u 8 px. Con la clase .two , esto se vuelve a multiplicar por 0.5, que es .25 em o 4px. Las cosas se están volviendo bastante pequeñas, por lo que la clase de .three ayudará. Tomaremos el .25 em y lo multiplicaremos por 2. El resultado es 0.5 em o 8px.

Una cosa que puede ayudar es establecer un tamaño en el elemento HTML. Algo como esto especificará el tamaño em establecido, en lugar de confiar en el em establecido por el navegador. Establezcamos 1 em a 20px. Si esto se usara con el ejemplo anterior, se aplicarían los mismos principios con el anidamiento. Sin embargo, tenga en cuenta que hemos especificado un tamaño de píxel, por lo que afectará la capacidad de escalar el texto mediante la opción de configuración del navegador.

html {

font-size: 20px;

}

Además de los píxeles, el tamaño de fuente también se puede configurar con un porcentaje. El punto es que ems puede funcionar junto con otras unidades de medida. Seguramente encontrará esto, ya que es bastante común establecer la fuente del cuerpo en un porcentaje para ayudar a establecer una línea de base. Digamos que el tamaño de fuente comienza como el 62,5 % del tamaño em. Con un tamaño em de 16 px, el tamaño de fuente sería de 10 px.

body {

font-size:62.5%;

}

Una vez que tenga una comprensión, ems puede ser un buen activo para su proyecto. Cambiar el tamaño del texto de los subelementos a sus elementos principales ciertamente puede ser útil. Además, ems facilita la especificación de un relleno más grande en el contenedor de texto que el que se puede encontrar en el espacio entre palabras, lo que hace que siga la regla visual de proximidad. Los elementos relacionados se agruparán visualmente, con menos desorden y proporcionarán un diseño organizado.

Otra gran característica de ems son las ventajas de accesibilidad. Debido a que es relativo a la raíz del DOM, ems lo hace perfecto para cambiar el tamaño de todo el diseño según las preferencias del usuario. En las preferencias del navegador, puede cambiar fácilmente el tamaño de fuente predeterminado, que luego cambia los cálculos, en ems, para todo el sitio web.

Rems

¿Qué son?

Rems es una adición bastante reciente a la línea de tiempo de CSS. Esta unidad de medida se introdujo con CSS3 y resuelve algunos de los problemas con píxeles y ems. Con un nombre similar a "ems", es posible que se pregunte qué significa la "r". Proviene del término "Root EM".

La raíz es el elemento HTML. El tamaño especificado en el elemento HTML es la base para esta medida. Verá que hemos utilizado tamaño em en el elemento HTML; está bien combinar los dos tipos de medición.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Los navegadores modernos admiten rems, pero asegúrese de consultar con BrowserStack qué navegadores más antiguos necesita admitir antes de comprometerse con rems. Sin embargo, no permita que los navegadores más antiguos lo detengan; siempre puede especificar un respaldo de píxeles para cualquier cosa por debajo de IE9. Los navegadores modernos ignoran los píxeles porque prefieren rems. Podría verse algo como esto:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Entendiendo rems

¿Recuerdas las matemáticas que tuvimos que hacer para los elementos anidados de ems? Eso no es necesario con rems. Todo se basa en ese elemento raíz. No tenemos que preocuparnos por los elementos padres, siempre se basa en la raíz.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Hay tres divs aquí, y el párrafo está bastante anidado como vimos en el ejemplo em. Nuevamente, digamos que estamos trabajando con un tamaño em de 16px.

Las clases .one y .two tienen tamaños asignados, pero realmente no importan aquí porque el anidamiento no se ve afectado con rems como lo es con ems. Todo lo que realmente importa es el estilo de .tres, que es de 2 ems. El párrafo se basaría en el elemento HTML de 1em. Esta medida se duplicaría, dándonos 2 rems o 32 píxeles.

¿Quieres escalar todo uniformemente? Simplemente ajuste el tamaño del elemento raíz. Esto también es útil cuando se ajusta el tamaño predeterminado del navegador. Podrías ver cómo ems permitió eso, rems también.

Hay mucho menos de qué preocuparse con respecto al comportamiento de anidamiento impredecible con rems. Es fácil entender dónde entra en juego el elemento raíz y cómo afecta su estilo al usar rems.

Al comparar las diferentes medidas, puedes ver que tienen sus pros y sus contras. Comprender realmente cómo funcionan las unidades de medida y cómo funcionan con la configuración del navegador lo ayudará a elegir cuál funcionará mejor para la situación o el proyecto.