La tipografía exagerada consiste en usar titulares mucho más grandes que el texto del cuerpo, con interlineado apretado y poco adorno alrededor. Es una de las decisiones que más separan una web de 2026 de una de hace cinco años.
Bien usada, transmite carácter, ordena la mirada y construye marca en un segundo. Mal usada, parece un cartel de rebajas. Toda la diferencia está en un puñado de reglas.
Aquí tienes la guía al grano: las cinco reglas y los valores reales de webs de referencia, que he medido yo. También, qué tipografías aguantan tamaños extremos y el CSS para móvil sin romper la accesibilidad.
Por qué la tipografía exagerada manda en 2026
No es un capricho estético. El diseño web actual quita adornos, y cuando quitas adornos la letra ocupa el centro. Un titular grande da jerarquía, personalidad y contraste sin añadir ni una imagen.
Además, es barata en rendimiento: un titular en texto pesa casi nada comparado con una imagen de cabecera. Por eso encaja tan bien con el minimalismo emocional y con las webs que quieren cargar rápido.
El resultado: lo raro empieza a ser lo contrario. La web tímida, con todo del mismo tamaño, en la que no sabes ni por dónde empezar a leer.
Las 5 reglas para que funcione (y no parezca caótica)
La línea entre «impactante» y «caótico» es fina. Estas cinco reglas la marcan.
- Contraste extremo entre titular y cuerpo. Lo que crea jerarquía es la relación entre los dos, no el tamaño absoluto. Un titular de cuatro veces el cuerpo ya se percibe como enorme.
- Interlineado ajustado en titulares (1,0-1,1). Cuando la letra es enorme, el espacio de línea por defecto la desmonta.
- Un solo punto focal por sección. Un titular gigante por bloque. Dos compiten y ninguno gana.
- Respeta el grid. La tipografía grande no es excusa para romper columnas; se apoya en ellas. Una retícula de 8 puntos te ayuda a cuadrar los márgenes.
- Tracking negativo. En tamaños grandes, el espaciado entre letras de fábrica casi siempre sobra. Las webs que he medido lo reducen entre un 2 % y un 6 %.
Regla mental: la tipografía exagerada no grita más fuerte, ordena mejor. Si tu titular gigante confunde en vez de guiar, algo falla en la jerarquía, no en el tamaño.
Lo que usan de verdad las webs de referencia
Abrí cuatro webs que se suelen citar como ejemplo y medí el titular principal de la portada, con la ventana a 1440 px de ancho. Estos son los valores reales a 5 de octubre de 2026:
| Web | Tipografía | Titular / cuerpo | Interlineado | Tracking |
|---|---|---|---|---|
| Linear | Inter (variable, peso 510) | 64 px / 15 px | 1,0 | −2,2 % |
| Vercel | Geist | 64 px | 1,0 | −6 % |
| Pentagram | Plain | 52 px / 16 px | 1,05 | −2 % |
| Aesop | Suisse Int’l | 36 px / 14 px | 1,4 | Normal |
La sorpresa: ninguna llega a 100 px. Su titular «gigante» mide entre 52 y 64 px. Lo que lo hace parecer enorme es la relación de 3 a 4 veces con el cuerpo, el interlineado a 1 y el tracking apretado.
Aesop es el contraejemplo: titular contenido, mucho aire y un interlineado generoso. Sirve para recordar que la tipografía exagerada es una opción, no una obligación.
Los titulares de 120 a 200 px los verás sobre todo en portfolios, estudios creativos y landings de campaña. Haz tú la prueba: abre cualquier web, inspecciona el titular y anota su font-size, line-height y letter-spacing. En una tarde tendrás tu propia tabla.
Tipografías que aguantan tamaños extremos (+ alternativa gratis)
No toda tipografía sobrevive a 150 px. Las que mejor aguantan están pensadas para titular: suelen llevar «Display» o «Headline» en el nombre, o tienen un eje de tamaño óptico que ajusta el dibujo cuando crece.
Aquí van las que funcionan casi siempre, con una alternativa gratuita en Google Fonts para cada estilo, por si no quieres pagar licencia.
| Estilo que buscas | Referencia de pago | Alternativa gratis (Google Fonts) |
|---|---|---|
| Serif editorial elegante | PP Editorial New | Fraunces / Playfair Display |
| Serif clásica y sólida | Tiempos Headline | Source Serif 4 (con su tamaño óptico de titular) |
| Sans con personalidad | GT America | Space Grotesk |
| Sans contemporánea neutra | Söhne | Inter (versión Display) / Geist |
| Serif cálida y amable | Recoleta | DM Serif Display |
| Impacto máximo, todo mayúsculas | — | Anton / Bebas Neue |
Un consejo: evita las tipografías display muy decorativas en titulares enormes. A tamaño gigante, cada rasgo raro se multiplica y cansa a la segunda línea. Si te interesan las de tamaño óptico, mira estas fuentes variables gratis para web.
Para elegir con más opciones, mira estas tipografías para títulos, la comparativa de serif vs sans serif. O una recopilación concreta, como las fuentes de películas famosas.
¿Buscas una display premium con licencia comercial clara? En Envato tienes familias tipográficas para titulares con varios pesos, que te evitan mezclar fuentes. Antes de comprar, revisa qué permite cada licencia.
El CSS para que no reviente en móvil
El fallo más común: dejar el mismo tamaño de titular en móvil. Un titular de 120 px precioso en escritorio se sale de la pantalla del móvil y parte las palabras. La solución es que escale solo, y para eso está clamp().
h1 {
font-size: clamp(2.5rem, 1.5rem + 5vw, 7.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
}Esa línea dice: nunca bajes de 2,5rem (40 px), crece con el ancho de pantalla y nunca pases de 7,5rem (120 px). En un móvil de 375 px sale un titular de unos 43 px; a 1440 px, de unos 96 px.
Fíjate en el valor central: 1.5rem + 5vw, no 8vw a secas. Si usas solo vw, el texto no crece cuando alguien hace zoom en el navegador. Eso choca con la pauta de accesibilidad WCAG 1.4.4. Sumar una parte en rem lo evita.
Los otros dos detalles: el letter-spacing en em escala con el tamaño, y text-wrap: balance reparte las palabras entre líneas para que no quede una sola colgando. Si te lías con las unidades, aquí tienes cuándo usar px, rem, em, vw y vh.
¿Te gustan estos trucos de CSS y tipografía? Cada semana comparto recursos, fuentes y código para diseñadores web en mi newsletter.
Precios y cifras grandes
La tipografía exagerada también funciona con números: precios en una tabla de planes, datos en una landing o contadores. Dos ajustes marcan la diferencia:
.precio {
font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1;
}
.precio .moneda {
font-size: 0.5em;
vertical-align: super;
}tabular-nums hace que todas las cifras ocupen lo mismo, así los precios de varias columnas quedan alineados. Y reducir el símbolo de la moneda a la mitad deja que mande el número. Ojo: solo funciona si tu fuente incluye cifras tabulares, algo habitual en Inter, Geist o Space Grotesk.
Errores típicos que te delatan
- Mezclar tres o más tipografías. El máximo sano es dos: una para titular, otra para cuerpo.
- Usar una display en el cuerpo de texto. Preciosa en el titular, agotadora en un párrafo.
- Escalar solo con vw. Se ve bien hasta que alguien hace zoom y el texto no crece.
- No optimizar el peso de la web font. Cada peso extra son decenas de KB que retrasan el LCP; aquí la tipografía y el diseño web sostenible se dan la mano.
- Olvidar la fuente de reserva. Define un fallback coherente para que no baile todo mientras carga.
- Meter el texto dentro de una imagen para usar una fuente propia. Perjudica al SEO y a la accesibilidad; si no te queda otra, cuida al menos el alt text.
Preguntas frecuentes
¿La tipografía gigante penaliza el SEO?
Por el tamaño en sí, no. Sí te perjudica si la implementas mal: texto dentro de imágenes, sin jerarquía lógica de encabezados o cargando cinco web fonts pesadas. Bien hecha, una tipografía grande y clara ayuda a leer.
¿Sirve una fuente gratis de Google Fonts para esto?
Sí, y de sobra. Fraunces, Space Grotesk, Playfair Display, Geist o Anton aguantan tamaños grandes perfectamente. Las de pago dan matices y pesos extra, pero para empezar no necesitas gastar un euro.
¿Cómo elijo un buen tipo para titulares grandes?
Busca familias pensadas para display o con eje de tamaño óptico. Tienen el espaciado y las proporciones ajustados para el tamaño grande, cosa que una fuente de cuerpo no te da.
¿Cuántos píxeles debe medir un titular exagerado?
Depende del registro. Las webs de producto que he medido usan entre 52 y 64 px en escritorio; los portfolios y las landings de campaña llegan a 120-200 px. En móvil, entre 40 y 64 px con clamp(). La clave no es el número, es el contraste con el cuerpo.
¿Funciona en webs corporativas o solo creativas?
En ambas, ajustando el nivel. En creativas puedes ser más extremo; en corporativas, más contenido. La pregunta no es si usarla, sino cuánto.
Conclusión: tres caminos
La tipografía exagerada bien aplicada es de las herramientas más potentes para diferenciar una web. Mal aplicada, es la que antes te delata. Tienes tres caminos según dónde estés:
- Solo quieres probar: coge Fraunces o Space Grotesk gratis, monta un hero con el clamp() de arriba y juega con el contraste.
- Vas a rediseñar: aplica las cinco reglas desde el primer boceto y respeta el grid.
- Quieres dominarlo: mide los titulares de las webs que admiras y crea tu propia tabla de tamaños.
Conoce las reglas, elige tipografías hechas para display y respeta la jerarquía. Si te ha servido, compártelo con quien esté peleándose con su próximo hero.
