Fundamentos de tipografía: tamaño, peso, espaciado y ritmo

Los fundamentos de tipografía se reducen a seis decisiones: el tamaño de cada texto, su peso, el interlineado, el espaciado entre letras, la alineación y la longitud de línea. Si aciertas con ellas, casi cualquier tipografía decente parece profesional; si te equivocas, la mejor fuente del mundo parece de aficionado. Cada una tiene un valor por defecto sensato, que verás abajo, y del que puedes apartarte a propósito.

Tamaño: usa una escala tipográfica

Elegir los tamaños uno a uno lleva a una página llena de tamaños casi iguales y sin un orden claro. Una escala tipográfica lo resuelve: parte de un tamaño base y multiplica por la misma proporción en cada escalón. La proporción define el carácter. Las proporciones pequeñas, como 1,2, se sienten tranquilas y densas; las grandes, como 1,5, se sienten dramáticas y editoriales.

:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }

En las publicaciones para redes el lienzo es más grande, así que las cifras son mayores, pero la idea es la misma. En una publicación de 1080 píxeles de ancho, un titular de unos 90 a 120 píxeles y una línea de detalle de unos 40 a 56 mantienen un salto claro entre ellos y se leen en un móvil.

Peso: menos pesos, saltos más claros

El peso es el grosor de los trazos, normalmente numerado de 100 (fina) a 900 (black), con 400 como regular y 700 como negrita. Dos o tres pesos bastan para la mayoría de los diseños. La clave es que los pesos vecinos se vean distintos: regular frente a negrita se lee como un contraste deliberado, regular frente a medio suele leerse como un error.

Interlineado: aire entre líneas

El interlineado es la distancia de una línea a la siguiente. El texto de lectura necesita aire para leerse con comodidad: unas 1,4 a 1,6 veces el tamaño de la fuente es un rango fiable. Los titulares grandes necesitan menos, en torno a 1,0 a 1,2, porque en tamaños grandes los huecos parecen mucho más anchos de lo que son. Las líneas largas necesitan algo más de interlineado que las cortas, para que el ojo encuentre el inicio de la siguiente. Interlineado y longitud de línea profundiza en ello.

Espaciado entre letras: casi siempre, no lo toques

Los diseñadores de cada tipografía la espacian para los tamaños a los que está pensada, así que el texto de lectura rara vez necesita ajustes. Hay dos excepciones que conviene conocer. Los titulares grandes suelen verse mejor algo más apretados, con un valor negativo pequeño como -0.01em a -0.02em. El texto en mayúsculas y las etiquetas pequeñas necesitan lo contrario: un poco de espacio extra, en torno a 0.05em a 0.1em, porque las mayúsculas se diseñaron para ir junto a minúsculas. Espaciado entre letras cubre los detalles.

Alineación

El texto alineado a la izquierda, con el borde derecho irregular, es el valor por defecto por una razón: cada línea empieza en el mismo sitio, así que el ojo la encuentra con facilidad. El texto centrado va bien para piezas cortas, como un titular, una cita o una invitación, y cansa pasadas unas pocas líneas. El texto justificado queda ordenado en papel, donde el software separa bien las palabras con guiones, pero en la web suele abrir huecos desiguales entre palabras.

Longitud de línea: la medida

La longitud de una línea, la medida, importa tanto como su tamaño. Las líneas demasiado largas hacen difícil encontrar la siguiente; las demasiado cortas rompen el ritmo de lectura con saltos constantes. Un rango de unos 45 a 75 caracteres por línea es el que más se recomienda para el texto de lectura. En la web, la unidad ch lo pone fácil.

article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}

Ritmo: un espaciado que agrupa

El espacio dice a los lectores qué va junto. Un título debe quedar más cerca del párrafo que presenta que del anterior, así que pon más espacio encima de los títulos que debajo. Mantén constante el espacio entre párrafos y usa una sola unidad de espaciado, a menudo basada en el interlineado del texto de lectura, en todo el diseño. Cuando el espacio se usa con coherencia, la página gana un ritmo que la hace sentirse tranquila incluso cuando está llena. Jerarquía visual parte de aquí.

1. 1

   Elige un tamaño de lectura

   16 píxeles o más en pantallas; mucho más en publicaciones para redes.

2. 2

   Elige una proporción de escala

   1,2 para algo tranquilo y denso, 1,25 para casi todo, 1,333 o más para drama editorial.

3. 3

   Define dos pesos

   Regular para leer, negrita o seminegrita para el énfasis y los títulos.

4. 4

   Define los interlineados

   Unos 1,5 para el texto de lectura, unos 1,1 para los titulares grandes.

5. 5

   Limita la medida

   Unos 65 caracteres para el texto de lectura.

6. 6

   Espacia con una unidad

   Un escalón de espaciado, reutilizado, con más espacio encima de los títulos que debajo.

Con esto resuelto, elegir tipografía pasa a ser la parte divertida y no el remedio. Empieza por combinar fuentes y serif o sans serif.