Guía de Unidades en el CSS

Cuando comenzamos a ocuparnos del desarrollo web, más específicamente HTML y CSS, es muy común que nos quedemos atrapados con las herramientas que ya conocemos y con las que estamos familiarizados.

Sin embargo, esto puede convertirse en un problema en virtud del gran crecimiento de la Web y, con ello, a la aparición de nuevos problemas y, consecuentemente, nuevas soluciones. Esta es una situación común cuando se trata de unidades de medida en el CSS, debido a la gran variedad, terminamos dejando de lado parte de las existentes y, de hecho, no usamos toda la potencia que tenemos a mano.

Hay algunas unidades a las que probablemente estés acostumbrado, ¡como el famoso píxel! En esta publicación, abordaremos todas las unidades de medida actualmente vigentes y cómo nos pueden ayudar durante tu jornada como desarrollador web. Antes de seguir, debemos entender cuál es la diferencia entre medida absoluta y medida relativa.

Medidas Absolutas

Estas son las más comunes que vemos a diario. Son medidas que no están referenciadas a ninguna otra unidad, es decir, no dependen de un valor de referencia. Son unidades de medidas definidas por la física, como el píxel, centímetro, metro, etc. …

Estas medidas son fijas y no cambian según las especificaciones del dispositivo. Este tipo de medición está indicado para cuando conocemos a la perfección las características físicas y las configuraciones de las medias donde se exhibirán nuestros proyectos.

Ya te lanzaré aquí un spoiler, ¿En el "mundo real" conoceremos toda la información de todos los dispositivos? ¡Sostén ese pensamiento!

Medidas Relativas

Estas son las que normalmente no estamos acostumbrados. Estas medidas se calculan en base a otra unidad de medida definida, por ejemplo em y rem (Veremos más sobre estas dos medidas a lo largo de la publicación). El uso de ellas es más apropiado para que podamos hacer ajustes en diferentes dispositivos asegurando un layout consistente y fluido en distintas medias.

Debido a que estas medidas las calcula el navegador en base a otra unidad, suelen ser bastante flexibles. Es decir, podemos tener resultados diferentes según el entorno.

Para empezar a caminar con las medidas existentes, opté por empezar con las medidas absolutas, ya que habitualmente estamos más familiarizados con éstas. Como diría mi amigo Flávio Almeida, empezado bien, ¡mitad hecho!

Medidas absolutas en el CSS

Píxeles (px)

Probablemente ya conozca o haya oído hablar de este chico llamado Píxel. Píxel no es más que los pequeños puntitos luminosos en la pantalla de tu monitor, móvil, televisión, etc. ... Por lo tanto, ¡el píxel es el elemento más pequeño en un dispositivo de exhibición!

Esta es una medida muy famosa para los diseñadores web, la mayoría de los desarrolladores web utilizan el píxel como la unidad principal de sus proyectos.

Un detalle que pocos conocen es que, de hecho, el píxel del CSS NO es realmente un píxel de la pantalla del dispositivo (hardware), pero lo que llamamos píxel de referencia que suele ser más grande que el píxel real. Lo que termina convirtiéndolo en una medida abstracta donde es necesario controlar el mapeo de este píxel de referencia al píxel de hardware (¡sucede detrás de las cortinas!).

La definición del píxel de referencia en el CSS es el ángulo visual (0.0213 deg) de un píxel en un dispositivo con una densidad de 96 dpi a una distancia de un brazo del lector (28 pulgadas), vea la imagen a continuación:

e El beneficio de este píxel de referencia es que tiene en cuenta la proximidad de la pantalla, al usar un móvil que tengamos cerca de nosotros, el píxel de referencia será similar en tamaño al de un monitor más alejado de nosotros, por ejemplo.

Por lo tanto, no existe ese cuento de que el píxel sea "perfecto". Solo si estamos desarrollando un sitio web para un mismo dispositivo, con un mismo tamaño de pantalla y que usa el mismo navegador, pero, ¡sabemos que no es así como funciona en el mundo real!

