Domina la tipografía y las jerarquías visuales en Divi 5

Oct 31, 2025

La tipografía es el corazón del diseño editorial. No se trata solo de elegir una fuente bonita, sino de construir un sistema coherente que comunique autoridad, ritmo y legibilidad. En Divi 5, las nuevas herramientas del Design System permiten controlar cada aspecto de la tipografía —desde el tamaño hasta la familia y el espaciado— con una precisión que antes requería código CSS.

En esta guía aprenderás cómo combinar fuentes, definir jerarquías visuales y aplicar escalas fluidas con clamp() para que tu periódico digital se vea impecable en cualquier dispositivo.

🟣 Elegir las fuentes adecuadas

Todo proyecto editorial necesita una voz tipográfica clara. En Divi 5 puedes definir tus fuentes base desde Variables → Fonts o Variables → Text. Lo ideal es trabajar con un máximo de dos familias tipográficas:

Titulares (Heading): una fuente con carácter, de tipo serif o display, que aporte identidad y ritmo visual.
Ejemplo: Adamina, serif o Playfair Display, serif.
Cuerpo (Body): una fuente legible y neutra, pensada para lectura prolongada.
Ejemplo: Georgia, serif o Lato, sans-serif.
Metadatos (Meta): una tipografía auxiliar, más ligera y moderna, para autores, fechas o categorías.
Ejemplo: Lato, sans-serif.

💡 Consejo DNP: Define estas tres fuentes como variables globales (Heading, Body, Meta) para que al cambiar una tipografía se actualice automáticamente en todo el sitio. Así aseguras consistencia y ahorras horas de edición manual.

🟣 Construir jerarquías visuales

El siguiente paso es definir niveles de lectura: qué debe destacar primero, qué acompaña y qué complementa. Divi 5 permite crear un sistema tipográfico fluido con variables de tipo Number, asignando valores a cada encabezado (H1–H4) y al cuerpo de texto.

En DiviNewsPro usamos esta escala como base editorial:

H1 → clamp(28px, 4vw, 36px) → Titulares principales de portada o secciones.
H2 → clamp(22px, 3vw, 28px) → Subtítulos o encabezados intermedios.
H3 → clamp(18px, 2.5vw, 22px) → Títulos de bloques o módulos.
H4 → clamp(16px, 2vw, 18px) → Encabezados internos o destacados menores.
Body → clamp(14px, 1.8vw, 16px) → Texto base del artículo.

💡 Consejo DNP: clamp() permite que los tamaños cambien de forma natural entre pantallas pequeñas y grandes sin usar puntos de quiebre. Es la forma moderna de mantener proporción tipográfica en todo el sitio.

🟣 Aplicar las jerarquías en Divi 5

Para implementar el sistema:

Abre cualquier plantilla en el Visual Builder.
Selecciona el módulo de texto o título.
En Design → Text → Size, elige la variable global correspondiente (H1, H2, Body, etc.).
En Design → Text → Font, aplica la variable Heading, Body o Meta.
Guarda los cambios: el estilo se actualizará automáticamente en toda la web.

💡 Resultado: Cada módulo adopta un tamaño y una fuente coherentes, creando una lectura fluida y profesional.

🟣 Microtipografía y espaciado

Los pequeños detalles definen el acabado editorial:

Usa letter-spacing: 0.5px para titulares en mayúsculas.
Aumenta el line-height del cuerpo (1.6–1.8) para mejorar la legibilidad.
Mantén un margin-bottom uniforme entre párrafos (por ejemplo, 1.2em).

💡 Consejo DNP: define también variables globales de espaciado (--space-s, --space-m, --space-l) para aplicar márgenes consistentes entre bloques de texto, imágenes o citas.

🟣 Ejemplo práctico en DiviNewsPro

Supongamos que estás diseñando un artículo de portada con el título:

“La inteligencia artificial revoluciona el periodismo digital”

Asigna H1 con la fuente Adamina y color Heading Text.
El subtítulo (H2) usa Lato en clamp(22px, 3vw, 28px).
El cuerpo del texto emplea Georgia en clamp(14px, 1.8vw, 16px) con line-height: 1.7.
Los metadatos (autor, fecha) aplican la variable Meta en gris medio #666666.