Los tres tipos de unidades de CSS
Las unidades de longitud de CSS se agrupan en tres familias: absolutas, relativas a la tipografía y relativas a la ventana. Cada familia tiene una referencia distinta, y eso determina cuándo conviene usarla.
Unidades absolutas
- Grosores de borde (los bordes de 1px o 2px se ven nítidos)
- Sombras y desenfoques
- Valores que no deberían escalar con el tamaño del texto
- Puntos de corte de las consultas de medios (aunque los basados en rem ganan terreno)
**Evita px para:** los tamaños de fuente y los espaciados que deberían responder a la preferencia tipográfica del navegador. Quien ajuste su navegador a un tamaño base de 20px por accesibilidad se encontrará con que el texto en px ignora esa preferencia.
Unidades relativas a la tipografía
**rem (root em)**: relativa al tamaño de fuente del elemento raíz (<html>). El valor por defecto del navegador es 16px, así que 1rem equivale a 16px, pero respeta la preferencia de quien navega.
Es la mejor unidad para los tamaños de fuente, casi todos los espaciados (relleno, margen, hueco) y el tamaño de los componentes que deberían escalar con la preferencia tipográfica. Usar rem en todo el sitio lo hace accesible para quien ha configurado un tamaño de letra mayor.
**em**: relativa al tamaño de fuente *del propio elemento* (o del padre más cercano, en propiedades como el margen y el relleno). Eso crea una cascada:
css
.card { font-size: 1.25rem; }
.card p { margin-bottom: 1em; } /* aquí 1em son 1,25rem */
Usa em para espaciados que deban escalar con el tamaño de letra del propio elemento (el espaciado entre letras, la altura de línea o el relleno dentro de un componente). Evita em en el tamaño de fuente de elementos anidados, porque se multiplica de formas confusas.
Unidades relativas a la ventana
**vw (ancho de la ventana)**: 1vw es el 1 % del ancho visible. **vh (alto de la ventana)**: 1vh es el 1 % del alto visible.
Usa vw y vh para secciones a pantalla completa (height: 100vh), tipografía fluida que escale con el ancho de pantalla (font-size: 4vw) y elementos fijos que deban llenar la pantalla.
**Cuidado:** 100vh en los navegadores móviles incluye la interfaz del navegador (la barra de direcciones), lo que hace la página más alta que la zona visible. Usa 100dvh (alto dinámico) en su lugar: funciona en todos los navegadores modernos desde 2023.
**svh, dvh y lvh**: las unidades nuevas. svh es el alto mínimo posible (en móvil con las barras visibles), dvh se actualiza según aparecen o desaparecen las barras y lvh es el alto máximo posible.
**ch**: el ancho del carácter "0" en la tipografía actual. Va muy bien para limitar el ancho del texto: max-width: 65ch da líneas de lectura cómoda sin tener que saber el ancho exacto en píxeles.
Cómo decidir
| Situación | Unidad que conviene |
|---|---|
| Tamaños de fuente | rem |
| Espaciado (relleno, margen, hueco) | rem |
| Espaciado interno que escala con el texto | em |
| Grosores de borde | px |
| Secciones a pantalla completa | 100dvh |
| Tipografía fluida | clamp(1rem, 2.5vw, 2rem) |
| Contenedores de texto legible | 60-75ch |
| Puntos de corte de consultas de medios | rem o px (cualquiera, pero sé coherente) |
clamp(): lo mejor de los dos mundos
clamp(mínimo, ideal, máximo) te permite fijar valores fluidos que escalan entre un mínimo y un máximo:
css
font-size: clamp(1rem, 2.5vw, 2rem);
Es decir: nunca menos de 1rem, escala con el ancho de la ventana a 2,5vw y nunca más de 2rem. Esto sustituye a un montón de puntos de corte de consultas de medios para la tipografía.
Convertir entre unidades
El conversor de unidades CSS de NoxaKit pasa al instante entre px, rem, em, vw, vh y porcentajes. El conversor de espaciado de Tailwind asocia los valores en píxeles a la clase más próxima de la escala de Tailwind, muy útil al migrar de un CSS propio a un framework de utilidades.