Tipografía y espaciado fluidos con clamp()

En el módulo 4 usaste clamp() para titulares. Hoy lo conviertes en SISTEMA: tipografía Y espaciados que escalan solos entre 375px y 1440px — la técnica que reemplaza docenas de media queries por un puñado de custom properties. Es la mitad "invisible" del responsive profesional: nada salta, todo fluye.

La fórmula, entendida de una vez

clamp(MIN, FLUIDO, MAX): el término del medio necesita una parte rem (respeta el zoom del usuario) y una vw (aporta la fluidez). ¿De dónde salen los números? De decidir los dos extremos:

• Quiero el h1 a 28px en 375px de pantalla, y a 48px en 1440px.
• La pendiente: (48−28) / (1440−375) = 20px por cada 1065px de viewport ≈ 1.88vw.
• El término rem ancla el inicio: 28px − (1.88% de 375px ≈ 7px) = 21px ≈ 1.3rem.

¿Aritmética cada vez? No: existen calculadoras (busca "fluid type calculator" — Utopia es la referencia) y, sobre todo, el sistema se define UNA vez por proyecto. Lo importante es entender qué controlas: los dos extremos y nada más.

El salto mental: espaciados fluidos

La misma lógica aplica al ESPACIO — y ahí está la ganancia grande. El padding de una sección que se ve bien a 64px en desktop asfixia en móvil; con clamp, respira en proporción:

<section class="seccion">
<h2>Sección con todo fluido</h2>
<p>Redimensiona la vista previa: el padding de la sección, el gap y el titular escalan JUNTOS y en proporción. Sin un solo breakpoint.</p>
</section>

body { font-family: system-ui; padding: 12px; }
.seccion {
background: #ede9fe; border-radius: 12px;
padding: clamp(1.5rem, 0.8rem + 3.5vw, 4rem);
display: grid; gap: clamp(0.5rem, 0.3rem + 1vw, 1.25rem);
}
h2 { font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem); margin: 0; color: #4c1d95; }
p { margin: 0; color: #5b21b6; line-height: 1.6; font-size: 1rem; max-width: 55ch; }

Mini-reto

Migra tu periódico al sistema fluido: define las 5-6 variables en :root y reemplaza los paddings de secciones y el tamaño de titulares. Luego arrastra la ventana de 375 a 1440 lentamente: si nada SALTA (solo fluye), lo lograste.

Qué sigue

Texto y espacio fluidos. La próxima lección remata las unidades del viewport que el móvil real complica: dvh, svh y lvh — y por qué la barra de Safari en iOS rompió el 100vh de media internet.