CSS: Unidades

Las unidades de medida son usadas en CSS por muchas propiedades; por ejemplo, permiten especificar el tamaño del texto, el ancho y alto de una sección, la separación en los márgenes o el tiempo que dura una transición. Hay unidades de medida de longitud, de ángulo y de tiempo.

Las medidas se indican con un valor numérico, que puede ser entero o decimal, al que le sigue la unidad de medida. Entre el valor numérico y la unidad de medida no existe ninguna separación (espacio en blanco): se escriben unidos. Por ejemplo, una longitud de 10 píxeles se escribe como 10px.

Cuando el valor equivale a 0, no es obligatorio poner la unidad de medida; con un «0» es suficiente. Si el valor es diferente de 0 (positivo o negativo) pero no se indica la unidad, la propiedad CSS será ignorada. Por tanto, es importante especificar las unidades de medida tal y como se debe.

Cuando se usan valores decimales, si el valor decimal de una unidad de medida se encuentra entre 0 y 1, se puede omitir el 0 de la izquierda. Por ejemplo, 0.5em puede escribirse como .5em.

Unidades de medida de longitud

Se puede clasificar las unidades de longitud en dos categorías: absolutas y relativas. Las unidades absolutas establecen de forma completa el valor de una medida, siendo su valor exactamente el que se indica. En cambio, las unidades relativas definen su valor respecto a otra medida de la que dependen.

Unidades de longitud absolutas

Las unidades de longitud absolutas permiten indicar un valor exacto y fijo de una medida. Se trata de un valor que no depende de otro valor de referencia. Pueden usarse en multitud de situaciones, aunque su uso es cada vez menos frecuente debido a que no se adaptan a diferentes resoluciones o pantallas.

La ventaja de usar valores absolutos es que el valor indicado es el valor que se usará, sin que sea necesario realizar cálculos intermedios. Por su contra, los valores absolutos tienen la desventaja de que no son nada flexibles, por lo que son poco apropiados en el diseño web responsive.

Tabla de unidades de longitud absolutas:

Las unidades de longitud que se describen en la tabla anterior son más útiles cuando se usan en formato impreso que representadas en una pantalla, especialmente pt para el tamaño del texto. Por ejemplo, usar centímetros o pulgadas en pantalla no tiene mucho sentido.

De todas las unidades de longitud absolutas, la más extendida en el mundo del desarrollo web es px. Seguramente esto se deba a que es una unidad de medida fácil de aprender, ya que las pantallas están compuestas de píxeles, por lo que es fácil de comprender a nivel conceptual.

Hay que tener en cuenta que el píxel no tiene el mismo tamaño en todos los dispositivos. Por tanto, a pesar de que ofrece cierta consistencia en el diseño web, más que una unidad absoluta se considera híbrida.

Unidades de longitud relativas

Las unidades de longitud relativas definen su valor a partir de otro valor, por lo que no están completamente definidas. A pesar de que esta dependencia hace que parezcan más difíciles de implementar, lo cierto es que son muy flexibles, se adaptan a cualquier pantalla y eso hace que sean muy utilizadas.

Tabla de unidades de longitud relativas:

La unidad em equivale al tamaño de la fuente del elemento. Se usa para hacer referencia al tamaño que se utiliza. El valor por defecto del navegador web es de 16px, equivalente a 12pt, excepto si se indica otro valor.

Haciendo una comparación que sirve de ejemplo: si 1em equivale a 16px, el valor de 2em equivaldrá al doble, es decir, 32px. Y al revés: un valor de 0.5em equivaldrá a la mitad, 8px. Tal y como se puede ver, el em calcula un valor porcentual dependiendo del tamaño de la fuente.

Vamos a ver un ejemplo. Si un párrafo tiene el tamaño de la fuente por defecto del navegador, es decir, 16px, cuando se le aplique un margen inferior de 1.5em equivaldrá a 24px. Pero si se cambia el tamaño de la fuente al valor de 20px, entonces el margen inferior será también mayor, de 30px.

p {
  font-size: 20px;
  margin-bottom: 1.5em;
}

Para tener una idea de las equivalencias partiendo de los 16 píxeles que tienen las fuentes por defecto en los navegadores web:

Las unidades relativas tienen la ventaja de mantener la proporcionalidad del diseño de la página web. Por ejemplo, establecer el margen inferior de un párrafo con el valor de 1em equivale a decir que el margen debe ser el mismo que el tamaño de su letra, y que por tanto cambiará proporcionalmente.