Un punto interesante para comentar es que, recientemente el boostrap 4 dejó de usar PX y migró a REM, además, el uso del píxel nos da la sensación de que es lo mismo que el píxel del hardware, lo que puede causar confusión a los nuevos desarrolladores.

Uno de los aspectos más importantes para estos Diseñadores Web es la escalabilidad y adaptabilidad de un layout, es decir, a medida que las unidades aumentan de forma predecible y razonable, su disposición debe poder adaptarse a estos cambios.

Por un lado, la idea de mantener el mismo aspecto (tamaño) en diferentes dispositivos puede parecer atractiva (¡cuidado con el píxel de referencia!), pero por otro lado, tenemos consecuencias negativas cuando estamos tratando con dispositivos de baja resolución (blurry rendering).

Points (pt)

La siguiente unidad es Point. Esta unidad es definitivamente más conocida por los diseñadores, especialmente aquellos que estudian tipografía.

Esta medida se usa generalmente en propiedades relacionadas con la fuente de su proyecto. Su abreviatura está marcada con pt y su uso no es tan común, probablemente verás esta unidad muy raramente.

En general, se espera que esta medida se utilice en hojas de estilo para impresiones, cuando necesite estar seguro del tamaño de fuente utilizado. ¡No se recomienda para la estilización en pantalla!

in (inches/pulgadas)

Pulgada o inch en inglés, es otra unidad de medida que conocemos del mundo de las medidas absolutas; normalmente las vemos cuando queremos comprar un nuevo televisor o monitor, pero esa unidad también existe en el mundo Web.

Aunque existen, no se suelen utilizar en proyectos, ya que no tienen ningún uso práctico (podemos conseguir los mismos resultados utilizando otras unidades).

Centímetro y Milímetro (cm/mm)

Nosotros, que hemos adoptado el sistema métrico, conocemos bien estas dos medidas, muy utilizadas en la vida cotidiana. Aunque es muy común, tanto el centímetro como el milímetro se usan poco en el CSS. Así como el pt, se espera el uso de estos dos para hojas de estilo para impresiones (medidas más precisas), evitando que se apliquen a las exhibiciones en pantalla.

Paica (pc)

También es una unidad poco utilizada en el mundo web, la Paica también llega al CSS, heredada de la tipografía. Por no ser una unidad muy conocida termina siendo olvidada, pero siempre es importante conocer todas las herramientas que tenemos a nuestra disposición. La relación entre unidades absolutas es:

1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc

Medidas Relativas en el CSS

Ems (em)

Nuestra primera unidad relativa es muy famosa en el mundo CSS. Difícilmente encontrarás algún navegador que no admita esta medida, que ha estado presente desde el principio. Incluso para IE, tendríamos que usar la versión anterior a la 3.0 para tener algún problema.

Este es definitivamente uno de los puntos que hacen que el em sea muy popular. El segundo punto es sin duda, la facilidad para crear layouts fluidos y responsivos.

Pero, ¿cómo funciona este tal em?

Esta unidad cambia a los elementos hijos de acuerdo con el tamaño de fuente (font-size) del elemento padre, así que aquí vamos. Digamos que tenemos el siguiente html, lo que me permite la licencia poética para usar la tag style:

<style>
    #div{
        font-size: 16px;
    }

    #hijo{
        font-size: 2em;
    }
</style>

<div id="padre">
    div padre
    <div id="hijo">
        div hijo
    </div>
</div>

Arriba, tenemos una div padre donde estoy definiendo un font-size de 16px, dentro de ese div, tenemos una única div hija. Como había mencionado, el tamaño definido para la fuente afectará en el em de los elementos hijos.

En este caso, para la div más interna (id = hijo), 1em será igual a 16px, siguiendo la lógica, 2em será igual a 32px y así sucesivamente. ¡También podemos poner valores como 1.5! En nuestro caso, 1.5em será igual a 24px. Al expresar tamaños como margin y padding utilizando em, esto significa que estarán relacionados con el tamaño de fuente del elemento padre.

Por lo tanto, de acuerdo con el tamaño de la fuente utilizada en un determinado elemento, ¡los elementos hijos cambiarán de tamaño para obedecer la referencia a ese tamaño de fuente!

