Tipografia fluida con clamp
Sistema tipografico che cresce gradualmente tra smartphone e desktop senza numerose media query.
Quando si usa
Quando vuoi titoli e testi proporzionati alle dimensioni dello schermo, mantenendo limiti minimi e massimi controllati.
Perché si usa
clamp combina una misura minima, una preferita legata al viewport e una massima, evitando testi troppo piccoli o eccessivamente grandi.
Vantaggi principali
- Soluzione riutilizzabile e adattabile
- Codice privo di dipendenze esterne
- Struttura commentabile e integrabile nel progetto
Anteprima del risultato
La tipografia fluida aumenta o riduce la dimensione del testo in modo proporzionato, senza media query complesse.
Titolo fluido
Questo testo dimostra un'impostazione tipografica più elastica e adatta a schermi diversi.
Codice completo
Studia il flusso prima di copiarlo e provalo in un ambiente separato. Adatta sempre nomi, selettori, percorsi e controlli al progetto reale.
<article class="testo-fluido">
<h1>Un titolo che si adatta allo schermo</h1>
<p>Il corpo del testo mantiene una misura leggibile su dispositivi diversi.</p>
</article>
<style>
:root{
--testo:clamp(1rem,.94rem + .28vw,1.18rem);
--titolo:clamp(2rem,1.25rem + 3vw,4.5rem);
--spazio:clamp(1rem,.65rem + 1.5vw,2.25rem);
}
.testo-fluido{font-size:var(--testo);padding:var(--spazio);max-width:72ch}
.testo-fluido h1{font-size:var(--titolo);line-height:1.05;text-wrap:balance}
.testo-fluido p{max-width:65ch}
</style>Da personalizzare: Valori minimi e massimi, ritmo verticale e larghezza massima delle righe.
Errore da evitare: Non collegare tutte le dimensioni soltanto a vw: senza limiti la leggibilità peggiora sugli schermi estremi.