En este artículo vamos a explicar las diferentes unidades de medida que podemos utilizar en CSS para visualizar o imprimir contenido HTML. Para que todo quede más claro, vamos a agruparlas por su uso o funcionamiento habitual y con ejemplos prácticos de CSS.
Al trabajar en una página HTML con CSS, utilizamos una gran cantidad de medidas sin darnos cuenta que se usan tanto para definir tamaños, posiciones y márgenes visuales, como tipografías y tamaños de texto. Para intentar explicar esta mezcla de medidas, vamos a agruparlas en absolutas y relativas. Dependiendo del contexto donde se utilicen, unas son más útiles que otras.
Unidades de medida absolutas
Estas unidades de medida CSS son fijas y no dependen del contexto, son útiles para imprimir o cuando necesitas precisión.
| Unidad | Significado | Equivale a… |
|---|---|---|
px | píxeles | 1 píxel de pantalla |
cm | centímetros | 1 cm real |
mm | milímetros | 1 mm real |
in | pulgadas | 1 in = 2.54 cm |
pt | puntos tipográficos | 1 pt = 1/72 in |
pc | picas | 1 pc = 12 pt |
Uso típico
.box {
width: 300px;
padding: 10mm;
}Consejo: Al trabajar en HTML, usa px como única unidad absoluta, las demás se reservan para impresión.
Unidades de medida relativas
Estas unidades de medida CSS cambian según el tamaño de la fuente del elemento o su padre.
| Unidad | Significado |
|---|---|
em | relativo al tamaño de fuente actual |
rem | relativo al tamaño de fuente raíz (html) |
Uso típico
p {
font-size: 1.2rem; /* 1.2 × fuente base */
line-height: 1.5em; /* 1.5 × tamaño de este párrafo */
}Consejo: rem es ideal para diseños escalables y accesibles. Evita em para anidar tamaños (puede acumularse inesperadamente).
Unidades de medida sobre contenedores
Estas unidades de medida CSS dependen del tamaño del padre o del viewport.
| Unidad | Significado |
|---|---|
% | porcentaje del contenedor |
vw | 1% del ancho del viewport |
vh | 1% del alto del viewport |
vmin | 1% del menor valor entre vw y vh |
vmax | 1% del mayor valor entre vw y vh |
Uso típico
.hero {
width: 100vw; /* ocupa todo el ancho de la pantalla */
height: 100vh; /* ocupa toda la altura del viewport */
}
img {
max-width: 100%; /* escala dentro de su contenedor */
}Consejo: Estas unidades de medida CSS son muy útiles para diseño responsive.
Unidades de medida modernas
Hay un par de instrucciones CSS que permiten la combinación de diferentes tipos de unidades de medida en sus parámetros, obteniendo combinaciones:
- clamp(): La función CSS clamp() fija un valor intermedio dentro de un rango de valores entre un límite mínimo y un límite máximo definidos. La función acepta tres parámetros: un valor mínimo, un valor preferido y un valor máximo permitido.
- calc(): Por su parte, calc() permite operaciones matemáticas cuyo resultado será devuelto a la propiedad sobre la cual se aplica.
| Unidad | Significado |
|---|---|
clamp(min, value, max) | elige un valor flexible entre min y max |
calc( | permite operaciones matemáticas |
Usos típicos
h1 {
font-size: clamp(1rem, 2.5vw, 2rem);
width: calc(100% - 8px);
}Consejo: clamp() es genial para escalar texto fluidamente sin media queries y calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias.
Puedes consultar la documentación oficial sobre combinaciones de unidades de medida CSS en los siguientes enlaces: función clamp(), la función calc().
Unidades de medida CSS
Para resumir todo lo explicado, podemos esquematizar el uso y el contexto sobre las unidades de medida CSS en la siguiente tabla:
| Contexto | Unidad recomendada |
|---|---|
| Tipografía escalable | rem, em |
| Layout flexible | %, vw, vh |
| Precisión absoluta | px |
| Diseño responsive | vw, vh, clamp() |
| Espacios internos | em (solo si es relativo a fuente) |
| Imprimir | cm, in, pt |
Conocer bien las unidades de medida en CSS no solo mejora la precisión en el diseño, sino que también permite construir interfaces más adaptables, escalables y accesibles. Desde las unidades absolutas más clásicas hasta las relativas más modernas como vw, vh o rem, cada una tiene su lugar en el diseño web profesional. Elegir la unidad de medida adecuada en cada contexto es clave para lograr maquetaciones consistentes, flexibles y preparadas para cualquier dispositivo. Dominar esta base técnica es, sin duda, uno de los pilares para escribir CSS limpio, eficaz y duradero.
¡ Espero que este artículo sea de vuestro interés !