Una técnica muy utilizada consiste precisamente en hacer uso de este poder del em componentizando nuestros elementos. La idea es que al cambiar el tamaño de fuente del elemento padre hace que todo el componente se modifique y cambie de tamaño en función de este nuevo valor.

A pesar de ser divertido, la razón por la que usamos esta técnica no es para que el usuario tenga un slider y cambie el tamaño de la fuente jajaja. Sino para facilitar el mantenimiento del componente en su conjunto, sin tener que sufrir cambios de valores de todas las partes del componente. Genial, ¿verdad?

El último punto que debemos tener en cuenta al usar el em es que cuando usamos esta medida, tenemos que considerar el font-size de todos los elementos padre. Por ejemplo, si tuviéramos una tercera div más interna en nuestro ejemplo anterior y configuramos el tamaño de fuente en 2em, en este caso, estos 2em serían 64px, ¡una vez que el font-size del elemento padre se ha establecido en 32px (2em)! ¿Atrapaste la idea?

Esto tiende a complicarse cuando hablamos de 5, 6, 7 divs anidadas, ¡probablemente no será muy entretenido calcular esto! Pero, la buena noticia es que tenemos una unidad que nos ayuda a resolver este pequeño problema.

Rems (rem, "root em")

El REM viene como sucesor del EM y ambos comparten la misma lógica operativa (font-size), pero la forma de implementación es diferente. Mientras que el em está directamente relacionado con el tamaño de fuente del elemento padre, el rem está relacionado con el tamaño de fuente del elemento root (raíz), en este caso, la tag.

El hecho de que el rem se relaciona con el elemento raíz soluciona ese problema que teníamos con varias divs (elementos) anidados, ya que no habrá esta "herencia" de tamaños, ¿recuerdas? Es decir, no necesitaremos tener dolor de cabeza al tener que realizar cálculos, ya que estamos basados en la etiqueta raíz.

Por ejemplo, sabemos que la tag html es la tag raíz de todo documento html. Dicho esto, si definimos que el font-size de este elemento será de 18 px, por lo que 1rem = 18px, 2rem = 36px y así sucesivamente... Por lo general, los navegadores especifican el tamaño de fuente predeterminado para el elemento root (raíz), 16px, ¡así que guárdelo en su corazón! Aun siendo esta unidad más tranquila para trabajar, no se usaba mucho para el diseño responsivo, que al principio puede sonar un poco extraño...

La razón de esto es el apoyo a esta medida. Chrome y Firefox son compatibles sin problemas, así como Opera y Safari; sin embargo, en el pasado, la mayoría de los usuarios usaban IE, más específicamente IE 8, y este navegador no manejaba muy bien los rems, esto significaba que los desarrolladores tenían que elegir una unidad diferente, en muchos casos, el em.

Como dije anteriormente, el valor base es de 16px, y esto puede terminar causandonos dificultades para encontrar algunos tamaños estándar que se usan habitualmente. Por ejemplo, ¿cómo haríamos para lograr un tamaño de 10px utilizando rem? Necesitamos calcular.

BASE 16PX

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem

y así sucesivamente, realmente no son números muy "amigables" o convenientes. Sin embargo, podemos usar un pequeño truco para ayudarnos (62.5%).

html{
    font-size: 62,5%;
}

h1{
    font-size: 1.2rem;  /*equivalente a 12px*/
}

p{
    font-size: 2.4rem; /*equivalente a 24px*/
}

Tenga en cuenta que, de esta manera, ¡el valor de píxel siempre será el valor definido en rem por 10! Se vuelve más conveniente, ¿de acuerdo?

Si bien esto suena como una buena idea, debemos tener cuidado con estos enfoques, ya que lo obligará a reescribir todos los font-size de tu sitio, ¡así que tenga cuidado!

Hay una tercera opinión sobre todo esto. Esta solución usa px, em y rem de una manera bien definida. La idea es definir el font-size del elemento root en píxeles, módulos usando rem y elementos interiores a los módulos usando em, facilitando la manipulación del tamaño global que naturalmente escalará el tamaño de los módulos (usando rem) y estos a su vez, escalarán los elementos interiores (que usan em y se refieren al elemento padre).

