# Branding de newsletter: cabeceras, tarjetas y números reconocibles [Canonical HTML page](https://gradiently.design/es/guide/newsletter-branding) Una bandeja de entrada es una lista de nombres y asuntos hasta que alguien te abre. Entonces tienes la atención de una cabecera para demostrar que esta es la newsletter a la que se suscribió. ## The short version - El branding de newsletter es un nombre, una cabecera, una paleta y una tipografía coherentes en el propio email, el archivo web y las tarjetas que compartes para promocionar cada número. - Una cabecera de email suele diseñarse a 1200×600 píxeles y mostrarse a unos 600 píxeles de ancho, así que sus palabras deben ser grandes y pocas. - La cabecera de una publicación de Substack mide 1456×816 píxeles y además se convierte en la imagen de vista previa cuando se comparte un número. - El sistema de cabecera más fiable mantiene fijos el nombre y el diseño y cambia una sola cosa por número, como el número de edición, un titular o un color de temporada. - Cada número merece dos o tres tarjetas promocionales en tamaños sociales, hechas con el mismo diseño para poder crearlas en minutos. El **branding de newsletter** es lo que hace que un lector reconozca tu número antes de leerlo: la misma cabecera arriba en cada email, una paleta y una tipografía que pasan a tu archivo web, y tarjetas en redes que parecen salidas de la misma publicación. Diseña la cabecera del email a 1200×600 píxeles, la de Substack a 1456×816, y mantén un diseño fijo donde solo cambien los datos del número. Los lectores vuelven a las publicaciones que se sienten estables, y un estilo estable también hace que cada número se produzca más rápido. ## Tamaños de imagen para newsletters | Recurso | Medida | Notas | | --- | --- | --- | | Cabecera de email | 1200×600 px | Se muestra a unos 600 px de ancho en la mayoría de bandejas | | Cabecera de publicación de Substack | 1456×816 px | También es la vista previa al compartir el número | | Vista previa de enlace (Open Graph) | 1200×630 px | Para un archivo alojado por ti o una página de aterrizaje | | Imagen de historia de Medium | 1400×788 px | Si publicas también allí | | Post de X | 1600×900 px | Tarjeta promocional de cada número | | Vertical de Instagram y LinkedIn | 1080×1350 px | Tarjeta promocional y tarjetas de cita | | Firma de email | 600×200 px | Un banner pequeño que enlaza a la suscripción | Diseña la cabecera al doble de su ancho de visualización para que se vea nítida en pantallas de alta densidad. - Cabecera de email 1200×600: 1200 × 600 - Cabecera de Substack 1456×816: 1456 × 816 - Tarjeta promo 1080×1350: 1080 × 1350 - Tarjeta de X 1600×900: 1600 × 900 Cuatro formatos, una publicación. La cabecera de email es la más ancha y baja, así que lleva menos texto. Los tamaños de cada plataforma, con más detalle, están en [tamaño de cabecera de Substack](https://gradiently.design/es/guide/substack-header-size) y [diseño de cabecera de email](https://gradiently.design/es/guide/email-header-design). Si publicas también en LinkedIn, su portada de newsletter tiene sus propias reglas, en [portada de newsletter de LinkedIn](https://gradiently.design/es/guide/linkedin-newsletter-cover). ## Diseña una cabecera que sirva para todos los números La cabecera es la parte superior fija de tu newsletter: el nombre, quizá una frase corta sobre lo que es y los datos del número. Las revistas impresas usan esta idea desde hace más de un siglo porque funciona. Los lectores encuentran el nombre en el mismo sitio cada vez y el contenido de debajo puede cambiar con libertad. Una cabecera ancha de newsletter con el texto La cocina lenta, Número 48, Domingo, y una breve descripción Una cabecera de email: el nombre grande, el número y el día pequeños arriba, una promesa en una línea debajo. 1. **Fija el nombre y su posición** Misma tipografía, mismo tamaño, mismo sitio en todos los números. Es lo que los lectores aprenden. 2. **Elige qué cambia** Escoge una variable: el número, la fecha, un titular o un color de temporada. Con una basta. 3. **Mantén el texto lejos de los bordes** Algunas apps de correo recortan o escalan las cabeceras. Deja las palabras en el 80 por ciento central. 4. **Escribe un texto alternativo de verdad** Algunos lectores tienen las imágenes desactivadas por defecto. Un texto alternativo como «La cocina lenta, número 48» mantiene la cabecera funcionando sin la imagen. Si cambias una sola cosa por número, que tenga sentido. Una carta semanal de cocina puede cambiar de color con las estaciones; una carta mensual de finanzas puede poner en la cabecera la cifra más importante del mes. - Números de primavera: `linear-gradient(120deg, #fef3c7 0%, #a7f3d0 100%)` - Números de verano: `linear-gradient(120deg, #fde68a 0%, #fb923c 100%)` - Números de otoño: `linear-gradient(120deg, #fed7aa 0%, #9a3412 100%)` - Números de invierno: `linear-gradient(120deg, #e0e7ff 0%, #475569 100%)` Cuatro fondos estacionales tras una cabecera fija. Los lectores sienten pasar el año mientras la publicación sigue siendo la misma. ## Una paleta y una tipografía que se lean en la bandeja de entrada La mayor parte de una newsletter es texto, así que la tipografía importa más que la cabecera. Usa una tipografía de cuerpo legible, una de títulos distintiva para el nombre y un color de acento para enlaces y botones. Mantén el texto del cuerpo oscuro sobre claro: muchos lectores usan el modo oscuro y las apps de correo invierten los colores de formas que no puedes controlar del todo. - Papel: #fbf7f0 - Tinta: #1f1a17 - Título óxido: #7c2d12 - Enlace ámbar: #d97706 - Separador: #e7dccb Una paleta editorial cálida. Papel y Tinta se encargan de la lectura; el óxido es para el nombre, el ámbar solo para los enlaces. ### Se rompe en las bandejas - Palabras importantes incrustadas en una imagen sin texto alternativo - Texto de cuerpo fino en gris claro - Una cabecera de solo texto sin aire alrededor - Imágenes de fondo detrás del texto del cuerpo ### Sobrevive en las bandejas - Texto real para todo lo importante - Texto de cuerpo con buen contraste en modo claro y oscuro - Una cabecera con un nombre claro y espacio alrededor - Degradados solo en la imagen de la cabecera Los clientes de correo son estrictos con el CSS, así que los degradados van en la imagen de la cabecera y no en el código. [Degradados en el email](https://gradiently.design/es/guide/gradients-in-email) explica qué enfoques sobreviven en qué apps. ## Tarjetas promocionales para cada número La mayoría de las newsletters crecen con comparticiones y publicaciones en redes, y un enlace simple con una vista previa genérica se ignora. Haz dos o tres tarjetas por número a partir de una plantilla fija: una con el titular del número, otra con una frase sacada de dentro y una tarjeta de suscripción que reutilices. Una tarjeta promocional vertical con el texto Por qué tu pan sabe soso, La cocina lenta número 48 La tarjeta del número para Instagram y LinkedIn: titular, número y dónde leerlo. Una tarjeta de cita horizontal con el texto La sal es cuestión de tiempo, de la edición de esta semana Una frase destacada para X y Bluesky. Corta, concreta y algo sorprendente funciona mejor. - **Tarjeta del número:** el titular y el número, publicada el día del envío. - **Tarjeta de cita:** una frase de dentro, publicada uno o dos días después. Consulta [diseño de tarjetas de cita](https://gradiently.design/es/guide/quote-card-design). - **Tarjeta de suscripción:** qué reciben los lectores y con qué frecuencia, fijada en tu perfil. - **Tarjeta de hito:** el número 50, el 100 o un año de envíos. Si escribes cada semana, esta es la parte que merece automatizarse. Con Gradiently Pro puedes llevar una lista de números en una hoja de cálculo y crear en lote una tarjeta por fila, o diseñar una tarjeta y adaptarla a todos los formatos de un solo paso. La tinta automática elige texto claro u oscuro por línea según los colores del propio fondo, así que un titular sigue siendo legible sea cual sea el color de la temporada. [Escribir textos para imágenes](https://gradiently.design/es/guide/writing-copy-for-visuals) ayuda con las palabras en sí. ## Haz que el estilo sea solo tuyo Las plataformas de newsletters dan a todos los mismos pocos temas, así que una cabecera distintiva es de los pocos sitios donde puedes destacar. Un Mark de Gradiently es un fondo vivo con el que nadie más puede exportar una vez que lo has reservado, lo que encaja con una publicación que quiere que su cabecera siga siendo inconfundible a medida que crece. ## FAQ ### ¿Qué tamaño debe tener la cabecera de una newsletter por email? Diséñala a 1200×600 píxeles. La mayoría de las bandejas la muestran a unos 600 píxeles de ancho, y el archivo más grande se ve nítido en pantallas de alta densidad. ### ¿Qué tamaño tiene la imagen de cabecera de Substack? La cabecera de una publicación de Substack mide 1456×816 píxeles. También se convierte en la imagen de vista previa cuando se comparte la publicación. ### ¿Cómo hago que mi newsletter parezca profesional? Mantén una cabecera con tu nombre en el mismo sitio en cada número, usa una tipografía de títulos y una de cuerpo legible, y limita el color a un único acento para los enlaces. ### ¿Debo cambiar la cabecera de mi newsletter en cada número? Mantén fijos el nombre y el diseño y cambia un solo elemento, como el número, el titular o un color de temporada. Los lectores reconocen la parte fija. ### ¿Funcionan los degradados en las newsletters por email? Pon los degradados en la imagen de la cabecera y no en CSS, porque muchas apps de correo ignoran los degradados CSS. Deja el texto del cuerpo como texto real con buen contraste.