CSS para jerarquía visual y lectura

Después de construir una página con HTML semántico, llega una pregunta inevitable: ¿cómo hacemos que se lea bien? Ahí entra CSS, pero no como una capa decorativa cualquiera. CSS organiza la atención. Decide qué se ve primero, qué se entiende como grupo, qué parece importante y qué puede esperar.

Muchos estudiantes empiezan CSS cambiando colores, centrando cajas o probando sombras. Eso está bien para explorar, pero una interfaz profesional necesita algo más: jerarquía visual. Una pantalla puede tener buen HTML y aun así sentirse confusa si todos los textos pesan igual, si no hay aire entre bloques o si el ancho de lectura obliga al usuario a perseguir líneas interminables.

En este capítulo veremos cómo usar CSS para mejorar lectura, espaciado, contraste, escala tipográfica y composición. La idea no es memorizar propiedades, sino desarrollar criterio visual para que una página guíe al usuario con claridad.

Qué aprenderás hoy

• Entender qué es jerarquía visual en una interfaz.
• Usar tamaño, peso, color y espaciado para ordenar información.
• Mejorar lectura con line-height, ancho máximo y ritmo vertical.
• Crear variables CSS para mantener consistencia.
• Transformar una tarjeta desordenada en una pieza clara y legible.

Jerarquía visual: decidir qué se lee primero

La jerarquía visual es la forma en que una interfaz ordena la importancia de sus elementos. Un título principal debe sentirse más importante que una descripción. Una acción principal debe distinguirse de una secundaria. Un error debe notarse sin destruir toda la experiencia.

Para construir jerarquía podemos usar varias herramientas: tamaño, peso tipográfico, color, contraste, posición, agrupación y espacio. Lo importante es que esas decisiones tengan intención. Si todo es grande, nada es grande. Si todo grita, nada guía.

MDN documenta propiedades como font-size, font-weight, line-height, color, margin y padding como partes esenciales del lenguaje CSS. Pero aprender CSS no consiste solo en saber qué hacen las propiedades. Consiste en saber cuándo usarlas.

Ejemplo básico: una tarjeta sin jerarquía

Observa esta tarjeta. Tiene contenido, pero no ayuda mucho a leerlo:

<article class="course-card">
  <p>Curso nuevo</p>
  <h2>CSS para interfaces</h2>
  <p>Aprende a mejorar la lectura, el espaciado y la composición visual de una página web.</p>
  <a href="/cursos/css">Ver curso</a>
</article>

.course-card {
  border: 1px solid #cccccc;
  padding: 12px;
}

.course-card p,
.course-card h2,
.course-card a {
  margin: 0;
  font-size: 16px;
}

El problema es claro: todo tiene casi el mismo peso. La etiqueta, el título, la descripción y el enlace compiten al mismo nivel. El usuario debe hacer más esfuerzo para descubrir qué importa.

Ejemplo mejorado: escala, espacio y contraste

Ahora mejoramos la misma tarjeta con una escala visual más clara. No necesitamos efectos complejos. Solo decisiones consistentes.

:root {
  --color-text: #26394d;
  --color-muted: #667085;
  --color-accent: #ff4f4f;
  --color-border: #e5e7eb;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --radius-card: 1rem;
}

.course-card {
  max-width: 640px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  color: var(--color-text);
  background: #ffffff;
}

.course-card__label {
  margin: 0 0 var(--space-1);
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.course-card h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
}