Porcentaje (%)

A pesar de no ser una unidad de medida, el porcentaje se usa a menudo cuando se trata de un layout responsivo y fluido, por lo que no podría dejarlo pasar. El porcentaje nos permite crear módulos que siempre serán readaptados para ocupar la cantidad especificada. Por ejemplo, si definimos un elemento que tiene un tamaño de 50%, independientemente del dispositivo en cuestión, este módulo ocupará siempre la mitad del espacio que le corresponde (si se encuentra dentro de cualquier otro elemento).

Tenga en cuenta que si cambiamos el tamaño de la div contenedor, ¡el elemento dentro de él cambiará de tamaño para que siempre ocupe el porcentaje especificado en el CSS!

También tenga en cuenta que el slider está cambiando tanto el ancho como la altura del elemento, pero si cambiamos cada uno por separado, ¡también funcionará! Dado este ejemplo, podemos decir que el porcentaje se comporta algo similar a nuestro ya conocido em, ya que se relaciona directamente con el tamaño de la propiedad del elemento padre.

Por lo tanto, al trabajar con el porcentaje, tenemos el mismo problema que teníamos con el em, cuantos más elementos anidados, más complicado será definir exactamente el tamaño, ¡así que ten cuidado al usarlo!

Ex

Puede que nunca hayas oído hablar de esta unidad del CSS, pero existe. A diferencia de la forma en que EM y el REM funcionaban, esta unidad no está relacionada con el tamaño de la fuente (font-size), sino con qué fuente se está utilizando en ese momento (font-family), más específicamente con el tamaño del carácter x de esta fuente en cuestión (x-height).

¿Cómo sabe el navegador este valor? Este valor puede venir directamente con la fuente, el navegador puede medir el carácter en minúscula (lower case) y si estos dos no funcionan, el navegador estipula un valor de 0.5em para 1ex.

Con eso, si cuando cambiamos el tamaño de fuente (depende del elemento) el em y el rem cambian, de esta vez cuando cambiamos completamente la fuente, el ex cambiará. El uso de esta unidad está más presente en los ajustes tipográficos, dándonos un control más preciso cuando el estándar definido para algunas tags no encaja correctamente en nuestro layout.

Ch

También una unidad poco conocida, la ch (carácter unit) se define en la documentación como la "medida avanzada" del ancho del carácter cero ("0").

Existe una vieja discusión donde hubo mucho debate sobre esta unidad y lo que realmente sería una "medida avanzada", puedes acompañar aquí. La idea es que un elemento con, por ejemplo 100ch de ancho puede contener una string de 100 caracteres de esa fuente en particular, si esa fuente es monospace (todos los caracteres tienen el mismo tamaño).

Es común encontrar definiciones que dicen que la frase anterior se aplica a cualquier fuente, pero esto es incorrecto. Como mencioné anteriormente, la regla de 1ch = 1 carácter se aplica sólo si la fuente utilizada es monospace (ancho fijo). Fuentes con ancho variable, cualquier carácter puede ser más ancho o menos ancho que cero ("0"), como podemos ver en la siguiente imagen:

Como podemos analizar, la tipografía Courier (monospace) obedece a la regla anterior, ¡pero las otras dos no! Lo que podemos tomar después de las observaciones es que normalmente 1ch es 20% - 30% más amplio, pero esto no es una verdad absoluta y debe observarse para cada fuente que desees aplicar. ¡Así que ten cuidado con el uso!

Vw (viewport widht)

Esta medida es parte de las medidas más actuales y futuras del CSS. Viewport units.

Como está escrito en el título, vw significa viewport width, pero ¿qué es viewport?

Viewport no es más que el área visible de una página web para su usuario, este viewport puede variar según el dispositivo, siendo más pequeña en móviles y más grande en computadoras desktops.

