# Tipografías para titulares: letras que captan la atención [Canonical HTML page](https://gradiently.design/es/guide/headline-fonts) Un titular tiene como un segundo para leerse. La tipografía hace una parte sorprendente de ese trabajo. Estas son tipografías gratuitas que se ganan la atención, agrupadas por lo que mejor hacen, con combinaciones que puedes usar hoy. ## The short version - Las buenas tipografías para titulares tienen formas de letra claras, grosores potentes y carácter suficiente para reconocerse de un vistazo. - Las tipografías condensadas como Anton y Bebas Neue acomodan palabras largas a tamaños grandes, lo que va bien en carteles y miniaturas. - Las serifas de alto contraste como Playfair Display y DM Serif Display dan a los titulares un tono editorial y refinado. - Una tipografía de titular suele combinarse con una de cuerpo más discreta, como Inter o DM Sans, para todo lo demás. - Los titulares grandes suelen necesitar un tracking y un interlineado algo más cerrados que los valores por defecto de la tipografía. Las mejores **tipografías para titulares** son las que se leen de un solo vistazo a tamaños grandes y transmiten un tono claro: sans serif condensadas como Anton o Bebas Neue para dar golpe, grotescas pesadas como Archivo Black para dar peso, y serifas de alto contraste como Playfair Display o DM Serif Display para dar elegancia. Todas son gratuitas en [Google Fonts](https://fonts.google.com). La adecuada depende menos del gusto que del trabajo: cuántas palabras, cuánto espacio y qué sensación debe dar el titular. ## Qué hace buena a una tipografía de titular - **Formas claras de un vistazo.** Contraformas abiertas y letras distintas, para que las palabras se lean antes de que la mirada se asiente. - **Grosor de sobra.** Una familia con negrita, extranegrita o black, porque los titulares en el móvil necesitan trazos pesados. - **Buen espaciado y kerning por defecto.** El texto grande magnifica cada hueco; las tipografías bien hechas necesitan menos arreglos. Mira [el kerning](https://gradiently.design/es/guide/kerning). - **Un tono acorde con el mensaje.** Estridente, calmado, lujoso o técnico. La tipografía lo dice antes que las palabras. - **El ancho adecuado para tu espacio.** Las condensadas acomodan palabras largas en formatos estrechos; las anchas van bien con palabras cortas y espacio alrededor. ## Las mejores tipografías gratuitas para titulares, por estilo | Estilo | Google Fonts para probar | Sensación | Ideal para | | --- | --- | --- | --- | | Sans condensada | Anton, Bebas Neue, Oswald, Barlow Condensed, Big Shoulders Display | Estridente, urgente, deportiva | Carteles, miniaturas, publicaciones de rebajas | | Grotesca pesada | Archivo Black, Inter Tight, Work Sans en black | Directa, moderna, sin rodeos | Anuncios, lanzamientos de producto | | Sans geométrica | Montserrat, Poppins, Outfit, League Spartan | Amistosa, limpia, redonda | Startups, servicios, publicaciones sociales | | Sans con carácter | Bricolage Grotesque, Space Grotesk, Syne | Distintiva, actual, algo peculiar | Marcas que quieren tener voz | | Serifa de alto contraste | Playfair Display, DM Serif Display, Instrument Serif | Editorial, refinada, cara | Moda, belleza, revistas, cartas de restaurante | | Serifa suave | Fraunces, Young Serif | Cálida, artesanal, cercana | Comida, cafeterías, tiendas independientes | Una lista corta para empezar. Todas las tipografías de aquí son gratuitas en Google Fonts con una licencia abierta que permite el uso comercial. Algunas notas útiles antes de elegir. **Bebas Neue** solo tiene mayúsculas, así que va bien en líneas cortas y gritadas más que en frases. **Oswald** es una reelaboración del clásico estilo Alternate Gothic y viene en varios grosores, lo que la hace más flexible que Anton. **Fraunces** es una tipografía variable con ejes de suavidad y un modo juguetón y torcido, de modo que una sola familia puede pasar de nítida a achuchable. **Syne** se hace notablemente más ancha en sus grosores más pesados, lo que da a un titular en negrita una presencia real. Una publicación vertical de rebajas con REBAJAS DE VERANO en grandes mayúsculas condensadas sobre un degradado vivo Palabras cortas y gritadas en mayúsculas: el registro para el que se hace una tipografía condensada como Anton o Bebas Neue. Una publicación vertical editorial con un titular en serifa refinada que dice El regreso silencioso del lino Un titular editorial pide lo contrario: una serifa de alto contraste como Playfair Display frena al lector y transmite cuidado. ## Cómo elegir una tipografía de titular 1. **Escribe primero el titular real** Prueba con tus palabras reales, no con el texto de muestra de la tipografía. Una tipografía que luce genial con «Hamburgefonts» puede verse rara con el nombre de tu marca. 2. **Mide el espacio** Un titular largo en un formato estrecho, como una story o un pin, necesita una tipografía condensada. Las líneas cortas en formatos anchos pueden permitirse una más ancha. 3. **Haz coincidir el tono con el mensaje** Anota tres palabras que describan cómo debe sentirse el titular. Preselecciona solo las tipografías que encajen con las tres. 4. **Prueba al menor tamaño real** Reduce el diseño a tamaño de móvil o a miniatura de cuadrícula. Los trazos finos y las contraformas cerradas fallan primero. 5. **Combínala con una tipografía de cuerpo discreta** Elige una tipografía calmada y legible para el texto de apoyo, de modo que el titular siga siendo lo más estridente de la página. ## Combinar tipografías de titular con texto de cuerpo Una tipografía de titular es una especialista. Brilla a 90 px y cansa la vista a 16 px. Combínala con una de uso general que se lea bien en párrafos y no moleste. Las combinaciones más seguras contrastan de una forma clara, normalmente serifa frente a sans, o condensada frente a ancho normal. [La combinación de tipografías](https://gradiently.design/es/guide/font-pairing) explica los principios, y [las combinaciones de Google Fonts](https://gradiently.design/es/guide/google-fonts-pairings) tiene muchas más. | Titular | Cuerpo | Por qué funciona | | --- | --- | --- | | Anton | Inter | Impacto condensado sobre una sans neutra y muy legible | | Playfair Display | Source Sans 3 | Contraste editorial clásico de serifa y sans | | Bricolage Grotesque | DM Sans | Un titular con carácter sobre un cuerpo geométrico y calmado | | DM Serif Display | DM Sans | Dibujadas como compañeras, así que las proporciones coinciden | | Archivo Black | Archivo | Una familia en dos grosores, la combinación más simple que hay | | Fraunces | Manrope | Serifa cálida y suave sobre una sans limpia y moderna | Seis combinaciones hechas con Google Fonts gratuitas. Usa la tipografía de titular para una o dos líneas; deja que la de cuerpo cargue con todo lo demás. ## Cómo componer un titular: tamaño, espaciado y altura de línea Incluso la tipografía adecuada se ve débil con los ajustes por defecto. El texto grande necesita un tracking y un interlineado más cerrados que el de cuerpo, y necesita menos palabras. En la práctica, eso significa un espaciado entre letras de entre menos 0,01 y menos 0,03 em y una altura de línea de entre 1,0 y 1,1. En una publicación social de 1080 px, un titular suele ir entre 90 y 140 px; [el tamaño de letra para publicaciones de Instagram](https://gradiently.design/es/guide/font-size-for-social-media) tiene la escala completa. ### Evita - Un grosor ligero para el titular principal en el móvil - Fuentes script o decorativas para titulares largos - Altura de línea por defecto en un titular de tres líneas - Dos tipografías de exhibición distintas en un diseño - Doce palabras en tamaño de titular ### Haz - De seminegrita a black para redes sociales y miniaturas - Una tipografía de exhibición para impactar, una sans para el detalle - Altura de línea cerca de 1,05 para líneas apiladas - Una tipografía de titular, usada con coherencia - De cinco a ocho palabras, recortando hasta que duela ```html ``` Cargar una combinación de titular y cuerpo desde Google Fonts. La pila de reserva mantiene la línea con un ancho similar mientras se carga la tipografía. El fondo también importa. Un titular pesado sobre un degradado recargado aún puede romperse donde cambia el color de detrás. Los Marks de Gradiently mueven su zona más tranquila detrás de tus palabras y eligen tinta clara u oscura línea a línea, y los tratamientos de Lettering, como Contorno, Interior y Relieve, dan al titular una presencia extra sin cajas ni sombras. Para texto grande en carteles, mira las [tipografías de exhibición](https://gradiently.design/es/guide/display-fonts) y las [tipografías en negrita](https://gradiently.design/es/guide/bold-fonts); para miniaturas, [el texto en miniaturas](https://gradiently.design/es/guide/typography-for-thumbnails). ## FAQ ### ¿Cuál es la mejor tipografía para titulares? Depende del trabajo. Anton o Bebas Neue van bien en titulares estridentes y cortos; Playfair Display o DM Serif Display en los editoriales; Montserrat u Outfit en los amistosos y limpios. ### ¿Son gratuitas las Google Fonts para uso comercial? Las tipografías de Google Fonts se publican con licencias abiertas, sobre todo la SIL Open Font License, que permiten el uso comercial. La página de cada tipografía en Google Fonts muestra su licencia, así que compruébala antes de depender de ella. [Las licencias de tipografías](https://gradiently.design/es/guide/font-licensing) explica los detalles. ### ¿Los titulares deben ser serif o sans serif? Sirven ambas. Las sans serif se leen directas y modernas; las serifas, editoriales y refinadas. Elige según el tono que quieras y combina con la opuesta para el texto de cuerpo. ### ¿Qué tamaño de letra debe tener un titular? En una publicación social de 1080 px, de 90 a 140 px. En un sitio web, entre 2,5 y 4 veces el tamaño del cuerpo, según tu escala tipográfica. ### ¿Puedo usar dos tipografías de titular en un diseño? Rara vez es buena idea. Una tipografía de exhibición más una de cuerpo calmada da una jerarquía más clara y se ve más intencionada.