Tipografía web: tamaños, interlineado, medida de línea y escalas fluidas con clamp()

Hay una prueba que hacemos en el estudio antes de dar por bueno el diseño de cualquier web: leer en voz alta un párrafo entero en el móvil, con la mano estirada, como lo leería alguien en el autobús. Si llegamos al final sin perder la línea, sin entornar los ojos y sin ganas de hacer zoom, la tipografía funciona. Si no, da igual lo bonita que sea la fuente: la web se está leyendo con esfuerzo.

La mayoría de webs que revisamos no fallan por la elección de la tipografía, sino por cómo se ha puesto en página. Un cuerpo de 14 px en el móvil, un interlineado apretado, líneas de 120 caracteres en el escritorio, titulares enormes en el portátil que en el móvil ocupan media pantalla. Son ajustes de números, y precisamente por eso tienen solución precisa.

Esta guía va de esos números. Para la parte más estratégica, cómo elegir una tipografía que hable por tu marca, tienes por qué la tipografía importa más de lo que parece. Aquí nos centramos en que el texto se lea con gusto.

01Legibilidad y lecturabilidad: dos cosas que se cuidan por separado

En tipografía se distinguen dos ideas que en castellano a veces se confunden. La legibilidad depende del dibujo de las letras: lo fácil que es distinguir una «a» de una «o», una «I» de una «l». La lecturabilidad (readability) depende de cómo se componen: tamaño, interlineado, longitud de línea, contraste y espaciado. Una fuente muy legible puede leerse fatal si se compone mal, y una fuente con carácter puede leerse de maravilla bien compuesta.

Para elegir una fuente de texto en pantalla, estos rasgos ayudan:

• →Altura de x generosa: la altura de las minúsculas sin ascendentes. A igual tamaño, una fuente con más altura de x parece más grande y se lee mejor.
• →Aperturas amplias en letras como c, e, a y s, que evitan que se cierren a tamaños pequeños.
• →Formas diferenciadas entre caracteres parecidos: I, l, 1; O y 0; rn y m.
• →Espaciado pensado para texto, ni muy apretado ni muy abierto.
• →Familia completa: cursiva real, al menos regular y negrita, números tabulares si vas a mostrar precios o tablas.

02Tamaño de cuerpo: el número del que depende todo lo demás

El cuerpo base es el tamaño del texto corrido, y de él se derivan el resto de tamaños. Estos son los rangos que usamos como punto de partida:

El matiz del tamaño real es importante: 18 px en Georgia y 18 px en una fuente geométrica de altura de x pequeña parecen tamaños distintos. Por eso los rangos son orientativos y la decisión final se toma probando en pantallas reales.

03Interlineado y medida de línea: el ritmo de la lectura

Interlineado

El interlineado (line-height) es la distancia entre líneas. Si es escaso, el ojo salta a la línea equivocada al volver al principio; si es excesivo, las líneas se separan y el párrafo pierde unidad. Valores de referencia:

• →Texto corrido: entre 1,5 y 1,7. Cuanto más larga sea la línea, más interlineado necesita.
• →Titulares: entre 1,05 y 1,25. Los titulares grandes con interlineado de texto parecen desmoronados.
• →Botones y etiquetas de una línea: 1 a 1,2, porque el espacio lo da el relleno del componente.

WCAG 2.2 incluye un criterio útil aquí, el 1.4.12 (espaciado del texto): la web tiene que seguir funcionando si el usuario aplica un interlineado de 1,5, un espacio entre párrafos de 2 veces el tamaño de letra, un espaciado entre letras de 0,12 y entre palabras de 0,16. Diseñar ya con un interlineado de 1,5 o más en el texto corrido te deja en buena posición.

Medida de línea

La medida es la cantidad de caracteres por línea. Robert Bringhurst, en Los elementos del estilo tipográfico, considera cómoda una medida de entre 45 y 75 caracteres, con 66 como valor ideal para un texto continuo. En la web esa referencia sigue funcionando, y la unidad ch de CSS (el ancho del carácter «0» de la fuente) permite expresarla directamente:

.prosa { max-width: 68ch; }
.prosa p { line-height: 1.6; }
.prosa h2 { max-width: 24ch; line-height: 1.15; text-wrap: balance; }
.prosa p { text-wrap: pretty; }

text-wrap: balance reparte las palabras de un titular de forma equilibrada entre sus líneas, y text-wrap: pretty evita que un párrafo termine con una palabra suelta en la última línea. Los navegadores que no los conocen simplemente los ignoran, así que se pueden usar sin riesgo.

En el móvil la medida suele quedarse en 35–45 caracteres por limitaciones del ancho, y no pasa nada: es lo natural en una columna estrecha. En escritorio es donde hay que vigilar, porque es fácil que un párrafo se estire a todo el ancho de la retícula. Si quieres ver cómo encaja la medida con las columnas, lo contamos en retícula y grid en diseño web.

04Escalas tipográficas: tamaños que se relacionan entre sí

Una escala tipográfica es una serie de tamaños calculados multiplicando el cuerpo base por una proporción fija. En vez de elegir 18, 23, 31, 42 a ojo, eliges una razón y la escala se construye sola. El resultado tiene coherencia interna, y el diseño se percibe más ordenado.

