Plantilla educativa

Estructura de Landing para público frío

13 secciones con lo justo y necesario. Menos ruido, más ventas. Cada bloque dice qué escribir, dónde va y por qué. El fondo solo cambia donde se decide la compra.

Lienzo continuo Corte oscuro (precio) Banda intermedia (stack) Zona de compra
01
Lo primero que se ve

Hero

Todo lo que la persona ve antes de bajar. Si en 3 segundos no entiende qué gana, se va. Aquí la gente compra mucho, así que el botón de aquí importa.

Lienzo

Gancho

Una frase que frena el scroll. No vende, no explica el producto: solo genera curiosidad o un "eso me pasa a mí".

Título grande (H1)

Dice el resultado que la persona quiere, no el nombre del producto. Una línea, clara, sin palabras raras.

Nunca palabras de folleto como premium, exclusivo o innovador.

Subtítulo

Una o dos líneas que completan el título. Si el título dice QUÉ gana, el subtítulo dice CÓMO o POR QUÉ le importa.

Promesa corta

Una frase creíble que quita una duda antes de que aparezca. Ejemplo: "pago único, acceso de por vida".

Imagen o video del producto

Muestra el producto en uso o el resultado, no una foto suelta. La persona necesita verse usándolo para quererlo.

Nunca fotos de banco de imágenes. Siempre contenido real.

