Tipografía web: las decisiones que más impactan en cómo se siente un sitio

La tipografía es el 95% del diseño web

Esta frase, atribuida al diseñador Oliver Reichenstein, sigue siendo cierta: la mayor parte de lo que hace una página web es texto. Títulos, párrafos, etiquetas, botones, captions, mensajes de error.

Si el texto es difícil de leer, el diseño falla. No importa cuán buenas sean las imágenes o cuánto cuidado se puso en la paleta de colores.

Y lo interesante es que la diferencia entre un texto que se lee fácil y uno que no suele reducirse a cuatro variables: tamaño, interlineado, ancho de columna y elección tipográfica. Ninguna requiere ser diseñador para entenderla.

Variable 1: Tamaño base y escala

El tamaño base del cuerpo de texto debería ser 16px como mínimo. En la práctica, 16-18px es lo ideal para la mayoría de los sitios. Texto más pequeño obliga al usuario a forzar la vista; más grande empieza a verse infantil.

Lo más importante no es el tamaño base en sí, sino la escala entre los distintos niveles tipográficos. Una escala sin contraste suficiente hace que todo parezca del mismo peso visual.

Una escala funcional para la mayoría de los sitios:

:root {
  --text-xs: 0.75rem; /*  12px — captions, metadatos */
  --text-sm: 0.875rem; /*  14px — texto secundario */
  --text-base: 1rem; /*  16px — body */
  --text-lg: 1.125rem; /*  18px — body grande, leads */
  --text-xl: 1.25rem; /*  20px — subtítulos pequeños */
  --text-2xl: 1.5rem; /*  24px — subtítulos */
  --text-3xl: 1.875rem; /*  30px — títulos de sección */
  --text-4xl: 2.25rem; /*  36px — headlines */
  --text-5xl: 3rem; /*  48px — heroes */
  --text-6xl: 3.75rem; /*  60px — heroes grandes */
}

En Tailwind, esta escala ya existe y se usa directamente:

<h1 className="text-4xl font-bold sm:text-5xl lg:text-6xl">
  Headline principal
</h1>
<p className="text-base text-muted sm:text-lg">
  Texto descriptivo secundario.
</p>

Variable 2: Interlineado (line-height)

El interlineado controla cuánto espacio vertical hay entre líneas. Es uno de los factores que más afecta la legibilidad y que más se ignora.

Regla general:

line-height: 1.1 a 1.2 → solo para títulos grandes (más reduciría la elegancia)
line-height: 1.4 a 1.5 → subtítulos y texto de UI
line-height: 1.6 a 1.8 → cuerpo de texto para lectura

/* ✅ Interlineado según contexto */
h1 {
  line-height: 1.1;
}
h2 {
  line-height: 1.2;
}
h3 {
  line-height: 1.3;
}
p {
  line-height: 1.7;
}

/* ❌ Mismo line-height para todo */
* {
  line-height: 1.5;
}

Un párrafo largo con line-height: 1.2 parece asfixiado. El ojo no sabe dónde está la siguiente línea. Con line-height: 1.7, hay aire suficiente para que la lectura sea fluida.

El interlineado correcto hace que el texto se lea sin que el lector sea consciente de leer. El incorrecto hace exactamente lo contrario.

Variable 3: Ancho de columna (measure)

La tipografía clásica habla de measure: el largo ideal de una línea de texto. La recomendación estándar es entre 45 y 75 caracteres por línea, con 60-65 como ideal.

Texto demasiado ancho obliga al ojo a viajar lejos y a veces perderse al volver al margen. Texto demasiado angosto produce demasiados saltos de línea, interrumpiendo el ritmo de lectura.

/* ✅ La unidad "ch" equivale al ancho del carácter "0" en la fuente actual */
.article-body {
  max-width: 65ch;
  margin: 0 auto;
}

