Unidades CSS

Ya sabes escribir una declaración como color: teal. Las propiedades de tamaño necesitan una segunda idea: qué tan grande. font-size: 16 solo es inválido para la mayoría de longitudes — el navegador necesita una unidad para saber qué significa «16».

¿Qué son las unidades CSS?

Las unidades CSS son las terminaciones de medida unidas a valores de longitud — por ejemplo px, rem, %, vw y vh. Las unidades absolutas mantienen el mismo tamaño sin importar el padre. Las relativas escalan con otra cosa: la fuente del elemento, la fuente raíz, el tamaño del padre o el viewport.

Absolutas vs relativas de un vistazo

Usa esta tabla como mapa. No necesitas cada unidad el primer día — aprende las familias y luego practica las cotidianas.

Píxeles (px)

px es una unidad absoluta en pantalla. Es predecible para bordes finos y detalles fijos pequeños. Es menos ideal como única unidad para toda la tipografía en un sitio responsive, porque no escala automáticamente con la preferencia de fuente raíz del usuario como puede hacerlo rem.

Cuándo px sigue brillando

Prefiere px para bordes finísimos, desplazamientos de sombra y chrome de UI diminuto con borde fijo. Prefiere unidades relativas cuando el diseño debe respirar con el tamaño de fuente o el ancho del contenedor.

rem y em

rem es relativa al tamaño de fuente del elemento raíz (normalmente <html>). em es relativa al tamaño de fuente del elemento actual (o del padre, según la propiedad). Para principiantes, rem es el valor predeterminado más seguro para font-size y muchos espaciados porque se mantiene coherente en elementos anidados.

em en una frase

Usa em cuando quieras que un valor escale con la fuente local — por ejemplo padding que crezca si el texto de ese componente se agranda. Si los em anidados se multiplican y se «descontrolan», pasa esos tamaños a rem.

Porcentajes (%)

Un porcentaje es relativo a una medida del padre. Con width: 50%, el elemento apunta a la mitad del ancho del padre (cuando el padre tiene un ancho definido). Los porcentajes son la herramienta clásica para diseños fluidos dentro de un contenedor.

Unidades de viewport (vw y vh)

1vw es el 1 % del ancho del viewport; 1vh es el 1 % de la altura del viewport. Son potentes para héroes a pantalla completa, pero fáciles de abusar — el texto medido solo en vw puede volverse ilegible en pantallas muy anchas o muy estrechas.

Un hábito predeterminado práctico

Hábito inicial útil: rem para tamaños de fuente y casi todo el espaciado vertical, % o herramientas de layout flexibles (más adelante: Flexbox/Grid) para anchos, y px para bordes y detalles fijos diminutos. Retoma las unidades de viewport cuando construyas secciones a todo el ancho — no para cada margen.

Pruébalo tú mismo

1. Crea una regla .card con width: 80%, max-width: 24rem y border: 1px solid #94a3b8.
2. Define .card h2 { font-size: 1.5rem; } y un párrafo corto a 1rem.
3. Añade una sección .banner { min-height: 40vh; } encima de la tarjeta.
4. Redimensiona la ventana y cambia html { font-size: … } raíz para sentir cómo reaccionan distinto %, vh y rem.
5. Opcional: convierte el encabezado a 1.5em dentro de .card y observa si el anidamiento te sorprende.

Errores comunes

• Escribir font-size: 16 sin unidad — inválido para longitudes en CSS estándar
• Usar solo px para cada fuente en un sitio que debería respetar zoom/preferencias
• Anidar muchos em hasta que el texto sea enorme o diminuto
• Fijar el texto del cuerpo solo con vw y que las líneas exploten en monitores grandes
• Asumir que la altura % funciona cuando el padre no tiene altura explícita

Resumen

• Los valores de longitud suelen necesitar una unidad (px, rem, %, vw, …)
• Las absolutas se mantienen fijas; las relativas escalan con fuente, padre o viewport
• Prefiere rem para tipografía, %/sistemas de layout para anchos, px para bordes finos
• em escala con la fuente local; vw/vh con el viewport
• Elige la unidad según el trabajo — no fuerces una sola unidad en todas partes