Unidades de Medida en CSS

Las unidades de medida en CSS son fundamentales para definir tamaños, espaciados y posiciones de elementos en nuestras páginas web. Elegir la unidad correcta puede marcar la diferencia entre un diseño rígido y uno flexible que se adapte a diferentes dispositivos y preferencias de usuario.

Tipos de unidades

Las unidades de CSS se pueden clasificar en dos grandes grupos:

1. Unidades absolutas: Tienen un valor fijo y no cambian según el contexto.
2. Unidades relativas: Su valor depende de otro valor de referencia.

Unidades absolutas

Píxeles (px)

Los píxeles son la unidad más básica y común en el diseño web.

.elemento {
  width: 300px;
  height: 200px;
  font-size: 16px;
  margin: 10px;
}

Ventajas:

• Precisión exacta
• Consistencia visual en pantallas similares

Desventajas:

• No se adaptan bien a diferentes tamaños de pantalla
• No respetan las preferencias de tamaño de texto del usuario

Otras unidades absolutas

Estas unidades se usan principalmente para medios impresos:

.para-imprimir {
  margin: 1in; /* pulgadas */
  padding: 1cm; /* centímetros */
  border-width: 1mm; /* milímetros */
  width: 10pt; /* puntos (1pt = 1/72 de pulgada) */
  height: 1pc; /* picas (1pc = 12pt) */
}

Unidades relativas

Porcentaje (%)

El porcentaje se calcula en relación al elemento padre.

.contenedor {
  width: 80%; /* 80% del ancho del elemento padre */
  margin: 0 auto;
}

.columna {
  width: 50%; /* La mitad del ancho del elemento padre */
  float: left;
}

Ejemplo práctico:

<div class="contenedor">
  <div class="columna">Columna 1</div>
  <div class="columna">Columna 2</div>
</div>

.contenedor {
  width: 800px;
  background-color: #f0f0f0;
  overflow: hidden; /* Limpia los floats */
}

.columna {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}

.columna:first-child {
  background-color: #e0e0e0;
}

em

La unidad em es relativa al tamaño de fuente del elemento actual.

body {
  font-size: 16px; /* Tamaño base */
}

h1 {
  font-size: 2em; /* 2 × 16px = 32px */
}

p {
  font-size: 1em; /* 1 × 16px = 16px */
  margin-bottom: 1.5em; /* 1.5 × 16px = 24px */
}

Un aspecto importante a tener en cuenta es que los em se acumulan en elementos anidados:

<div class="padre">
  Texto del padre
  <div class="hijo">
    Texto del hijo
    <div class="nieto">Texto del nieto</div>
  </div>
</div>

.padre {
  font-size: 1.5em; /* Si el body es 16px, esto será 24px */
}

.hijo {
  font-size: 1.5em; /* 1.5 × 24px = 36px */
}

.nieto {
  font-size: 1.5em; /* 1.5 × 36px = 54px */
}

rem

La unidad rem (root em) es relativa al tamaño de fuente del elemento raíz (html).

html {
  font-size: 16px; /* Tamaño base */
}

h1 {
  font-size: 2rem; /* 2 × 16px = 32px */
}

p {
  font-size: 1rem; /* 1 × 16px = 16px */
  margin-bottom: 1.5rem; /* 1.5 × 16px = 24px */
}

A diferencia de em, los rem no se acumulan en elementos anidados:

.padre {
  font-size: 1.5rem; /* 1.5 × 16px = 24px */
}

.hijo {
  font-size: 1.5rem; /* 1.5 × 16px = 24px (no 1.5 × 24px) */
}

.nieto {
  font-size: 1.5rem; /* 1.5 × 16px = 24px (no 1.5 × 24px) */
}

Unidades viewport

Las unidades viewport son relativas al tamaño de la ventana del navegador:

• vw: 1% del ancho del viewport
• vh: 1% de la altura del viewport
• vmin: 1% de la dimensión más pequeña del viewport
• vmax: 1% de la dimensión más grande del viewport

.hero {
  height: 100vh; /* 100% de la altura del viewport */
  width: 100vw; /* 100% del ancho del viewport */
}

.cuadrado {
  width: 50vmin; /* 50% de la dimensión más pequeña */
  height: 50vmin; /* Mantiene la proporción cuadrada */
}

.banner {
  font-size: 5vw; /* Texto que escala con el ancho del viewport */
}

Ejemplo práctico de una sección hero:

<div class="hero">
  <h1>Bienvenido a mi sitio</h1>
</div>

.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3498db;
  color: white;
}

.hero h1 {
  font-size: 5vw;
  text-align: center;
  max-width: 80%;
}

ch

La unidad ch representa el ancho del carácter "0" en la fuente actual.

.columna-texto {
  width: 60ch; /* Aproximadamente 60 caracteres por línea */
  margin: 0 auto;
}

Esta unidad es excelente para crear columnas de texto con una longitud de línea óptima para la legibilidad.

Cuándo usar cada unidad

Casos de uso recomendados

• px: Bordes, sombras, elementos pequeños que deben mantener su tamaño exacto
• %: Layouts responsivos, anchos de elementos que deben adaptarse al contenedor
• em: Espaciado relacionado con el tamaño de texto del elemento (padding, margin)
• rem: Tamaños de fuente, espaciado consistente en toda la página
• vw/vh: Elementos que deben adaptarse al tamaño de la ventana
• ch: Ancho de columnas de texto para optimizar la legibilidad

Combinando unidades para diseños responsivos