.course-card__description {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.course-card a {
  color: var(--color-accent);
  font-weight: 700;
}

Esta versión ordena la lectura: primero la categoría, luego el título, después la explicación y finalmente la acción. Además, usamos variables CSS para mantener decisiones reutilizables. Eso evita improvisar colores y espacios distintos en cada componente.

Lectura: ancho, línea y aire

Una línea demasiado larga cansa. Una línea demasiado corta rompe el ritmo. En textos web, controlar el ancho máximo ayuda muchísimo. No todo debe ocupar el ancho completo de la pantalla.

.article-content {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

La unidad ch puede servir como referencia aproximada para ancho de lectura porque se relaciona con el ancho del carácter “0” de la fuente. No es una regla mágica, pero ayuda a pensar en líneas legibles en lugar de cajas gigantes.

También importa el interlineado. Un line-height demasiado ajustado hace que los párrafos se sientan densos. Un interlineado demasiado amplio puede separar demasiado las ideas. En contenido largo, valores entre 1.5 y 1.8 suelen dar una lectura más cómoda, aunque siempre conviene revisar con la fuente real.

Espaciado: agrupar sin dibujar cajas para todo

El espacio también comunica. Si dos elementos están cerca, parecen relacionados. Si están separados, parecen pertenecer a grupos distintos. Esta idea permite ordenar una interfaz sin llenar todo de bordes.

.section {
  padding-block: 4rem;
}

.section__header {
  margin-bottom: 2rem;
}

.card-list {
  display: grid;
  gap: 1.5rem;
}

.card p + p {
  margin-top: 1rem;
}

En este ejemplo usamos gap, padding-block y márgenes verticales para crear ritmo. El usuario puede distinguir encabezado, lista y contenido sin que cada bloque necesite un contorno pesado.

Contraste: no todo debe ser gris suave

El contraste es parte de la jerarquía y también de la accesibilidad. Un texto importante necesita suficiente diferencia frente al fondo. Un enlace debe distinguirse. Un botón principal debe parecer accionable. WCAG ofrece criterios para contraste de texto, pero en clase podemos empezar con una práctica sencilla: si debes acercarte a la pantalla para leer, algo está fallando.

.text-primary {
  color: #26394d;
}

.text-secondary {
  color: #667085;
}

.button-primary {
  background: #ff4f4f;
  color: #ffffff;
}

.button-secondary {
  border: 1px solid #26394d;
  color: #26394d;
  background: #ffffff;
}

No uses color como único indicador. Si un campo tiene error, acompaña el color con texto. Si un enlace es importante, revisa que sea reconocible incluso para usuarios con distintas formas de percepción del color.

Variante profesional: una pequeña escala de diseño

A medida que una interfaz crece, conviene definir una escala. Esto no tiene que ser un sistema de diseño completo desde el primer día. Puede empezar con variables para color, espacio, radio, tamaño y sombra.

:root {
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 6vw, 3.5rem);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
}

body {
  font-family: var(--font-base);
  color: #26394d;
}

h1 {
  font-size: var(--text-2xl);
  line-height: 1.05;
}

h2 {
  font-size: var(--text-xl);
  line-height: 1.2;
}

p {
  font-size: var(--text-md);
  line-height: 1.7;
}

Las variables reducen decisiones arbitrarias. En lugar de inventar un tamaño cada vez, eliges dentro de una escala. Esto mejora consistencia y hace más fácil cambiar el diseño después.

Errores comunes

• Usar demasiados tamaños de fuente sin una escala clara.
• Dejar párrafos muy anchos en pantallas grandes.
• Usar gris claro para textos importantes.
• Separar todo con bordes en vez de usar espacio.
• Centrar grandes bloques de texto, dificultando la lectura continua.
• Aplicar estilos al azar sin crear patrones reutilizables.

Reto práctico

Conclusión

CSS para interfaces no se trata solo de que una página “se vea bonita”. Se trata de hacer que la información se lea, se entienda y se use mejor. La jerarquía visual permite que el usuario se oriente. El espaciado organiza grupos. El contraste sostiene la lectura. La escala tipográfica da ritmo.

Cuando aprendes a usar CSS con intención, cada regla deja de ser un experimento suelto y se convierte en una decisión de comunicación. En el siguiente capítulo cambiaremos de terreno: empezaremos con JavaScript, variables, tipos y conversiones, para que las interfaces no solo se vean bien, sino que también respondan a datos y acciones.

Fuentes consultadas

• MDN Web Docs: font-size
• MDN Web Docs: line-height
• MDN Web Docs: CSS custom properties
• W3C WAI: contraste mínimo en WCAG 2.2
• web.dev: Typography