En el pasado, cuando no existían tabletas y teléfonos móviles capaces de acceder a sitios web, todas las páginas web estaban diseñadas para una pantalla de computadora, con un tamaño fijo y diseño estático. Con la llegada de estos dispositivos móviles, estas páginas eran demasiado grandes para mostrarse en estos dispositivos, lo que dificultaba mucho la navegación.

La primera solución vino de los navegadores de estos dispositivos, adoptaron el comportamiento de quitar el zoom para que todo el sitio quepa en la pantalla del dispositivo, definitivamente no era lo ideal, pero una solución rápida. En HTML5, se introdujo una forma para que los desarrolladores pudieran cambiar la viewport a través de la tag, solucionando este problema de usabilidad relacionado con dispositivos móviles, ¡pero ese es un tema para otra publicación!

Volviendo a nuestro querido vw, esta unidad está directamente relacionada con el ancho de la viewport, donde 1vw representa 1% del tamaño del ancho de esa área visible. La diferencia entre vw y el % es muy similar a la diferencia entre em y rem, dónde el % es relativo al contexto local del elemento y el vw es relativo al tamaño total del ancho de la viewport del usuario.

Vh (viewport height)

Esta unidad funciona de la misma forma que la vw, pero esta vez, la referencia será la altura y no el ancho. Hay varios ejemplos prácticos e interesantes del uso de estas dos unidades. Puedes ver algunos usos en este enlace.

Vmin (viewport minimun)

Esta unidad también se relaciona con las dimensiones de la viewport, pero con un pero. Anteriormente cuando vimos vh y vw teníamos que elegir si nos gustaría basarnos en la altura (vh) o en el ancho (vw) de la viewport.

A diferencia de los anteriores, el vmin usará como base la dimensión más pequeña de la viewport (altura x ancho), veamos el ejemplo.

Imagine que estamos trabajando con una viewport de 1600 px de altura y 900 px de ancho. En ese caso, 1vmin tendrá el valor de 9px (¡1% de la dimensión más pequeña!); si tenemos 100vmin, ¡esto será igual a 900px! Interesante ¿verdad?

En el caso anterior, la dimensión más pequeña era el ancho, pero si tuviéramos 300px de altura y 1400px de ancho, ¡nuestro valor de referencia sería 300px! ¡Siempre la menor dimensión!

Vmax (viewport maximum)

Siguiendo la misma base lógica que la unidad anterior, el vmax tendrá como valor de referencia la dimensión más grande de la viewport. Es decir, usando el mismo ejemplo, si tenemos 1600 px de altura y 900 px de ancho,¡1vmax será equivalente a 16px!

En el segundo ejemplo, ocurrirá la misma inversión, con 300px de altura y 1400px de ancho, 1vmax será equivalente a 14px. Esta vez, ¡siempre será la mayor dimensión!

¡¡Alerta!!

En la versión 9.0 del IE, el vmin se implementó con un nombre distinto (vm). Algunas versiones del IE aún no ofrecen soporte al vmax, en las nuevas versiones esto se ha solucionado.

Algunas plataformas como Windows tienden a ser inconsistentes en la forma en que cuentan el tamaño de la barra de desplazamiento de los navegadores (disminuye o bi la viewport). Siempre verifique el soporte de estas medidas, siempre tenga este enlace en el cinturón de herramientas.

Conclusión

Como podemos ver, hay varias unidades que podemos usar en el mundo web, pero siempre surgen aquellas preguntas como ¿cuándo tengo que usarlas? ¿Cuál es la mejor? etc …

No hay una respuesta correcta o incorrecta a estas preguntas, lamentablemente no tenemos una regla de oro para todas las situaciones. El uso de estas unidades depende de varios factores como el equipo, la preferencia, la familiaridad, etc.

Sin embargo, es importante que tú, como desarrollador web, tengas todas estas herramientas en tu cinturón, ya que nunca sabemos cuándo tendremos que utilizarlas.

Definitivamente la inclusión de las unidades de viewport fue positiva para la web cuando se trata de un diseño flexible, ¡depende de ti comenzar a ponerlas en uso durante tú día a día!

Además, espero sinceramente que esta publicación haya agregado algo de conocimiento y facilitado su jornada hacia el saber.

Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.