La unidad ex equivale a la altura de la letra «x» (equis minúscula) del tipo y tamaño de la fuente del elemento. Esto significa que su valor es aproximadamente la mitad de 1em, es decir, 0.5em; se trata de una aproximación porque, como es de esperar, depende de la tipografía utilizada.

La unidad rem es muy interesante para el uso de las tipografías. Su uso es parecido al de la unidad em, pero permite establecer un tamaño base personalizado, ya sea a través del elemento <html> o mediante la pseudoclase :root. Así se trabaja con múltiplos del tamaño base.

En el caso base se usa la unidad px, y en el resto de selectores se usa la unidad rem para aplicar un cálculo de escalado. Así:

:root {
  font-size: 20px;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

En el ejemplo anterior se está aplicando un factor de escala para los elementos de encabezado. En este sentido, los elementos <h1> tendrán un tamaño de fuente de 40 píxeles, mientras que los elementos <h2> medirán 30 píxeles.

La gran ventaja de usar la unidad rem es que permite modificar el tamaño de las fuentes de todo el documento, de forma proporcional, solo cambiando el valor del caso base de la pseudoclase :root. Para el resto de elementos se aplicará un cálculo de escalado en consecuencia con el factor indicado.

Resumiendo la diferencia entre las unidades de medida em y rem, es que em es relativo al tamaño de la fuente del elemento padre, mientras que rem es relativo al tamaño de la fuente del elemento raíz.

Unidades del ‘viewport’

Dentro de las unidades de longitud relativas existen las unidades relacionadas con el viewport. El viewport es la parte del documento HTML que el usuario está viendo en el navegador web; es una región rectangular. El contenido que no es visible queda fuera del viewport hasta que sea desplazado dentro de él.

Disponer de unidades que dependan del viewport resulta de gran utilidad. Gracias a este tipo de unidades es posible hacer referencia a un porcentaje concreto del tamaño que aparece en la ventana del navegador.

Las unidades vw y vh hacen referencia al ancho y alto del viewport. El valor de estas dos unidades es un porcentaje, por lo que 100vw equivale al 100% del ancho de la ventana del navegador web, mientras que 40vw equivale al 40%.

Por su parte, las unidades vmin y vmax permiten hacer referencia al porcentaje más pequeño o más grande, respectivamente, de entre el ancho y el alto del viewport. Puede ser útil cuando se quiere cierto tipo de flexibilidad.

Unidad relativa de fracciones

Dentro del sistema de diseño de cuadrículas o rejillas, conocido como grid, es posible usar un tipo de unidad de longitud relativa que permite distribuir el espacio disponible de forma fraccional entre las filas o las columnas.

La unidad fr permite asignar fracciones al espacio disponible. Por ejemplo, si una cuadrícula tiene tres columnas, cada columna ocupará su parte proporcional. En este caso, el valor 1fr equivaldrá a un tercio del espacio disponible.

En este sentido, la unidad fraccional fr es dinámica y se adapta al espacio disponible del elemento contenedor (padre). Si el tamaño de la cuadrícula cambia, las columnas y las filas definidas se ajustarán de forma automática con el fin de mantener la proporción especificada.

Unidades relativas de contenedor

Trabajando con contenedores (container queries), dentro de la regla @container se puede usar unidades relativas a la longitud del contenedor. Así es posible dar estilos referentes a la longitud de un elemento que dependa exclusivamente del tamaño cambiante de su elemento contenedor (padre).

Unidades de medida de ángulo

En CSS también es posible hacer uso de unidades de ángulo. Estas unidades pueden ser expresadas en grados (deg), grados centesimales (grad), radianes (rad) y vueltas (turn). Los valores positivos representan ángulos en el sentido de las agujas del reloj, y los valores positivos en el sentido opuesto.

La sintaxis de este tipo de unidades es un valor numérico seguido por uno sufijo que corresponde con el tipo de unidad. Al igual que ocurre con los otros tipos de unidades, en CSS no se deja ninguna separación entre el número (izquierda) y la unidad (derecha). Diez grados se indica como 10deg.

Las unidades de medida de ángulo se usan en propiedades CSS que se explican en artículos posteriores, como transform y gradient. Cuando su valor sea 0, deberá indicarse igualmente el tipo de unidad.

Unidades de medida de tiempo

Las unidades de medida de tiempo también existen en CSS, y pueden ser usadas en las propiedades animation, transition y propiedades relacionadas. Los valores se expresan en segundos (s) o en milisegundos (ms). El tipo de unidad no debe omitirse aunque el valor sea equivalente a cero (0).