Unidades CSS

Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width (propiedad que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades que pueden utilizarse en CSS para indicar un determinado tamaño . Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades de CSS que pueden utilizarlas.

Unidades absolutas

Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales en contextos donde las medidas no varían como pueden ser en medios impresos (documentos, impresiones, etc...), pero son unidades poco adecuadas para la web, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.

Existen varias unidades absolutas, como se puede ver en el siguiente gráfico:

A continuación, podemos ver las diferentes unidades absolutas que pueden utilizarse en CSS son las siguientes (de mayor a menor tamaño):

Consejo: El punto (pt) podría ser una medida ideal para documentos CSS en los que se fija el tamaño de las fuentes en medios impresos.

La unidad px (píxel)

El uso de la unidad px está muy extendida en el desarrollo y diseño web, y es prácticamente una de las primeras unidades de CSS que se recomienda aprender. La razón, es que se trata de una unidad muy sencilla para el desarrollador: muy fácil de comprender, conocida y que nos permitirá afianzar conceptos a la vez que profundizamos en el diseño web.

No obstante, es conveniente saber que no es la única unidad, y que probablemente más adelante nos interese aprender otras unidades que pueden ser mucho más versátiles y útiles para situaciones concretas. ¡Empieza por los px pero una vez los domines no te quedes ahí!

Unidades relativas

Las unidades relativas son un tipo de medida mucho más potente y habitual en el CSS que creamos generalmente. Al contrario que las unidades absolutas, las unidades relativas dependen de algún otro factor (resolución, tamaño de letra, etc...). Tienen una curva de aprendizaje más compleja, pero son ideales para trabajar en dispositivos con diferentes tamaños, ya que son muy flexibles y versátiles.

Las unidades relativas más conocidas son las siguientes:

La unidad em

La unidad em se utiliza para hacer referencia al tamaño actual de la fuente que ha sido establecida en el navegador, que habitualmente es un valor aproximado a 16px (salvo que se modifique por el usuario). De esta forma, podemos trabajar simplificando las unidades a medidas en base a ese tamaño.

Por ejemplo, imaginemos que el tamaño de la fuente establecida en el navegador del usuario es exactamente 16px. Una cantidad 1em equivaldría a 16px, mientras que una cantidad de 2em sería justo el doble: 32px. Por otro lado, una cantidad de 0.5em sería justo la mitad: 8px.

Existen ciertas unidades menos utilizadas dentro de las unidades relativas, como por ejemplo las unidades ex o ch. Mientras que la unidad em es el tamaño de la fuente establecida por el navegador del usuario, la unidad ex es la mitad del tamaño de la fuente establecida por el navegador del usuario, por lo que se cumple que 1ex es igual a 0.5em.

Realmente, la medida ex está basada en la altura de la x minúscula, que es aproximadamente un poco más de la mitad de la fuente actual (depende de la tipografía utilizada). La unidad ch por su parte, equivale al tamaño de ancho del 0 de la fuente actual, aunque como hemos dicho, en la práctica es un tipo de unidad que no se suele utilizar frecuentemente.

La unidad rem (root em)

Una unidad muy interesante y práctica para tipografías es la unidad rem (root em). Esta unidad toma la idea de la unidad em, pero permitiendo establecer un tamaño base personalizado (generalmente para el documento en general, utilizando html o la pseudoclase :root). De esta forma, podemos trabajar con múltiplos del tamaño base:

:root {
  font-size: 22px;    /* Tamaño base */
}

h1 {
  font-size: 2rem;    /* El doble del tamaño base: 44px */
}

h2 {
  font-size: 1rem;    /* El mismo tamaño base: 22px */
}

Como podemos ver, posteriormente podremos ir utilizando la unidad rem en ciertas partes del documento. Con esto, estamos indicando el factor de escala (respecto al tamaño base). En el ejemplo anterior, los elementos <h1> tendrán 44 píxels de tamaño, ya que hemos establecido 2rem, que significa «el doble que el tamaño base». Por otro lado, los elementos <h2> tendrían el mismo tamaño: 22 píxels.

Esto nos da una ventaja principal considerable: Si queremos cambiar el tamaño del texto en general, sólo tenemos que cambiar el font-size de la pseudoclase :root, puesto que el resto de unidades son factores de escalado y se modificarán todas en consecuencia al cambio del :root. Algo, sin duda, muy práctico y fácil de mantener.

Consejo: Cuando se especifican valores de unidades iguales a 0, como por ejemplo 0px, 0em o 0%, podemos omitir las unidades y escribir simplemente 0, ya que en este caso particular las unidades son redundantes y no aportan valor.

Unidades flexibles (viewport)

Existen unas unidades de "nueva generación" que resultan muy útiles, porque dependen del viewport (región visible de la página web en el navegador). Con estas unidades podemos hacer referencia a un porcentaje concreto del tamaño específico que tengamos en la ventana del navegador, independientemente de si es redimensionado o no.

Estas unidades son las siguientes:

La unidad vw hace referencia al ancho del viewport, mientras que vh hace referencia al alto. Por ejemplo, si utilizamos 100vw estaremos haciendo referencia al 100% del ancho del navegador, o sea, todo lo que se está viendo de ancho en pantalla, mientras que si indicamos 50vw estaremos haciendo referencia a la mitad del ancho del navegador.

Por último tenemos vmin y vmax, que simplemente se utilizan para hacer referencia al porcentaje de ancho o alto del viewport, dependiendo cual sea más pequeño o más grande de los dos, lo que puede ser útil en algunas situaciones donde quieres flexibilidad con diseños adaptables.

Es interesante tener en cuenta que existen una serie de funciones para hacer cálculos con unidades CSS. Son las funciones calc(), min(), max() o clamp(), entre otras. Las veremos más adelante, en el capítulo de funciones CSS.