Las proporciones más usadas tienen nombres musicales, herencia de la idea de armonía:

Un truco que usamos a menudo: una proporción más contenida en móvil (1,2) y otra más amplia en escritorio (1,25 o 1,333). Así los titulares crecen más que el texto al aumentar la pantalla, que es justo lo que pide la composición. Y eso nos lleva a la tipografía fluida.

05Tipografía fluida con clamp(): la fórmula explicada

La tipografía fluida hace que un tamaño crezca de forma continua entre un mínimo y un máximo según el ancho de pantalla, sin saltos en cada punto de corte. En CSS se expresa con la función clamp(mínimo, preferido, máximo).

El valor preferido es una recta: un valor fijo más una parte proporcional al ancho de ventana. Para calcularla:

1. 01Elige el ancho mínimo y máximo de pantalla entre los que quieres que el texto crezca. Por ejemplo, 360 px y 1.440 px.
2. 02Elige el tamaño en cada extremo. Por ejemplo, cuerpo de 16 px en 360 y 20 px en 1.440.
3. 03Calcula la pendiente: (20 − 16) / (1.440 − 360) = 0,0037. Multiplicada por 100 da 0,37vw.
4. 04Calcula el valor fijo: 16 − 0,0037 × 360 = 14,67 px, que en rem (dividiendo entre 16) son 0,917rem.
5. 05Escribe el resultado: clamp(1rem, 0.917rem + 0.37vw, 1.25rem).

Aplicado a una escala completa queda así:

:root {
  --fs-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.95rem);
  --fs-base: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.125rem + 0.556vw, 1.625rem);
  --fs-h2: clamp(1.625rem, 1.333rem + 1.296vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.667rem + 2.593vw, 4rem);
}
body { font-size: var(--fs-base); line-height: 1.6; }
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }

Fíjate en que el valor preferido mezcla rem y vw. Es deliberado. Si fuese solo vw, al hacer zoom con el navegador el texto apenas crecería, porque el zoom no cambia mucho el ancho de ventana, y eso incumpliría el criterio 1.4.4 de WCAG, que pide poder ampliar el texto al 200 %. Con la parte en rem, el texto responde al zoom y a la preferencia de tamaño del usuario. Herramientas como Utopia (utopia.fyi) calculan estas escalas automáticamente y son un buen atajo.

06Cargar las fuentes rápido y sin saltos

La mejor composición del mundo se estropea si el texto tarda en aparecer o salta al cargar la fuente. Estas pautas afectan directamente a los Core Web Vitals, sobre todo al LCP (el tiempo en mostrar el contenido principal) y al CLS (los desplazamientos inesperados):

1. 01Formato WOFF2, el más comprimido y compatible con todos los navegadores actuales.
2. 02Subconjuntos (*subsetting*): si la web está en español e inglés, basta con el juego latino. Un archivo con alfabetos que no usas pesa el doble.
3. 03Fuentes variables cuando vayas a usar más de tres pesos: un archivo con todos los grosores suele pesar menos que tres archivos sueltos.
4. 04`font-display: swap` para que el texto se muestre de inmediato con una fuente del sistema y se cambie cuando llegue la buena.
5. 05Precarga de la fuente del texto principal con <link rel="preload">, solo de una o dos, no de todas.
6. 06Ajuste de la fuente de reserva con size-adjust y ascent-override en @font-face, para que la fuente del sistema ocupe lo mismo que la definitiva y el cambio no mueva el diseño. Next.js y otros frameworks lo hacen automáticamente.

En cómo optimizar LCP, INP y CLS tienes el resto de técnicas de rendimiento.

07Ejemplo resuelto: la web de una clínica dental

Una clínica nos pidió revisar su web porque los pacientes mayores llamaban para preguntar cosas que estaban escritas en la página. El diagnóstico tipográfico fue rápido: cuerpo de 14 px en móvil, gris claro sobre blanco con contraste de 3,2:1, interlineado de 1,3 y párrafos de 110 caracteres en escritorio.

Los cambios fueron todos numéricos:

• →Cuerpo base fluido de 17 a 19 px con clamp().
• →Color del texto oscurecido hasta un contraste de 9:1, muy por encima del 4,5:1 que pide WCAG AA.
• →Interlineado de 1,65 en texto corrido.
• →Medida limitada a 66ch.
• →Escala de tercera menor (1,2) en móvil y tercera mayor (1,25) en escritorio, para que los titulares de los tratamientos no ocupasen media pantalla en el teléfono.
• →Una sola familia variable en lugar de cuatro archivos estáticos.

La identidad visual no cambió; la tipografía era la misma. Lo que cambió fue que la web empezó a leerse, y las llamadas para preguntar el horario se redujeron de forma notable según nos contó el equipo de recepción.

08Un texto que se lee con gusto

La buena tipografía web pasa desapercibida. Nadie comenta que el interlineado es cómodo o que la medida es la justa; simplemente leen hasta el final. Y en una web, que alguien lea hasta el final suele ser el paso previo a que escriba, reserve o compre.

En SIMA trabajamos la tipografía como parte del sistema de cada proyecto de diseño web y experiencia digital: escala, valores fluidos, carga de fuentes y pruebas en pantallas reales. Si tienes la sensación de que tu web se lee con esfuerzo, escríbenos y le echamos un vistazo juntos.