Unidades CSS

Conoce las unidades para indicar tamaños o distancias

css ᐳ StyleLint: Linter CSS ᐳ Unidades CSS ᐳ Modelo de cajas

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:

Unidades absolutas en CSS

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

Unidad	Significado	Medida aproximada
`in`	Pulgadas	1in = 25.4mm
`cm`	Centímetros	1cm = 10mm
`pc`	Picas	1pc = 4.23mm
`mm`	Milímetros	1mm = 1mm
`pt`	Puntos	1pt = 0.35mm
`px`	Píxels	1px = 0.26mm
`Q`	Cuarto de mm	1Q = 0.248mm

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:

Unidad	Significado	Medida aproximada	Ejemplo
`em`	«M»	Multiplicador del tamaño `font-size` en ese elemento (o heredado)	`1.5em * 16px = 24px`
`ex`	«x»	Multiplicador de la mitad del tamaño `font-size` (altura de la x minúscula)	`1ex ~ 0.5em`
`ch`	«zero width»	Multiplicador del tamaño de ancho del carácter cero ( `0` )	`1ch ~ 1 carácter`
`rem`	«root M»	Multiplicador del tamaño `font-size` del elemento raíz (`<html>` o similar)
`%`	Porcentaje	Relativa a herencia (concretamente, al elemento padre)	`50% = mitad del padre`

La unidad em

La unidad em se utiliza para hacer referencia al tamaño actual de la fuente en ese elemento HTML. Por defecto, 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.

Unidades relativas en CSS: em

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.

Altura de la x minúscula

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:

Unidad	Significado	Medida aproximada
`vw`	viewport width	1vw = 1% ancho de navegador
`vh`	viewport height	1vh = 1% alto de navegador
`vmin`	viewport minimum	1vmin = 1% de alto o ancho (el mínimo)
`vmax`	viewport maximum	1vmax = 1% de alto o ancho (el máximo)

La unidad vw (viewport width)

La unidad vw es un tipo de unidad que hace referencia al ancho del viewport (región visible de la página en el navegador). Por ejemplo, si definimos 50vw, estamos indicando un 50% del ancho actual del navegador. Esto nos permite utilizar tamaños que dependan de las dimensiones de la ventana del navegador.

La unidad vh (viewport height)

Por su parte, la unidad vh hace referencia de la misma forma al alto del viewport. Por ejemplo, mientras 50vw hace referencia al 50% del ancho del navegador, si indicamos 50vh estaremos haciendo referencia a la mitad (50%) del alto del navegador.

Las unidades vmin / vmax

Por último, tenemos las unidades vmin y vmax. La unidad vmin (viewport minimum), simplemente hace referencia al valor más pequeño (mínimo) entre el tamaño de ancho y el tamaño de alto del viewport del navegador. Por otro lado, la unidad vmax (viewport maximum) hace referencia al valor más grande (máximo) entre el tamaño de ancho y el tamaño de alto del viewport del navegador.

Esto puede ser útil en algunas situaciones donde quieres flexibilidad con diseños adaptables, y no necesitas estar haciendo cálculos previos para saber cuál es el más pequeño o más grande antes de utilizarlos.

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.

Tabla de contenidos