UNIDADES DE MEDIDA CSS

Cuando se trabaja en diseño web, además de conocer las estructuras y etiquetas fundamentales de HTML y CSS, es necesario reconocer y manejar las diferentes unidades de longitud que se utilizan para manipular el tamaño y la ubicación de los elementos en una página web. De esta manera, el siguiente post tiene como objetivo presentar las unidades de longitud más comunes.

En CSS existen varias unidades de longitud que sirven para expresar una dimensión mediante la configuración de propiedades como width, margin, padding, font-size, etc.

Las dimensiones se expresan a través de un número seguido de una unidad de longitud (25px, 4%, 7em, 30rem).

Existen dos tipos de unidades de longitud, las unidades de longitud absolutas y las unidades de longitud relativas. Cada tipo o grupo de unidades tiene características específicas y se pueden utilizan en contextos particulares, por lo cual, es importante conocer y entender cómo funcionan para que se puedan aplicar de forma correcta según las necesidades del diseño.

Unidades de longitud Absolutas.

Son unidades que se caracterizan por ser fijas, invariantes y por no depender de otros factores o valores de referencia. Estas unidades asignan un valor absoluto a la dimensión que se esté definiendo, es decir, establece un valor fijo que no varía como consecuencia de factores externos como, por ejemplo, el tamaño de un contenedor o de la tipografía.

Este tipo de unidades se utilizan especialmente cuando se trabajan contenidos y diseños para medios impresos como documentos, revistas, volantes, etc. No son unidades muy apropiadas para utilizar en proyectos de desarrollo web con diseño adaptable, dado que no permiten crear estructuras flexibles que sean capaces de adaptarse a los diferentes tamaños de pantalla de los dispositivos.

Las unidades de longitud absolutas que se pueden utilizar en CSS son las siguientes:

UNIDAD	DESCRIPCIÓN
cm	Centímetros
mm	Milímetros
in	Pulgadas
px	Pixeles
pt	Puntos
pc	Picas

Probablemente el píxel (px) es la unidad de medida absoluta más utilizada en diseño web. Se usa con frecuencia para definir las dimensiones de los contenedores, secciones o elementos que hacen parte del documento HTML. En seguida se presenta un ejemplo:

p {
 font-size: 30px;   /* Tamaño de texto de 30 pixeles.*/ 
}

div {
  width: 50px;      /* Define un ancho de 50 pixeles.*/
} 

El píxel es la unidad mínima de resolución de una pantalla.

Unidades de longitud Relativas.

Las unidades de longitud relativa son aquellas que especifican un valor de longitud que depende o es relativo a otras propiedades de longitud asociadas a los elementos del documento HTML. Este tipo de unidades son las más potentes dado que permiten mayor flexibilidad y versatilidad al momento de diseñar sitios web adaptables.

Las unidades de longitud relativas que se pueden encontrar en CSS son las siguientes:

UNIDAD	DESCRIPCIÓN
em	Relativa al tamaño de la fuente del elemento
ex	Relativa a la altura x de la fuente actual
ch	Relativa al ancho del “0”
rem	Relativa al tamaño de la fuente del elemento raíz
vw	Relativa al 1% del ancho de la ventana del navegador (viewport)
vh	Relativa al 1% del alto de la ventana del navegador (viewport)
vmin	Relativa al 1% de la dimensión más pequeña de la ventana del navegador
vmax	Relativa al 1% de la dimensión más grande de la ventana del navegador
%	Relativa al elemento padre

Aunque no es una regla estricta, usualmente para dimensionar una fuente o tipografía se usan las unidades em, ex y rem, mientras que para establecer el tamaño de un elemento tipo section o div, se utiliza el porcentaje (%). A continuación, se habla un poco más en detalle sobre las unidades de longitud relativa %, em y rem.

Porcentaje (%). Es una de las unidades de longitud relativas más utilizadas para dimensionar y ubicar elementos en un documento HTML. Esta unidad define un valor de longitud o tamaño en función de la medida de referencia que se establezca en un elemento contenedor.

