Portada y preliminares
Portada y preliminares
11 reglasAísla la portada con break-after: page y sin elementos corrientes
La portada es una pieza aparte: ciérrala con break-after: page para que el cuerpo arranque en hoja nueva, y suprime el folio y el encabezado/pie corrientes con @page :first. Un número de página o un título de capítulo colado en la portada es la señal más clara de un PDF amateur.
.cover { break-after: page }
Ordena los preliminares en su secuencia canónica
Los preliminares tienen un orden fijo: portadilla, portada completa, créditos/colofón, dedicatoria, índice y luego el cuerpo. Saltarse o barajar estas páginas se lee como descuido; cada una tiene su función y su posición convencional antes de la página 1 del texto.
Numera los preliminares en romano y reinicia arábigo en el cuerpo
Los preliminares llevan romano en minúscula (i, ii, iii); el cuerpo reinicia en arábigo 1 en su primera página. En CSS Paged Media reinicia el contador al abrir el cuerpo, o en Paged.js gobiérnalo con una página nombrada para la sección preliminar. Así los folios impresos concuerdan con el índice.
.body:first-of-type { counter-reset: page 1 }
Construye la jerarquía: título dominante, marca y fecha subordinados
Un elemento debe ganar claramente: el título, el más grande. Subtítulo, autor o marca, y fecha bajan en tamaño y peso para que el ojo aterrice en orden. El equilibrio óptico gana a centrar por matemática: sube el bloque un poco sobre el centro geométrico para que no se vea bajo.
Usa la retícula: coloca con tensión y aire, no centres por defecto
Una portada editorial cuelga sus elementos de la misma retícula que el interior: título alineado a una columna, marca fijada a un margen, espacio en blanco generoso. Centrar todo al medio es el default seguro que se lee genérico. La asimetría con un borde de alineación fuerte se siente intencional.
Da su sangrado de 3mm a la imagen de portada full-bleed
Si el arte o la tinta de la portada llega al borde, debe extenderse 3mm (0.125in) más allá del trim, igual que cualquier elemento a sangre, más print-color-adjust: exact para que el motor conserve el color. Pon @page :first { margin: 0 } y coloca el texto seguro como padding de un contenedor interno para que la tolerancia de guillotina nunca deje filo blanco.
Diseña contraportada y solapas con su propio contenido
En piezas impresas la contraportada y las solapas llevan contenido definido: sinopsis y código de barras/ISBN atrás, bio del autor y una cita destacada en las solapas. Trátalas como páginas diseñadas, no como sobras; una contra pelada o una solapa vacía desperdicia un espacio que el lector sí mira.
Registra el colofón: fuente, versión, fecha y licencia
Un colofón o página de créditos declara las tipografías usadas, la versión del documento, la fecha y la licencia o copyright. En libros va en la página de créditos (verso de la portada); en reportes y decks, como bloque pequeño al pie. Hace el PDF autodocumentado y zanja las dudas de reuso antes de que surjan.
Versión 1.2 · 2026-07-17
CC BY-NC 4.0
Haz que la portada anticipe el sistema del interior
La portada es una promesa del sistema visual interior: el mismo color de acento, la misma familia tipográfica y la misma lógica de espaciado deben reaparecer en el cuerpo. Una portada que no se parece a su interior se siente pegada. Lleva un elemento firma (un filete, una banda de color, la tipografía del título) hasta las primeras páginas.
Patrón de portada de reporte: marca arriba, título abajo, mucho aire
Para reportes y decks el patrón editorial confiable es: logo o marca fijados al margen superior, título anclado cerca del tercio inferior y mucho espacio vacío entre ambos. Resiste llenar el hueco; el aire es lo que señala un documento cuidado. Añade fecha y autor como línea pequeña bajo el título.
Mantén la información crítica de la portada fuera de la zona de corte
El título, el logo y cualquier línea imprescindible quedan al menos a 3 a 5mm dentro del trim, en la zona segura, sin tocar nunca el borde. La tolerancia de guillotina de unos +-1mm puede rebanar lo que se coloque muy cerca. En una portada full-bleed esto significa que el fondo sangra pero la tipografía se queda holgada dentro del margen seguro.
- R-200 Aísla la portada con break-after: page y sin elementos corrientes
- R-201 Ordena los preliminares en su secuencia canónica
- R-202 Numera los preliminares en romano y reinicia arábigo en el cuerpo
- R-203 Construye la jerarquía: título dominante, marca y fecha subordinados
- R-204 Usa la retícula: coloca con tensión y aire, no centres por defecto
- R-205 Da su sangrado de 3mm a la imagen de portada full-bleed
- R-206 Diseña contraportada y solapas con su propio contenido
- R-207 Registra el colofón: fuente, versión, fecha y licencia
- R-208 Haz que la portada anticipe el sistema del interior
- R-209 Patrón de portada de reporte: marca arriba, título abajo, mucho aire
- R-210 Mantén la información crítica de la portada fuera de la zona de corte