/* Alternativa con rem, sabiendo que ~1ch ≈ 0.5em en fuentes promedio */
.article-body {
  max-width: 40rem; /* ≈ 640px con font-size: 16px */
}

Este es el error más frecuente en sitios construidos sin atención tipográfica: párrafos que se extienden de borde a borde en desktop, con 120+ caracteres por línea. Es literalmente difícil de leer.

Variable 4: Pares tipográficos

Usar dos tipografías que se complementan es una de las formas más rápidas de darle personalidad y profesionalismo a un sitio. Pero el criterio importa.

El principio de contraste: las dos fuentes deben ser claramente distintas. Una serif + una sans-serif es el par más confiable y versátil.

Algunas combinaciones que funcionan bien y son gratuitas (Google Fonts):

| Serif (títulos) | Sans-serif (body) | Personalidad | | ---------------- | ----------------- | ----------------------- | | Playfair Display | Source Sans 3 | Elegante, editorial | | Lora | Inter | Clásico moderno | | Merriweather | Open Sans | Legible, confiable | | IBM Plex Serif | IBM Plex Sans | Técnico, preciso | | Fraunces | DM Sans | Contemporáneo, creativo |

// En Next.js con next/font (recomendado: no hay FOUT, se sirve localmente)
import { IBM_Plex_Serif, IBM_Plex_Sans } from "next/font/google";

const serif = IBM_Plex_Serif({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600"],
  variable: "--font-serif",
  display: "swap",
});

const sans = IBM_Plex_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600"],
  variable: "--font-sans",
  display: "swap",
});

Los anti-patrones más comunes

1. Texto justificado en web

El texto justificado (alineado a ambos márgenes) se ve bien en libros impresos porque los algoritmos de composición tipográfica son sofisticados. En CSS, text-align: justify crea ríos de espacios irregulares que hacen el texto difícil de leer, especialmente en mobile.

/* ❌ Evitar en web */
p {
  text-align: justify;
}

/* ✅ Left-aligned por defecto */
p {
  text-align: left;
}

/* Center solo para textos cortos (heroes, captions) */
.hero-text {
  text-align: center;
}

2. Mayúsculas sin letter-spacing

Texto en mayúsculas (text-transform: uppercase) sin espaciado entre letras se ve apretado y difícil de leer.

/* ❌ Mayúsculas apretadas */
.label {
  text-transform: uppercase;
}

/* ✅ Mayúsculas con tracking */
.label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

3. Contraste insuficiente

El WCAG 2.1 requiere un ratio de contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande. Texto gris claro sobre fondo blanco puede verse "moderno" pero es ilegible para personas con baja visión.

Un gris clásico como #9ca3af sobre #ffffff tiene un ratio de solo 2.8:1. No pasa el estándar mínimo.

/* ✅ Texto secundario legible */
--text-muted: #6b7a8f; /* ratio ~4.6:1 sobre blanco */

/* ❌ Demasiado claro */
--text-muted: #c4cdd6; /* ratio ~1.9:1 sobre blanco */

Una prueba rápida para evaluar la tipografía de cualquier sitio

Copiá un párrafo del sitio y pegalo en un editor de texto
Contá cuántos caracteres tiene una línea promedio
Si son más de 80, el texto probablemente sea difícil de leer en desktop
Abrí el sitio en el celular con la pantalla al sol
Si tenés que forzar la vista para leer el body, el tamaño base es demasiado pequeño

La tipografía correcta es invisible. La incorrecta genera una sensación vaga de incomodidad que el usuario raramente puede nombrar pero que siempre siente.

La tipografía es la inversión de diseño con mejor retorno en relación a su costo. No requiere imágenes personalizadas, no necesita animaciones complejas, y se implementa con unas pocas líneas de CSS bien pensadas. Pero la diferencia en cómo se percibe un sitio es enorme.

En Logos, es una de las primeras decisiones que tomamos en cada proyecto: antes de hablar de colores o layouts, elegimos la tipografía. Porque define todo lo demás.