Editorial Craft Bible
Interlineado y medida
Inicio Tipografía editorial Interlineado y medida
Tipografía editorial

Interlineado y medida

11 reglas Butterick Practical Typography · Google Fonts KnowledgeBringhurst, Elements of Typographic Style · webtypography.net 2.1.2Butterick Practical Typography · Google Fonts, choosing line heightAdobe Type · Butterick Practical Typography
05

Interlineado y medida

11 reglas
45

Fija el interlineado en 120-145% del cuerpo

Para texto corrido, un interlineado cómodo es de 1.2 a 1.45 veces el cuerpo; el punto dulce más citado ronda el 140%. Más apretado que 120% y el ojo pierde la línea de retorno; más suelto que 150% y las líneas dejan de leerse como párrafo. En CSS usa line-height: 1.4 sin unidad para que escale con la fuente.

body { font-size: 10.5pt; line-height: 1.4 }
/* 10.5pt × 1.4 = 14.7pt de interlineado */
Correcto

La tipografía editorial busca un ritmo de lectura constante. El ojo recorre la línea y salta con comodidad a la siguiente cuando el espacio vertical acompaña al tamaño del cuerpo y el párrafo respira.

line-height 1.42: el párrafo se lee como un bloque
Evitar

La tipografía editorial busca un ritmo de lectura constante. El ojo recorre la línea y salta con comodidad a la siguiente cuando el espacio vertical acompaña al tamaño del cuerpo y el párrafo respira.

line-height 1.02: las líneas chocan, ascendentes contra descendentes
Butterick Practical Typography · Google Fonts Knowledge
46

Mantén la medida en 45-75 caracteres por línea

La medida es el ancho de línea, contado en caracteres. La regla de Bringhurst es 45-75 caracteres por línea en una sola columna, con 66 (contando espacios) como ideal clásico. Por debajo de 45 el ojo salta de vuelta demasiado seguido; por encima de 75 pierde el arranque de la siguiente línea. En CSS acótala con max-width en unidades ch.

p { max-width: 66ch } /* ~66 caracteres de ancho */
Correcto

Una medida cercana a los sesenta y seis caracteres deja al lector pasar de línea en línea sin esfuerzo, con un salto de retorno corto y predecible en toda la página.

~60-66 cpl: el ojo encuentra la siguiente línea sin esfuerzo
Evitar

Una medida que pasa de cien caracteres obliga al ojo a viajar un largo trecho hasta el arranque de la siguiente línea, y el lector pierde el sitio, relee renglones y se cansa rápido en cualquier pasaje algo extenso.

100+ cpl: el salto de retorno es largo, se pierde la línea
Bringhurst, Elements of Typographic Style · webtypography.net 2.1.2
47

Líneas más largas necesitan más interlineado

La medida y el interlineado van acoplados: cuanto más ancha la columna, más alto debe ser el interlineado para que el ojo encuentre el arranque de la siguiente línea. Una columna estrecha de 45ch lee bien a 1.3; una ancha de 75ch pide 1.5 o más. Nunca ensanches la medida sin abrir el interlineado en proporción.

Correcto

Esta es una columna ancha, así que el interlineado se abre para compensar. El espacio vertical extra mantiene limpio cada salto de retorno, y las líneas largas nunca se colapsan en una masa gris compacta.

medida ancha + line-height 1.55: los saltos quedan limpios
Evitar

Esta es una columna ancha con interlineado apretado, la peor pareja. Las líneas largas y el poco espacio vertical hacen que el ojo pierda el rastro al volver, y caiga una línea arriba o abajo de la que buscaba.

medida ancha + line-height 1.18: el ojo cae en la línea equivocada
Butterick Practical Typography · Google Fonts, choosing line height
48

Aprieta el tracking en display grande, ábrelo en versalitas

El tracking es el interletraje uniforme de un tramo. El display grande se ve suelto a su espaciado por defecto, así que llévalo negativo (-10 a -30 en unidades InDesign, unos -0.01 a -0.03em). Las versalitas y las mayúsculas se ven apretadas, ábrelas positivo (+5 a +10%, unos 0.05-0.1em). El cuerpo de texto se queda en 0.

Correcto
Titular Etiqueta de sección
display -0.02em, etiqueta en mayúsculas +0.09em
Evitar
Titular Etiqueta de sección
titular con huecos, etiqueta en mayúsculas apretada
Adobe Type · Butterick Practical Typography
49

Activa el kerning y corrige pares problemáticos en display

El kerning es el espacio entre pares concretos de letras. Activa el kerning métrico en el cuerpo para que pares como AV, To, Wa, LT y P. cierren bien. En titulares grandes la tabla de kerning no basta, así que corrige a mano los huecos visibles. En CSS deja font-kerning: normal y activa font-feature-settings: 'kern'.

Correcto
WAVE To.
kerning activo: WA y To cierran a su ajuste real
Evitar
WAVE To.
kerning desactivado: se abre un hueco bajo la A y tras la T
Adobe Type · MDN font-kerning
50

No aprietes ni abras el cuerpo de texto

Una fuente de texto viene espaciada por su diseñador para leerse a tamaños de texto; deja el tracking del cuerpo en 0. Apretarlo para meter una palabra más por línea, o abrirlo para rellenar la columna, rompe el ritmo de las palabras y daña la legibilidad. Ajusta la medida, el guionado o el cuerpo, nunca el interletraje del texto corrido.

Correcto

A su espaciado por defecto, las palabras conservan la forma que buscó el diseñador, y el lector las reconoce de un vistazo sin descifrar letra por letra.