Botón (Botón #1)

Grande, de color que resalte, y dice lo que la persona QUIERE hacer, no "comprar". Mínimo 48px de alto en el celular.

Funciona: "Quiero empezar ya →". No funciona: "Comprar" o "Enviar".

Micro-texto bajo el botón

Tres dudas resueltas en una línea: "pago único, acceso inmediato, garantía". Responde antes de que las piense.

Prueba social rápida

Estrellas y número de personas. Habla del resultado ("ya venden", "ya logran"), nunca de que "ya compraron".

Zona de compra
Todo esto debe verse sin bajar
02
Se abre el deseo

Presentación del producto

"Esto es lo que voy a recibir." La persona pasa de saber qué hace el producto a ver lo que trae.

Lienzo

Título con beneficio

No repite el título del hero. Dice qué SIENTE la persona al tenerlo o cómo cambia su día.

Imagen del producto o video

Aquí va la muestra grande del producto. Si el producto tiene video, va aquí y reemplaza a la imagen. El video se recomienda porque enseña cómo se usa y quita la duda de "¿yo podré?".

o
Imagen del producto Video recomendado si lo tienes

2 o 4 beneficios cortos

Frases breves con un beneficio cada una. Cada frase responde una duda distinta. Son beneficios para la persona, no características del producto.

Categorías (si aplica)

Lista breve de los tipos que trae el producto. Solo si tu producto tiene categorías naturales. Ayuda a confirmar "hay algo para mi caso". Siempre con un título corto y una línea que la acompañe, para que las etiquetas no queden sueltas ni se lean como un menú frío.

Ejemplo de título: "Hay algo para cada ocasión". Texto que acompaña: "Elige el tema y ya está listo para usar". Debajo van las etiquetas.
03
Prueba visual, galería 1 de 2

Muestras de resultados

"Es real, otros lo usan." Fotos reales de lo que se puede lograr. Responde una pregunta: ¿qué voy a poder crear?

Lienzo

Título que invita a mirar

Que dé ganas de ver, no de catálogo. Ejemplo: "Mira todo lo que puedes crear".

Galería de resultados

Fotos reales del producto terminado. Entre 6 y 8, bien elegidas. No pongas 40: cansan y hacen que nadie elija.

Máximo 2 galerías en toda la página, y cada una con un propósito distinto.
04
Dolor y solución

Formato espejo

A la izquierda la persona reconoce su problema; a la derecha ve la solución. Sin tener que pensar la conexión.

Lienzo

Título que hace asentir

Una pregunta o frase de identificación. Ejemplo: "¿Te suena familiar?".

Máximo 5 filas espejo

Cada fila: un dolor a la izquierda, su solución a la derecha. Cinco como tope (en Latinoamérica más filas cansan la lectura). Cinco dolores distintos, no el mismo repetido.

← Dolor: una frase que la persona dice o piensa.
→ Solución: cómo cambia su situación. Resultado, no característica.
Aquí NO va botón. Según los datos, la gente no compra en este punto; el botón solo dispersaba.
05
Se acumula valor, galería 2 de 2

El producto por dentro

La calidad y la variedad confirman que vale la pena. Aquí todavía NO aparece el precio. Y aquí va la segunda galería: lo que de verdad recibes.

Lienzo

Título de transformación

Muestra el antes y el después en una frase. "De no saber por dónde empezar, a tener tu primer resultado."

Números concretos

Cantidad de contenido, formatos, idiomas. Los números dan confianza porque se pueden verificar.

Galería de lo que recibes

Esta es distinta a la primera: aquí se ve el producto que compras (por ejemplo, cómo se ve por dentro o dentro de la herramienta). La galería 1 mostró qué logras; esta muestra qué recibes.

Lista de lo que la persona logra

Lo que podrá hacer al terminar, no lo que el producto contiene por dentro.

06
Primer cierre

El precio por primera vez

Después de ver tanto valor, el precio se siente bajo. El precio aparece aquí por primera vez, nunca antes. El fondo cambia a oscuro: es el primer golpe visual.

Corte 1

Título y frase puente

"Todo lo que viste, más el producto completo, por esto:" Conecta el valor con el precio.

Precio tachado + precio actual + ahorro

El precio tachado (real, no inventado) hace de ancla. El precio actual grande y grueso. Una etiqueta de ahorro refuerza la oportunidad.

Botón (Botón #2) + iconos de pago

Aquí SÍ van los iconos de pago (Visa, Mastercard). Reducen la duda de "¿aceptarán mi tarjeta?" justo cuando toca.

Zona de compra
07
Se multiplica el valor

Bonos + resumen de valor

"Es mucho más de lo que pensaba por ese precio." Los regalos hacen sentir que se gana más de lo que se paga. Aquí también compra bastante gente.

Banda

Los bonos (sin botón propio)

Cada bono con su nombre, para qué sirve y su valor tachado a "gratis". Cada uno resuelve algo distinto al producto principal.

Los bonos no llevan botón: la persona debe verlos todos antes de decidir.

Resumen tipo recibo

Una tabla con cada parte y su valor. Se suma todo, se tacha el total alto y se muestra el precio real. El contraste vende solo.

Botón (Botón #3)

El cierre más fuerte, después de ver todo el valor junto. El texto puede incluir el precio: "Sí, quiero todo →".

Zona de compra
08
Validación social

Testimonios

"Otros ya decidieron y les fue bien." La prueba social empuja hacia la oferta final.

Lienzo

Capturas reales como prueba principal

Las capturas de WhatsApp o mensajes son lo más creíble: se nota que son reales. Son la prueba principal.

2 o 3 testimonios con foto (refuerzo)

Ordenados y fáciles de leer, con un antes y un después concreto. Acompañan a las capturas, no compiten.

Aquí NO va botón. La prueba social debe llevar a la oferta final, no dar una salida antes.
09
Se quita el miedo

Garantía

"No tengo nada que perder." Quita la última duda racional.

Lienzo

Sello + título simple

Un sello con el número de días y un título que hable como persona: "30 días para decidir con calma".

A probar: en productos baratos de impulso, a veces esconder la garantía sube las ventas. Testéalo, no lo des por hecho.
10
Último cierre

Oferta final

Para quien bajó hasta el final. Es la última oportunidad. Mismo fondo oscuro que el primer precio: es un eco que dice "es el momento".

Corte 2

Resumen compacto + botón (Botón #4)

Título con el nombre del producto, imagen, precio tachado y actual, y el botón definitivo. La persona ya leyó todo: solo necesita el empujón final.

Es el cuarto y último botón del recorrido. Cuatro botones en total: hero, primer precio, stack, y este.
Zona de compra
11
Se resuelven dudas

Preguntas frecuentes

Las últimas dudas racionales. La pregunta de mayor fricción (pagos) siempre primero.

Lienzo

Máximo 6 preguntas

Pocas y bien elegidas, ordenadas por fricción (primero pagos, luego acceso, contenido y garantía).

Muchas preguntas siembran dudas nuevas. Menos preguntas, más ventas: es un cambio comprobado.
12
Toque humano

Atención personalizada

"Si todavía dudo, alguien me ayuda." Cierra a quien no compra sin hablar con una persona primero, muy común en Latinoamérica.

Lienzo

Mensajería + pago en efectivo

Botones para escribir por mensaje directo, países donde hay pago en efectivo, y la frase "atención de una persona, no un robot".

13
Cierre legal

Pie de página

No vende: cierra y protege. Copyright y el aviso legal obligatorio.

Lienzo

Copyright + aviso de Meta

Nombre, año y el aviso "Este sitio no es parte de Facebook ni Meta Platforms, Inc." Obligatorio si envías tráfico desde anuncios, o Meta puede suspender la cuenta.

El sistema en 3 reglas

Cómo se usa el fondo

1. Un solo lienzo

Casi toda la página usa un mismo tono claro. Como no es blanco puro, las tarjetas blancas resaltan solas.

2. Oscuro solo en el precio

El fondo oscuro aparece dos veces: primer precio y oferta final. Dos golpes, no colores por todos lados.

3. Prueba en blanco y negro

Si quitas el color, los bloques de precio deben verse más oscuros. Si todo se ve igual, no hay corte real.

Plantilla educativa, estructura retargeting

Landing de retargeting

Para visitantes que ya conocen tu producto pero no compraron. Más corta, más directa, más urgente. El trabajo de educar ya se hizo, aquí solo falta cerrar.

7 secciones 3 botones mínimos Precio visible rápido
Landing fría
13
secciones, educar y vender
vs
Retargeting
7
secciones, recordar y cerrar
01
Recuerda y activa

Hero directo

La persona ya sabe qué es tu producto. No necesita gancho, ni historia, ni que la eduques. Necesita un recordatorio y la razón para actuar HOY. El tono cambia: de "déjame contarte" a "ya sabes lo que hay, esto es lo que falta para decidir".

Lienzo

Título directo

No educativo, activador. La persona ya leyó tu landing fría. Ahora necesita un recordatorio que active la decisión pendiente. El título hace referencia a que ya conoce el producto, sin repetir la propuesta de valor original.

Funciona: "Todavía puedes acceder al precio especial". "Lo que viste ayer sigue aquí, pero no por mucho". No funciona: repetir el título exacto de la landing fría, porque lo reconoce y lo ignora. Nunca repitas el mismo título de la landing fría. La persona lo reconoce y lo salta solo.

Subtítulo

Qué incluye en una sola línea. No la lista completa, el resumen más compacto posible. La persona ya vio el detalle; aquí solo necesita el recordatorio rápido.

Ejemplo: "Producto completo más todos los recursos editables. Acceso inmediato".

Imagen o video (distinto al de la landing fría)

Usa un ángulo visual diferente. Si la fría tiene una imagen del producto, aquí pon un video corto de alguien usándolo, u otro ángulo, o el resultado. Si repites la misma imagen, el cerebro la descarta como "ya lo vi". Un video de 15 a 30 segundos con el resultado funciona mejor que una imagen fija.

Botón inmediato (Botón #1)

El botón aparece en los primeros 3 segundos. En la fría el botón del hero es una invitación. En retargeting es un cierre. El texto es más directo y urgente.

Fría: "Empieza hoy →". Retargeting: "Quiero acceso ahora →" o "Completar mi compra →".

Micro-texto

Los mismos tres que quitan fricción: pago único, acceso inmediato, garantía. No cambian entre fría y retargeting porque las dudas de pago son las mismas.

Zona de compra
No hay historia, ni galería, ni espejo. Directo al punto
02
Ataca la razón del no

Objeción principal

La persona no compró por algo. Esta sección ataca ESA razón. No las cinco posibles, solo la más probable. Una landing de retargeting bien hecha resuelve UNA objeción con precisión.

Lienzo

Identificar la objeción

Las cinco razones más comunes por las que alguien interesado NO compra. Tu retargeting ataca la que más aplique a tu producto:

A"No sé si es para mí". Solución: 3 perfiles rápidos, cortos y en primera persona. No los 5 de la fría.
B"Es muy caro". Solución: comparar valor. Cuánto cuesta NO tenerlo, cuánto tiempo o dinero pierde haciendo lo mismo que el producto resuelve.
C"No tengo tiempo". Solución: mostrar que es en poco tiempo, a su ritmo, sin fechas límite. Cree que el producto le va a QUITAR tiempo; demuéstrale que no.
D"No sé si funciona". Solución: un solo testimonio con resultado medible, con números y antes y después. No tres genéricos.
E"Necesito pensarlo". Solución: urgencia real. Cupo limitado, precio que sube en fecha concreta, bonos que desaparecen. Si la urgencia no es real, la duda no se resuelve, solo se pospone.
Elige UNA objeción por landing. Si quieres atacar tres, crea tres variantes, no las mezcles en una página.

Formato de la respuesta

Corto y directo. No un ensayo, algo visual que se entiende en 5 segundos. Si la objeción es "es muy caro", una tabla de comparación. Si es "no sé si funciona", un testimonio con foto. Si es "no tengo tiempo", tres líneas con tiempos reales.

Ejemplo para "es muy caro": "Una sola asesoría con un experto cuesta más que el producto completo. Haz la cuenta".

Variantes (estrategia avanzada)

Lo ideal no es una sola landing de retargeting, son 2 o 3 variantes que atacan objeciones diferentes y se muestran según el comportamiento de la persona:

AVariante

"Es muy caro"

Comparar valor. Tabla de lo que cuesta contra lo que gana. Precio en contexto.

BVariante

"No sé si funciona"

Testimonio en video o con resultado medible. Un solo caso fuerte con antes y después.

CVariante

"Necesito pensarlo"

Urgencia con cuenta regresiva. Precio que sube en fecha concreta. Bonos que desaparecen.

03
Cierre con urgencia

Precio y urgencia

El precio aparece rápido, en la sección 3, no en la 8 como en la fría. No hay acumulación de valor porque la persona ya lo tiene de la primera visita. Lo que se agrega es lo que la fría no tenía: urgencia real. El fondo cambia a oscuro: es el primer golpe.

Corte 1

Precio tachado, precio actual y ahorro

Igual que en la fría: ancla con el precio anterior, precio actual grande y etiqueta de descuento. La diferencia es que aquí NO necesita frase puente, porque la persona ya sabe qué incluye.

Elemento de urgencia

Esto es lo que diferencia la landing de retargeting de la fría. Debe ser REAL: si es falso, destruye la confianza para siempre. Opciones honestas:

Cuenta regresiva: solo si hay fecha límite real. Si se reinicia cada día, la persona lo nota y pierde toda confianza.

Fecha límite concreta: "solo hasta el viernes", algo verificable y creíble.

Precio que sube: "el precio sube el lunes", con fecha, sin ambigüedad.

Bonos que desaparecen: "los bonos solo están esta semana", urgencia sin tocar el precio.

Cupo limitado: "solo 50 accesos a este precio", real si hay algo que lo justifique.

"Solo por hoy" cuando mañana sigue igual destruye la confianza. Sin fecha real, usa escasez de bonos en vez de tiempo.

Botón grande (Botón #2), micro-texto e iconos de pago

Segundo botón del recorrido. En la fría el segundo botón aparece en la sección 5 o 6. Aquí en la 3, porque la persona ya tiene contexto. El botón debe ser lo más grande y visible de toda la landing.

Texto: "Acceder al precio especial →" o "Completar mi compra →".
Zona de compra
04
Validación rápida

Testimonios (2 o 3 fuertes)

No necesitas seis. Solo los 2 o 3 más fuertes, los que mencionan un resultado concreto y medible. Un "antes tardaba 3 horas, ahora 20 minutos" vale más que diez de "muy buen producto".

Lienzo

Cómo elegir los testimonios

Criterio para retargeting: elige los que resuelven la objeción que atacaste en la sección 2. Si atacaste "es muy caro", pon uno que hable del retorno. Si atacaste "no sé si funciona", uno con antes y después concreto.

Fría: "Antes de decidir, lee lo que decidieron ellos" (seis variados). Retargeting: "Esto es lo que pasó después de comprar" (dos o tres con resultado específico).

Formato

Foto real, nombre, verificado y resultado en una línea. Sin "leer más": el testimonio se lee completo en 3 segundos. En retargeting los largos no se leen porque la persona ya tiene contexto.

Video testimonial (opcional pero potente)

Un video de 30 a 60 segundos de un cliente real vale más que diez testimonios escritos. Si lo tienes, esta es la landing donde más impacta: la persona ya conoce el producto, solo necesita ver a alguien real confirmando que funciona.

05
Quita la última duda

Garantía rápida

No una sección completa como en la fría. Una línea contundente. La persona ya leyó la garantía en la primera visita, aquí solo necesita el recordatorio.

Lienzo

Formato

Ícono de escudo, frase en una línea y cápsulas. Sin párrafo, sin subtítulo, sin explicar el proceso. Solo: "30 días de garantía sin preguntas. Si no te convence, escribes un correo y se te devuelve tu dinero".

Fría: sección completa con ícono grande, título, subtítulo y refuerzos. Retargeting: una línea con "30 días de garantía, un correo, sin preguntas, sin vueltas". "Sin preguntas" es la frase clave. Sin ella, la persona imagina un proceso burocrático de devolución.
06
Cierre definitivo

Botón final y preguntas

Último cierre más las 2 o 3 preguntas de mayor fricción. No las seis u ocho de la fría, solo las que de verdad frenan la compra. Mismo fondo oscuro que el precio: eco que dice "es el momento".

Corte 2

Botón final (Botón #3)

Tercer y último botón. Repite el precio, imagen compacta y botón. Es el cierre definitivo, el texto más directo de toda la landing.

Texto: "Quiero acceso ahora →", incluyendo el precio en el botón para quitar la última duda.

Preguntas (máximo 2 o 3)

Solo las de mayor fricción. En retargeting las más efectivas son las de último momento:

Pregunta 1, pagos: "¿es un solo pago o tengo que pagar cada mes?".

Pregunta 2, acceso: "¿cómo y cuándo recibo el producto?".

Pregunta 3, garantía: "¿qué pasa si no me gusta?".

Si una pregunta no frena la compra directamente, no la pongas. Cada pregunta de más diluye la urgencia.
Zona de compra
07
Toque humano (opcional)

Atención personalizada

Solo si tu público necesita hablar con alguien antes de comprar. En Latinoamérica es casi obligatorio. En mercados donde comprar en línea sin contacto es normal, puede omitirse.

Lienzo

Formato

Mismo formato que la fría: título ("¿listo para finalizar?"), subtítulo ("una persona te espera para ayudarte"), la frase "atención de una persona, no un robot", y el botón de mensajería. En retargeting esta sección captura a quien necesita el empujón final de un humano, que suele ser el comprador de mayor valor.

Referencia

Reglas de retargeting

Principios que aplican a TODA landing de retargeting, sea cual sea el producto.

Banda

Nunca repitas la landing fría

Si la persona ya vio la fría, mostrarle lo mismo genera ceguera: el cerebro descarta lo que ya procesó. Título distinto, ángulo visual distinto, estructura distinta. Tiene que SENTIRSE como una página nueva.

El tono cambia

Fría: "déjame contarte", educativa y con historia. Retargeting: "ya sabes lo que hay, esto es lo que falta para decidir", directa y enfocada en resolver la objeción.

La urgencia DEBE ser real

"Solo por hoy" cuando mañana sigue igual destruye la confianza. Sin fecha límite real, usa escasez de bonos ("los bonos solo están esta semana") o de cupo ("solo 50 accesos a este precio"), no tiempo falso.

Segmenta por comportamiento del pixel

No todas las personas son iguales. El pixel permite segmentar y mostrar la landing correcta a cada quien:

ComportamientoLanding que veLargo
Visitó pero no compróRetargeting general (esta estructura)7 secciones
Llegó al checkout y abandonóCarrito abandonado, más corta: precio, urgencia, botón y garantía3 o 4 secciones
Vio el 75% del videoCon testimonio fuerte, ya tiene interés alto, solo falta validación4 o 5 secciones
Visitó más de 2 veces sin comprarVariante con oferta o bono exclusivo de retargeting5 o 6 secciones
Si solo tienes presupuesto para una, la general de 7 secciones cubre el 80% de los casos.

Varias variantes por objeción

Lo ideal es crear 2 o 3 variantes de la sección 2 (la objeción) y probar cuál convierte mejor. El resto de la landing puede ser idéntico, solo cambia esa sección.

AVariante

"Es muy caro"

Comparar valor y retorno.

BVariante

"No sé si funciona"

Video testimonial con resultado.

CVariante

"Necesito pensarlo"

Cuenta regresiva y bono exclusivo.

Sistema de referencia, tipografía

Roles de texto y jerarquía tipográfica

Tamaños, pesos y fuentes para cada elemento de una landing, del titular al micro-copy. Con la tabla de cómo cambia cada rol entre PC y móvil, y los estándares que usa la industria.

12 secciones 9 nichos PC y móvil por separado
01
Gancho15px / 600
Lo que tu equipo hace en tres días, ahora en una tarde
H1, titular52px / 800
El panel que se arma solo
H2, sección32px / 700
Datos claros, decisiones rápidas
Subtítulo20px / 500
Conecta tus fuentes una vez y olvídate del resto.
Body16px / 400
Cada reporte se actualiza en segundo plano y se reorganiza según lo que mires primero. Sin configurar nada, sin plantillas que mantener.
Label11px / 700
En tiempo real
Micro-copy11px / 400
Sin tarjetaListo en minutosCancela cuando quieras
El gancho prepara, el titular afirma, el resto sostiene. El contraste guía el ojo, no el color
02
Base 16px
El body de partida. Mínimo recomendado por accesibilidad (WCAG). Todo lo demás se deriva de aquí. En móvil el body puede subir a 17px para mejor lectura.
Razón 1.25 (Tercera Mayor)
La más versátil para landings. 1620253139. Contraste claro sin titulares gigantes que desperdician espacio.
Razón 1.333 (Cuarta Perfecta)
Para heroes con más drama. 1621283850. Úsala cuando el titular debe dominar la pantalla.
Dos escalas, no una
Una razón gentil en móvil y una más agresiva en desktop. Pantalla angosta significa menos contraste (se ve menos agresivo). Pantalla ancha significa más contraste (tiene espacio para respirar).
Regla de oro: máximo 5 o 6 tamaños en toda la landing. Más que eso, caos visual
03
Titular H1 Mismo peso
PC
56 a 80pxpeso 800
Móvil
32 a 42pxpeso 800
Baja cerca del 40% en móvil pero mantiene el peso. El titular sigue dominando, solo deja de desbordar la pantalla.
Subtítulo H2 Mismo peso
PC
22 a 28pxpeso 500
Móvil
17 a 20pxpeso 500
Mantén la distancia con el body. Si el body es 16, el subtítulo en móvil no debe bajar de 17 o se aplasta contra el cuerpo.
Body, párrafo Mismo peso
PC
16 a 17pxpeso 400
Móvil
15 a 16pxpeso 400
Nunca bajes el body de 16px en campos de formulario: iOS Safari hace auto-zoom y descuadra la página.
Botón, CTA Mismo peso
PC
16 a 18pxpeso 700 a 800
Móvil
14 a 15pxpeso 700 a 800
El botón mantiene su peso alto en las dos pantallas. En móvil cuida que el área tocable sea de al menos 48px de alto, aunque el texto baje.
Precio principal Mismo peso
PC
80 a 100pxpeso 900
Móvil
60 a 72pxpeso 900
El precio es el número más grande de la página en las dos pantallas. Baja de tamaño pero nunca deja de gritar.
Micro-copy Mismo peso, jamás bold
PC
11pxpeso 400
Móvil
9pxpeso 400
El error más común: al reducir el micro-copy a 9px se pone en negrita "para que se lea". Al revés: en tamaño pequeño el bold se empasta y se lee peor. Mantén el 400.
Label, uppercase Sube tracking en móvil
PC
11pxpeso 700, +2px
Móvil
10pxpeso 700, +1.5px
El label es la excepción que sí mantiene peso alto en pequeño, porque va en mayúsculas y espaciado. Aquí el bold funciona; en el micro-copy normal no.
Regla simple: en móvil baja el tamaño, respeta el peso. El bold en texto chico casi siempre empeora la lectura
04
+23%
más rebote en sitios con más de 3 familias tipográficas. Cada fuente extra pesa y dispersa. Por eso el tope son 2 familias.
16px
el mínimo del body. Debajo de eso iOS Safari hace auto-zoom en formularios y descuadra la página. Es estándar WCAG, no preferencia.
50 a 75
caracteres por línea es el consenso del Baymard Institute. Más ancho cansa la lectura; más angosto la corta demasiado.
Rango seguro de H1
La industria ubica el titular en 35 a 50px en desktop y 28 a 40px en móvil, con peso 700 a 900. Puedes ir más grande para un hero dramático, pero por debajo de eso el titular deja de dominar.
Rango seguro de H2
El subtítulo va un escalón abajo: 30 a 36px en desktop y 22 a 30px en móvil, con peso 600 a 800. Apoya al titular sin competir con él.
Line-height del body
Entre 1.4 y 1.6 para el cuerpo. Los estudios muestran mejor comprensión con este aire que con líneas apretadas. Titulares al revés: apretados.
Máximo 3 pesos cargados
Carga solo los pesos que usas (por ejemplo 400, 700, 800). Cada peso extra es un archivo que frena la página y afecta el rendimiento medido.
Todo esto es el piso seguro. Tu público y tu nicho mandan: usa estos números para arrancar, luego testea
05
Jerarquía plana
El titular principal El subtítulo de apoyo Y el cuerpo que explica el detalle del producto.

Titular 38 contra subtítulo 36: solo 2px de diferencia. El ojo los lee como el mismo nivel. El titular no domina nada.

Jerarquía real
El titular principal El subtítulo de apoyo Y el cuerpo que explica el detalle del producto.

Titular 52 contra subtítulo 32: un salto completo. El titular manda sin que leas una palabra. Cada nivel respira.

La prueba del salto
Entre dos roles consecutivos debe haber al menos un escalón de la escala sin usar. Si titular y subtítulo caen en peldaños vecinos (39 y 31), bien. Si caen casi en el mismo (48 y 46), colapsaron en uno.
El peso no rescata el tamaño
Poner el titular en 800 y el subtítulo en 700 ayuda, pero no sustituye el contraste de tamaño. Si los tamaños están pegados, el lector duda aunque el peso cambie. El tamaño es la señal primaria.
Vale para toda la cadena
No es solo titular contra subtítulo. También subtítulo contra body. Cada par consecutivo necesita su salto. El eslabón que más se aplana es subtítulo (20) contra body (16).
El precio ya lo hace bien
En una landing el precio suele ser 80 a 120px contra todo lo demás en 16 a 46. Por eso grita con razón. Ese mismo contraste dramático es el que tu titular necesita contra los subtítulos.
Si tapas el texto y aún distingues los niveles por tamaño, la jerarquía funciona
06
ElementoDesktopMóvilPesoTracking
Gancho14 a 16px13 a 14px500 a 6000
Eyebrow13 a 15px12 a 13px500 a 700+2 a 3px
Título H156 a 80px32 a 42px800-1 a 3px
Subtítulo H222 a 28px17 a 20px500-0.5px
Beneficios16 a 18px14 a 15px400 a 5000
Botón CTA16 a 18px14 a 15px700 a 800+0.5px
Señales de confianza13 a 14px11 a 12px500 a 600+0.3px
Badge de prueba social13 a 14px12 a 13px500 a 6000
Tarjeta de testimonio14 a 15px13 a 14px5000
Las señales de confianza van peso 500 a 600, no bold: si no, compiten con el botón y el titular
07
ElementoDesktopMóvilPesoTracking
Label de sección10 a 11px9 a 10px700 a 800+2.5px
Headline de sección30 a 42px22 a 26px800 a 900-1px
Texto puente14 a 16px13 a 14px400 a 5000
Precio principal80 a 100px60 a 72px900-3 a 4px
Decimal del precio28 a 36px22 a 28px800-1px
Precio tachado20 a 24px16 a 18px6000
Badge de ahorro10 a 11px9 a 10px800+1px
Botón CTA15 a 17px13 a 14px800+0.8px
Micro-copy en tira10 a 11px8 a 9px400 a 600+0.3px
Labels de pago9 a 10px9px700+2px
El micro-copy decorativo puede bajar a 8px porque es info secundaria que el ojo lee por contexto
08
Contexto y elementoDesktopMóvilPeso
Contenido Título H236 a 48px26 a 32px800
Contenido Tarjeta de feature20 a 24px17 a 19px700
Contenido Párrafo16 a 17px14 a 15px400
Datos Número estrella72 a 120px48 a 64px900
Datos Label del número12 a 14px11 a 12px600 a 700
Preguntas Pregunta17 a 20px15 a 17px700
Preguntas Respuesta15 a 16px14 a 15px400 a 500
Testimonio Cita22 a 32px18 a 22px500 a 600
Testimonio Nombre14 a 16px13 a 14px700
Footer Título de columna13 a 14px12 a 13px700
Footer Enlaces13 a 14px12 a 13px500
Footer Copyright11 a 12px10 a 11px400 a 500
09
01Interlineado (line-height)

Inversamente proporcional al tamaño: texto grande necesita líneas apretadas, texto chico necesita aire.

Titulares (30px o más): 1.05 a 1.15 apretado. Body: 1.5 a 1.6 respira. Labels cortos: 1.2 a 1.3. Precios gigantes: 0.85 a 1.
02Tracking (letter-spacing)

A mayor tamaño, más negativo. A menor tamaño en mayúsculas, más positivo. El ajuste óptico que la mayoría olvida.

Titulares 50px o más: -1.5 a -3px. Titulares 30px o más: -0.5 a -1.5px. Body 14 a 16px: 0. Labels en mayúscula: +2 a 3px. Micro-copy: +0.3 a 0.5px.
03Peso (weight)

El peso jerarquiza tanto como el tamaño. Un mismo tamaño en 800 contra 400 comunica importancia distinta. A mayor jerarquía, mayor peso; pero nunca pongas todo en bold o nada destaca.

Titulares: 800 a 900. Subtítulos: 500 a 600. Body: 400. Énfasis en body: 600 a 700. Labels: 700.
Padding contra tamaño: mantén proporción 1.5 a 2x. Texto de 11px, padding vertical cercano a 10 u 11px
10
Manualidades y creativo
FrauncesInter
Display serif cálido, body neutro
Fraunces tiene curvas suaves que dan calidez artesanal sin perder modernidad. Buena para papelería, manualidades y productos hechos a mano. Alternativa display: Bricolage Grotesque.
Google Fonts
Dinero y finanzas
Space GroteskInter
Display técnico, body limpio
Space Grotesk da un aire de capacidad técnica, fintech moderno y no banco viejo. Para números usa Outfit o Manrope, que soportan tabular-nums para dashboards y precios.
Google Fonts
Salud y bienestar
OutfitNunito Sans
Display redondeado, body amable
Formas redondeadas que comunican calma y seguridad. Nunito Sans tiene terminaciones suaves que se sienten humanas. Evita serifs duros o condensadas agresivas en este nicho.
Google Fonts
Belleza y lujo
Playfair DisplayLato
Serif alto contraste, body suave
Playfair tiene el contraste dramático de una revista de moda. Lato mantiene el cuerpo limpio y femenino. Para premium real, Cormorant Garamond más Inter da un aire de boutique elegante.
Google Fonts
Tech y SaaS
ManropeInter
Display geométrico, body de interfaz
El look de Linear, Vercel y startups modernas. Manrope es semi-geométrico y soporta números bien. A veces una sola familia (Inter) en varios pesos es más sofisticado que dos.
Google Fonts
Educación y cursos
Bricolage GrotesqueInter
Display con carácter, body legible
Bricolage tiene personalidad sin ser experimental, buena para infoproductos que necesitan verse confiables pero no aburridos. Una de las opciones más sólidas para venta de cursos.
Google Fonts
Direct response y ventas
AntonInter
Display ultra-bold, body neutro
Anton es condensada y dominante, para titulares que gritan oferta sin ser feos. Úsala solo en el titular del hero y la oferta final. Demasiado Anton cansa, el cuerpo siempre en Inter.
Google Fonts
Comida y lifestyle
DM Serif DisplayDM Sans
Serif apetitoso, misma familia
La misma familia en versión serif y sans garantiza armonía total. Cálido, apetecible, cercano. Usar familias hermanas (DM Serif más DM Sans) elimina el riesgo de que las fuentes choquen.
Google Fonts
Infantil y casual
Baloo 2Nunito
Display redondeado, body amigable
Formas gordas y redondeadas que se sienten juguetonas y seguras. Para productos dirigidos a familias, niños o marcas accesibles. No la uses en nichos serios, resta autoridad.
Google Fonts
Regla universal: máximo 2 familias por landing. Una display con carácter más una body neutra
11
Apple
Maestría en la contención. Una sola familia en toda la jerarquía. La jerarquía nace de la escala y el espaciado, no de variar fuentes. Interpolan entre dos escalas distintas: gentil en móvil, agresiva en desktop. La tipografía se siente invisible pero inconfundible.
Framer
Grotesk contemporáneo con cambios de escala dramáticos. Titulares enormes y asertivos, texto de apoyo mínimo y controlado. Usa la escala, no la decoración, para crear impacto. Asume que el visitante entiende el lenguaje de diseño moderno.
Linear
Inter como base, dominada en múltiples roles. Los encabezados destacan por escala, no por peso. El body está espaciado para lecturas largas. El micro-copy se mantiene nítido y discreto. Confianza mostrada a través del límite.
Stripe
El estándar de claridad en fintech. Jerarquía impecable, micro-copy diminuto pero perfectamente legible por contexto. Si no puedes leer el precio, no compras, por eso la claridad numérica es obsesiva. Tabular-nums en todos los datos.
Notion
Sans serif neutro con tamaño y espaciado expresivos para crear calidez sin perder estructura. Títulos grandes y acogedores, body conversacional pero preciso. Demuestra que se puede ser humano y disciplinado a la vez.
12
La fuente de números invade el texto
Plan anual y 240 plantillas

El bloque de números envuelve también las palabras. "Plan anual y" sale en la fuente de cifras. La regla es esa fuente solo en números.

La fuente de números solo en la cifra
Plan anual y 240 plantillas

El texto va en la display, y solo el 240 en la fuente de números. El bloque abraza la cifra y nada más.

Tracking ahogado
Resultados que se notan

A 44px con peso alto, -2px junta demasiado las letras. Se ven apretadas, casi tocándose.

Tracking proporcionado
Resultados que se notan

A ese tamaño, -1px respira mejor. El tracking negativo escala con el tamaño: reserva -2px para 56px o más.

Micro-copy en bold al achicarlo
Pago único, acceso inmediato, garantía de 30 días

Al reducir a móvil se puso en 700 "para que se lea". El bold en texto chico se empasta y cuesta más leerlo.

Micro-copy en 400 siempre
Pago único, acceso inmediato, garantía de 30 días

El mismo texto en 400 con un pelo de tracking. Más limpio y más legible aunque sea pequeño.

Tres errores que conocías de memoria, y que igual se cuelan si nadie los pone frente a ti
13
Máximo 2 familias
Una display más una body. Más fuentes suben el rebote (hasta 23%) y bajan la cohesión. Afecta el rendimiento de carga.
Máximo 5 o 6 tamaños
Si tienes más, alguno sobra. Cada tamaño debe corresponder a un rol claro y distinto.
Body mínimo 16px
Por accesibilidad y porque debajo de eso iOS hace auto-zoom en formularios. En móvil sube a 17px si puedes.
Reducción móvil 35 a 45%
Titular de 56px a cerca de 34px en móvil. Mantiene la jerarquía pero evita que el texto explote fuera de pantalla.
El peso no cambia en móvil
El tamaño baja, el peso se queda. El micro-copy que en PC es 400 sigue en 400 en móvil, nunca en bold aunque se achique.
Números con fuente propia
Una fuente dedicada a números (como Outfit) con tabular-nums los alinea vertical, como monospace. Solo la cifra, no el texto alrededor.
Contraste entre niveles
Titular, subtítulo y body deben separarse por un salto completo de escala. Tapa el texto: si aún distingues los niveles por tamaño, pasa. Si 48 y 46 se ven iguales, no pasa.
Línea de 50 a 75 caracteres
El ancho cómodo de lectura del body. Más ancho cansa, más angosto corta. Limita el ancho del párrafo, no lo dejes cruzar toda la pantalla.
El mejor sistema tipográfico es el que se siente invisible: la jerarquía es clara y nada estorba
Referencia, sistema de fondos

Dónde cambia el fondo en una landing de 13 secciones

Un solo lienzo continuo sostiene casi toda la página. El fondo solo cambia donde aparece el precio: ese corte es una señal, no decoración. Paleta de ejemplo abajo.

Fondo#FFF7F4
Superficie#FFFFFF
Marca#E8554A
Secundario#149A8C
Acento#F4B53C
Botón#FF4D58
Corte#3D1F1B
Lienzo continuoun solo tono claro de la paleta
Corte oscurosolo donde aparece el precio
Banda intermediaopcional, salto perceptible
01 a 05 Convencer
01

Hero

Promesa y primer botón. Su fuerza viene del titular y el botón, no del fondo: guarda el corte para más abajo.

Lienzo
02

Presentación con video

Beneficios y categorías. Aquí va el video o la imagen del producto. Las tarjetas blancas flotan sobre el crema y destacan solas.

Lienzo
03

Galería 1, resultados

Muestras de lo que se puede lograr. El mismo fondo mantiene la lectura fluida mientras el ojo baja.

Lienzo
04

Formato espejo

Dolor a un lado, solución al otro. Contraste por color de tarjeta, no por fondo de sección.

Lienzo
05

Producto por dentro, galería 2

Aquí se ve lo que de verdad recibes. Todavía sin precio: el valor se acumula antes del corte.

Lienzo
06 a 10 Ofrecer y cerrar
06

Precio por primera vez

Primer corte oscuro. El precio aparece por primera vez aquí; el fondo cambia para que el cerebro registre "ahora se decide".

Corte 1
07

Bonos y stack de valor

Banda intermedia: un salto perceptible, nunca del 3% que se vuelve invisible. Distingue el stack sin ser un corte completo.

Banda
08

Validación social

Testimonios. Vuelve al lienzo: tras el golpe del precio, el ojo descansa antes del siguiente corte.

Lienzo
09

Garantía

Elimina el riesgo. Tono calmado sobre lienzo; el sello y el color secundario hacen el trabajo visual.

Lienzo
10

Oferta final

Segundo corte, mismo oscuro del primero. El eco visual le dice a quien llegó hasta aquí: "esto ya lo viste, es el momento".

Corte 2
11 a 13 Resolver y cerrar
11

Preguntas frecuentes

Máximo seis preguntas. Lienzo, tono calmado; la de mayor fricción siempre primero.

Lienzo
12

Atención personalizada

Contacto por mensajería. El color secundario marca los botones de contacto sin robar el rol del botón principal.

Lienzo
13

Pie de página

Cierre legal. Puede oscurecerse a texto pleno para cerrar formalmente; no compite con los cortes de precio.

Lienzo

Cuatro reglas del sistema

1

Un solo lienzo

Casi toda la página comparte un tono claro de la paleta. Si es levemente crema y no blanco puro, las tarjetas blancas destacan solas.

2

El corte marca el dinero

El fondo oscuro aparece solo donde hay precio: primera oferta y oferta final. Dos golpes, no una alternancia repartida.

3

Salto de valor, no de matiz

El corte debe pasar la prueba de escala de grises: en blanco y negro tiene que verse claramente más oscuro. Un cambio del 3% es invisible.

4

El blanco es superficie

El blanco vive en las tarjetas, no en el fondo de sección. Una paleta bien armada separa fondo de superficie.

La prueba definitiva

Si desaturas la página, los cortes de precio deben seguir viéndose. Compara la misma secuencia en color y en gris.

En color

01 a 05 lienzo

06 corte

07 banda

08 y 09 lienzo

10 corte

11 a 13 lienzo

En escala de grises

01 a 05 lienzo

06 corte

07 banda

08 y 09 lienzo

10 corte

11 a 13 lienzo