Un enfoque efectivo es combinar diferentes unidades según el propósito:

:root {
  font-size: 16px; /* Tamaño base para rem */
}

body {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 1200px;
  width: 90%; /* Responsivo pero con margen */
  margin: 0 auto;
}

h1 {
  font-size: 2.5rem; /* Tamaño base consistente */
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem; /* Ajuste para pantallas más pequeñas */
  }
}

.hero {
  height: 80vh;
  padding: 2rem;
}

.card {
  width: 300px;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (max-width: 500px) {
  .card {
    width: 100%; /* Cambia a ancho completo en móviles */
  }
}

Ejemplo práctico: Sistema de espaciado escalable

Podemos crear un sistema de espaciado coherente utilizando variables CSS y unidades relativas:

:root {
  --space-unit: 1rem;
  --space-xs: calc(0.25 * var(--space-unit));
  --space-sm: calc(0.5 * var(--space-unit));
  --space-md: calc(1 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3 * var(--space-unit));
  --space-xxl: calc(4 * var(--space-unit));
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.card-title {
  margin-bottom: var(--space-sm);
}

.button {
  padding: var(--space-sm) var(--space-md);
  margin-right: var(--space-xs);
}

/* Ajuste para pantallas más grandes */
@media (min-width: 1200px) {
  :root {
    --space-unit: 1.2rem; /* Aumenta ligeramente el espaciado */
  }
}

Ejemplo práctico: Layout completo con diferentes unidades

Veamos un ejemplo completo de un layout que utiliza diferentes unidades de medida de forma apropiada:

<div class="page">
  <header class="header">
    <h1 class="site-title">Mi Sitio Web</h1>
    <nav class="nav">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
  </header>
  
  <section class="hero">
    <h2>Bienvenido a mi sitio</h2>
    <p>Un ejemplo de diferentes unidades de medida en CSS</p>
  </section>
  
  <main class="content">
    <article class="text-column">
      <h2>Artículo principal</h2>
      <p>Este es un párrafo de ejemplo con un ancho óptimo para lectura...</p>
      <p>Más contenido de ejemplo para demostrar el ancho de la columna...</p>
    </article>
    
    <aside class="sidebar">
      <div class="widget">
        <h3>Sobre mí</h3>
        <p>Información breve sobre el autor...</p>
      </div>
    </aside>
  </main>
  
  <footer class="footer">
    <p>&copy; 2025 Mi Sitio Web</p>
  </footer>
</div>

/* Variables base */
:root {
  /* Tamaño base de fuente */
  font-size: 16px;
  
  /* Sistema de espaciado */
  --space-unit: 1rem;
  --space-xs: calc(0.25 * var(--space-unit));
  --space-sm: calc(0.5 * var(--space-unit));
  --space-md: calc(1 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3 * var(--space-unit));
}

/* Estilos generales */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #333;
}

/* Contenedor principal */
.page {
  max-width: 1200px;
  width: 90%; /* Porcentaje para responsividad */
  margin: 0 auto;
}

/* Encabezado */
.header {
  padding: var(--space-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.site-title {
  font-size: 1.5rem; /* Basado en el tamaño raíz */
  margin: 0;
}

.nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  margin-left: var(--space-md);
}

.nav a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
}

/* Sección hero */
.hero {
  height: 50vh; /* Altura relativa al viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.hero h2 {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.hero p {
  font-size: 1.25rem;
  max-width: 600px;
}

/* Contenido principal */
.content {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}

.text-column {
  flex: 2;
}

.text-column h2 {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.text-column p {
  font-size: 1rem;
  margin-bottom: var(--space-md);
  max-width: 70ch; /* Ancho óptimo para lectura */
}

.sidebar {
  flex: 1;
}

.widget {
  background-color: #f5f5f5;
  padding: var(--space-md);
  border-radius: 4px;
}

.widget h3 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

/* Pie de página */
.footer {
  padding: var(--space-md) 0;
  border-top: 1px solid #eee;
  text-align: center;
  font-size: 0.875rem;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
  
  .hero h2 {
    font-size: 2.5rem;
  }
  
  :root {
    --space-unit: 0.875rem; /* Reduce ligeramente el espaciado */
  }
}

@media (max-width: 480px) {
  .header {
    flex-direction: column;
    text-align: center;
  }
  
  .nav ul {
    margin-top: var(--space-sm);
  }
  
  .nav li:first-child {
    margin-left: 0;
  }
  
  .hero h2 {
    font-size: 2rem;
  }
  
  .hero {
    height: auto;
    padding: var(--space-lg) var(--space-md);
  }
}

Este ejemplo muestra cómo utilizar:

• rem para tamaños de fuente consistentes
• vh para la altura de la sección hero
• % para anchos responsivos
• ch para un ancho de columna de texto óptimo
• Variables CSS para un sistema de espaciado coherente

Conclusión

Elegir las unidades de medida adecuadas en CSS es crucial para crear diseños web flexibles y accesibles. Las unidades relativas como rem, em, % y unidades de viewport son fundamentales para el diseño responsivo, mientras que las unidades absolutas como px tienen su lugar en elementos que requieren precisión visual.

La práctica recomendada es combinar diferentes unidades según el propósito:

• Usa rem para tamaños de fuente y espaciado general
• Usa em para espaciado relacionado con el tamaño de texto del elemento
• Usa % y unidades de viewport para layouts responsivos
• Usa px para elementos pequeños que requieren precisión
• Usa ch para anchos de columna de texto