letter-spacing 0: la silueta de las palabras queda intacta
Evitar

Abierto para rellenar la línea, las letras se separan, las palabras pierden su silueta, y el lector tiene que rearmar cada una letra por letra.

letter-spacing 0.08em: las palabras se disuelven en letras sueltas
Butterick Practical Typography · Bringhurst
51

Sangría de primera línea o espacio entre párrafos, no ambos

Un cambio de párrafo necesita exactamente una señal: o sangría de primera línea (1em a 1.5em, sin espacio entre párrafos) o un espacio en blanco entre párrafos (sin sangría). Usar las dos deja una muesca visible y desperdicia ritmo vertical; no usar ninguna fusiona los párrafos en un bloque. Nunca sangres el primer párrafo tras un título.

p { text-indent: 1.25em; margin: 0 }
p + p { text-indent: 1.25em } /* no las dos señales */
h2 + p { text-indent: 0 } /* primer párrafo al filo */
Correcto

El primer párrafo tras un título va al filo, sin sangría, porque no hay nada arriba de qué separarlo.

Cada párrafo siguiente se marca con una sola sangría y sin línea en blanco, así la columna queda como un bloque parejo.

solo sangría, sin hueco: una señal limpia por cambio
Evitar

Este párrafo tiene sangría y línea en blanco debajo, así que el cambio se señala dos veces.

La doble marca deja una muesca escalonada al inicio de cada párrafo y desperdicia el ritmo vertical.

sangría más hueco: redundante, muesca escalonada
Butterick Practical Typography · thebookdesigner.com
52

Ancla el interlineado a una rejilla de línea base

Elige una unidad de base igual al interlineado del cuerpo (por ejemplo 15pt) y haz que toda medida vertical sea múltiplo de ella: espacio de párrafo, espacio de título, alto de imagen. Cuando el interlineado se alinea a la rejilla, las líneas de columnas contiguas caen en las mismas bases y el texto respalda limpio en el pliego. Un medio paso perdido saca de la rejilla a todas las líneas siguientes.

Correcto

Ambas columnas comparten un interlineado y una rejilla de base, así la línea uno de la izquierda cae en la misma base que la línea uno de la derecha.

Cada línea del pliego cae en el mismo juego de líneas horizontales, y la página se lee como una superficie calma y alineada.

ambas columnas comparten la rejilla base de 20px
Evitar

La columna izquierda mantiene la rejilla, pero la derecha usa un valor fuera, así sus líneas se despegan un poco más de las bases en cada renglón.

Al pie de la columna los dos textos ya no cuadran, y el desajuste se lee como ruido visual en el pliego.

la columna derecha a 23px se sale de la rejilla
Bringhurst · Josef Muller-Brockmann, Grid Systems
53

Abre el interlineado algo más en pantalla que en impresión

Las pantallas tienen menos resolución, más reflejo y distancia de lectura variable, así que el texto en pantalla pide algo más de aire: apunta a 1.5-1.6 en cuerpo web, frente a 1.3-1.45 del mismo pasaje impreso. No arrastres un valor de impresión de 1.3 tal cual a un PDF de pantalla; las líneas se sentirán apretadas en un display.

Correcto

Este bloque está pensado para un PDF de pantalla a line-height 1.6, así el aire extra compensa el reflejo y la menor densidad de píxel del display.

PDF de pantalla a 1.6: cómodo en un display
Evitar

Este bloque reusa un valor de impresión de 1.25 en pantalla, y las líneas quedan demasiado juntas para leer cómodo en un panel iluminado.

valor de impresión 1.25 reusado en pantalla: muy apretado
WCAG 1.4.8 (1.5 line spacing) · Google Fonts Knowledge
54

Fija el interlineado explícito, nunca lo dejes en auto

El interlineado automático de InDesign es un 120% ciego del glifo más grande de la línea, así que un solo símbolo en línea o un superíndice puede alterar el interlineado de esa línea. Sustituye Auto por un valor absoluto (para texto de 10.5pt, fija 14pt o 15pt). En CSS un line-height sin unidad es el equivalente explícito; evita normal en salida paginada controlada.

Correcto

Cada línea mantiene un interlineado fijo de 20px, incluso la que lleva un símbolo grande, porque el valor es absoluto y no reacciona al tamaño del glifo.

interlineado fijo 20px: el glifo grande no altera la línea
Evitar

Con interlineado auto, la línea que lleva el símbolo grande crece de golpe, abriendo un hueco desigual sobre ella mientras las demás siguen apretadas.

interlineado auto: un glifo grande abre un hueco desigual
Adobe InDesign, leading · MDN line-height
55

Une números y unidades con espacios finos e irrompibles

Un valor y su unidad son un solo token y jamás deben partirse en un salto de línea: escribe 10 mm, 300 PPI, € 25, Dr. Losa. Tipográficamente el hueco debe ser un espacio fino (  / U+2009), más angosto que el de palabra, e irrompible para que aguante. Igual con rangos numéricos y con un nombre y sus iniciales.

10 mm 300 PPI € 25
10 – 20 mm (fino + irrompible)
Correcto

Fija el sangrado en 3 mm y exporta a 300 PPI para el tiraje.

3 mm y 300 PPI quedan enteros en una línea
Evitar

Fija el sangrado en 3 mm y exporta a 300 PPI para el tiraje.

espacios normales dejan que 3 / mm y 300 / PPI se partan
SI Brochure (BIPM) · Bringhurst, Elements of Typographic Style