Por ejemplo, si se tiene un elemento contenedor (div, section, body, footer, etc) configurado con un tamaño de 1000px, los elementos internos del contenedor que se definan con una dimensión igual al 50%, tendrán un tamaño equivalente a 500px, dado que el porcentaje se calcula tomando como base la longitud de referencia que en este caso es 1000 pixeles (1000 * (50/100) = 500px).

section {
 width: 1000px;   /* Tamaño del contenedor.*/ 
}

div {
  width: 50%;     /* Define un ancho de 500 pixeles.*/
} 

Si esta unidad de longitud se aplica a una fuente o tipografía, entonces su tamaño será relativo a la dimensión de la fuente declarada en la raíz del documento HTML.

Unidad Relativa em. Este tipo de unidad de longitud se utiliza generalmente para definir el tamaño de los textos que se incluyen en el documento HTML.

Las unidades em trabajan en función de un valor de referencia que corresponde al tamaño de fuente definido en un elemento contenedor (div, section, footer, etc). Los elementos que se encuentren al interior del contenedor y que se configuren con unidades em, establecen su tamaño a partir de dicho valor de referencia declarado.

En los navegadores web el tamaño predeterminado de la fuente es de 16px, por lo tanto, 1em equivale a 16px, no obstante, este valor de referencia puede ser modificado y en ese caso una unidad em será igual al nuevo valor definido.

Por ejemplo, si en un div se configura la propiedad font-zise con un tamaño de 20px, todos los elementos que estén en su interior tomarán como referencia ese valor. De esta manera, si en el div se tiene un elemento p con un tamaño de fuente igual a 3em, el texto que se incluya en p tendrá un tamaño de 60px, es decir, tres veces el tamaño de referencia (3 X 20 = 60px).

div {
  font-size: 20px;   /* Tamaño de referencia (contenedor).*/ 
}

p {
 font-size: 3em;     /* Tres veces el tamaño de referencia (60px).*/
} 

En cada elemento contenedor del documento HTML se puede definir un valor de referencia diferente, lo que daría como resultado distintos tamaños de fuente en todo el documento.

Unidad Relativa rem. Las unidades de longitud rem también se utilizan para definir el tamaño de los textos que se incluyen en un documento HTML. Este tipo de unidad de medida es muy interesante porque trabaja en función de un único valor de referencia que se define en el elemento raíz del documento HTML.

Las unidades rem dependen únicamente del valor de fuente declarado en el body, es decir, en el elemento raíz que contiene todos los elementos del documento HTML.

Por ejemplo, si en el body se define el tamaño de fuente igual a 15px, todos los elementos que estén en su interior y se configuren con unidades de longitud rem, van a calcular su tamaño a partir del valor de referencia, así, si el tamaño de un texto se establece en 2rem, su dimensión será igual a 30px (2 X 15 = 30px). En este ejemplo 1rem es igual a 15px. En caso de que no se especifique un tamaño de fuente en el body, el valor que se usará como referencia es el tamaño predeterminado que manejan los navegadores web que es de 16px.

body {
 font-size: 15px;     /* Tamaño de referencia (contenedor).*/ 
}

p {
 font-size: 2rem;     /* Dos veces el tamaño de referencia (30px).*/
} 

div{
 font-size: 1rem;     /* El mismo tamaño de referencia (15px).*/
}

Una ventaja importante al trabajar con unidades rem, es que estas permiten controlar fácilmente los cambios que se quieran hacer en el tamaño de los elementos de todo el documento HTML. Por ejemplo, para cambiar el tamaño de todos los textos del documento, solo se necesita modificar el valor de referencia, es decir, el tamaño que se haya configurado en la propiedad font-size del body. Los demás elementos que estén configurados con unidades rem, automáticamente van a ajustar su tamaño según el factor de escala declarado a través de estas unidades.

Finalmente, se podría decir que las unidades de longitud CSS se deben utilizar teniendo en cuenta las necesidades especificas del proyecto, no obstante, se recomienda trabajar con unidades relativas, teniendo en cuenta que estas permiten mayor flexibilidad y son más apropiadas para la creación de sitios web adaptables.