Hablemos de jerarquía visual 🙂

Este posteo tiene dos fines. Uno es explicar el tema y dejarte un consejito.

El otro es servirle de guía a mi futura yo, la próxima vez que quiera tocar el diseño del sitio para que no se vuelva loca con esto. 😉

Porque te cuento que en un blog, los H1, H2, H3, H4… cumplen dos roles a la vez:

SEO y estructura del contenido (Google y los LLM necesitan leerlos para entender de qué trata tu página).
Diseño y experiencia del lector (la tipografía y el contraste hacen que el texto sea fácil de escanear).

Al final, los encabezados no son solo un detalle técnico ni un capricho de diseñador: son el mapa que guía a tu lector y, al mismo tiempo, las señales que Google (y ahora también las IA) necesitan para entender de qué hablás.

Jugar con tamaños, pesos y colores en una tipografía no es cuestión de gusto solamente: es darle ritmo a la lectura, es hacer que tu mensaje se entienda más rápido y se recuerde mejor.

Si sentís que tu sitio se ve plano o peor, que es un cambalache, empezar por definir bien los H1, H2 y H3 puede ser ese primer paso sencillo que cambia la experiencia de tus visitantes y, en consecuencia, tus resultados.

La tipografía es parte de tu voz digital. Así como elegís qué contar en cada post, también podés decidir cómo se escucha lo que escribís. 💖

Las jerarquías en mi sitio

El nuevo diseño del blog usa la tipografía «Poppins«. A mi ojo poco entrenado le termina pareciendo igual a muchas otras similares. La elegí justamente por eso, quería que fuera legible y no algo tan distractivo que moleste al leer.

Poppins es una tipografía geométrica, clara y muy versátil, me deja jugar con peso, tamaño, espaciado y estilo en lugar de obligarme a cambiar de fuente. Eso mantiene coherencia visual y evita que mi blog sea un “carnavalito” de letras.

Aquí defino mis «h1», «ha2», etc.:

Esto es un encabezado H1

Esto es un encabezado H2

Esto es un encabezado H3

Esto es un encabezado H4

Esto es un encabezado H5

Esto es un encabezado H6

Ideas para futuras combinaciones de jerarquía con Poppins:

H1 → XXL: Usar extrabold (700–800), con poco espaciado entre letras (tracking ajustado).
H2 → Grande, pero no tanto. Probar semibold (600), un tamaño 70–75% del H1, con un color secundario (ej. gris oscuro en lugar de negro) o incluso en mayúsculas.
H3 → Mediano, medium (500), con más espaciado de letras para diferenciarlo del párrafo. Otra opción: ponerlo en italic si querés dar un estilo editorial.
H4 → Igual tamaño que el cuerpo de texto pero en bold, para usar dentro de secciones largas.
H5 y H6 → Más chicos, pero pueden destacarse con color de acento (ej. el color de tu marca), o un subrayado fino.

Trucos visuales

Jugá con el espaciado vertical (margin-top y margin-bottom): un H2 con más aire se siente más importante aunque no sea mucho más grande.
Podés usar líneas finas o puntos decorativos debajo de un H2 (muy sutil, sin romper tu regla de no usar divisores gruesos en el cuerpo).
Si en tu blog incluís listas o guías largas, un H3 con caja de color suave (background claro, padding pequeño) ayuda a cortar bloques de texto.

Fuentes similares a Poppins (misma onda geométrica, limpias):

Tener alternativas a la letra base abre el juego para variar o combinar sin perder coherencia.

Poppins es geométrica, moderna y muy legible, por lo que combina bien con fuentes que aporten contraste (serif elegantes, sans humanistas) o con hermanas de la misma familia geométrica.

Montserrat → también geométrica y muy usada en web, un poco más redondeada.
Raleway → elegante, con trazos más finos, queda bien para titulares.
Nunito / Nunito Sans → redondeada y amigable, ideal para cuerpo de texto.
Rubik → geométrica con bordes suaves, da un aire tecnológico.
Quicksand → más lúdica y ligera, buena para subtítulos.

Fuentes que combinan bien con Poppins (contraste tipográfico):

Merriweather (serif) → excelente para párrafos largos, aporta un toque editorial.
Roboto Slab (serif cuadrada) → combina lo clásico con lo moderno.
Playfair Display (serif elegante) → ideal para títulos destacados o citas.
Lora (serif moderna) → legible y equilibrada, muy buena para blogs.
Source Serif Pro → otra serif clara que acompaña bien a un sans como Poppins.

Tips de combinación:

Poppins para títulos (H1, H2) + una serif (ej. Lora o Playfair) para el cuerpo de texto → estilo editorial, más serio.
Poppins en todo el sitio pero jugando con pesos (light para párrafos, bold para Hx) → estilo minimalista, limpio.
Poppins con una sans más humanista (ej. Nunito o Roboto) → equilibrio entre lo geométrico y lo cálido.