Titulares combinando distintas tipografías con CSS
Combinar dos tipografías en un mismo titular puede ayudarte a crear una jerarquía visual clara entre título y claim. En este artículo vemos cuándo funciona bien a nivel de diseño y cómo implementarlo con CSS de forma responsive.
Por Omar Benyakhlef Domínguez, diseñador y creativo digital.
Por qué combinar distintas tipografías en un titular
En el encabezado de este blog he combinado dos tipos distintos para construir un titular y su subtítulo. En lugar de colocar una línea encima de la otra sin más, he “montado” una tipografía sobre la otra, buscando equilibrio, legibilidad y una jerarquía visual clara entre las dos frases.
En este post te explico, primero, por qué puede funcionar este tipo de titulares con tipografías combinadas y, después, cómo construirlos con CSS de manera que sigan siendo legibles y responsive.
La idea de diseño: estructura vs. energía
La composición separa, por un lado, una tipografía condensada y racional para “DISEÑO UX/UI GLOOBS” y, por otro, una tipografía script gestual para el claim. Juntas crean un contraste claro entre “estructura” y “energía”.
¿Por qué estas tipografías?
-
>Bloque izquierdo: sans serif condensada, limpia y vertical. Transmite orden, precisión y profesionalidad. Es una buena “voz principal” para tu marca.
>Bloque derecho: script o handwritten con ritmo irregular. Aporta cercanía, creatividad y sensación de trabajo hecho a mano o enfoque más humano.
Aquí el contraste no es tanto serif/sans como geométrica/handwritten. Funciona porque las dos familias son muy diferentes en textura, ritmo y personalidad; se distinguen fácilmente y cada una cumple un rol concreto [web:75][web:84].
Jerarquía y lectura del titular
El ojo lee primero “DISEÑO UX/UI GLOOBS”, porque tiene más peso, mayor tamaño y una estructura en bloques. Después entra en el claim manuscrito. De este modo, la jerarquía queda muy clara.
Al estar el script alineado a la derecha y ligeramente escalonado, se percibe como un comentario añadido, casi un “apunte a mano” sobre lo que hago. Eso refuerza su papel de claim. Si hubiera colocado los dos textos uno debajo del otro, el resultado sería mucho más plano.
El bloque manuscrito es relativamente largo, pero la ruptura en varias líneas cortas evita que se convierta en una mancha ilegible.
Composición, espacio y legibilidad
El gran bloque vertical de palo seco a la izquierda funciona como “columna vertebral” del conjunto, mientras que el script ocupa el hueco de la derecha para equilibrar el peso visual.
El espacio en blanco alrededor del titular es generoso. Eso hace que la mezcla de fuentes respire y que no se sienta caótica, sino intencionada.
Aspectos a vigilar
-
>Las dos tipografías deben reconocerse bien y tener roles diferentes.
>El layout tiene que dar espacio suficiente a cada bloque para que no compitan entre sí.
>Hay que cuidar la legibilidad del script en tamaños pequeños y, si lo vas a usar mucho, definir una versión más compacta para usos reducidos.
Cómo construir este tipo de titulares con CSS
Para conseguir este efecto utilizo un contenedor principal con de>position: relative y dos bloques de texto solapados: el titular principal y el claim manuscrito. Ambos usan de>clamp() para que el tamaño de fuente sea fluido en función del viewport.
CSS
<style>
.hero-heading {
position: relative; }
.hero-main {
display: inline-block;
font-size: clamp(2.75rem, 4.5rem, 4.75rem);
line-height: 0.9;
font-weight: normal; }
.hero-script {
position: absolute;
left: 13rem;
top: 5rem;
font-family: ‘Summertime-regular’, ‘Summertime’, cursive;
font-size: clamp(1.5rem, 2rem, 2.25rem);
line-height: 0.8;
font-weight: normal; }
</style>
HTML
<h1>
<span class=’hero-main’>Diseño UX/UI<br>Gloobs</span>
<span class=’hero-script’>TENDENCIAS<br>
Y EXPERIENCIAS DIGITALES<br>QUE FUNCIONAN</span>
</h1>
</div>
Cómo funciona cada bloque
1. El contenedor principal
El contenedor de>.hero-heading actúa como marco de la composición. Al darle de>position: relative, puedo colocar el bloque manuscrito con de>position: absolute dentro, sin que se salga del área del titular.
2. El bloque principal del titular
El primer de><span>, de>.hero-main, le da estructura al titular:
-
>El uso de de>clamp() hace que el tamaño del titular sea fluido entre un mínimo, un valor ideal basado en el viewport y un máximo [web:70][web:71].
>de>line-height: 0.9 compacta las líneas “Diseño UX/UI” y “Gloobs” para que se lean como un bloque sólido.
>de>display: inline-block permite tratar ese texto como una pieza independiente sobre la que luego “apoyo” el manuscrito.
3. El bloque manuscrito
El segundo de><span>, de>.hero-script, se coloca por encima usando de>position: absolute:
-
>de>position: absolute lo saca del flujo normal y permite ubicarlo exactamente donde quiero respecto al contenedor de>.hero-heading.
>Los valores de de>left y de>top determinan cómo se abrazan ambos bloques. Ajustándolos cambias por completo la sensación de equilibrio.
>De nuevo, de>clamp() hace que el script escale con la pantalla, pero siempre algo más pequeño que el titular principal.
Hacerlo responsive
Tal y como está, el solapamiento funciona muy bien en desktop. Sin embargo, en móviles el de>left/de>top fijo puede hacer que el script se solape demasiado o se salga del contenedor.
Para evitarlo, puedes cambiar el comportamiento del script en pantallas pequeñas y colocarlo debajo del titular principal: