CSS Testo adattivo

CSS Testo adattivo è un approccio alla formattazione del contenuto testuale che garantisce una visualizzazione ottimale del testo su diversi dispositivi e schermi. Questa tecnologia è una componente essenziale del web design reattivo.

Principali unità di misura

Unità relative

em – unità relativa che dipende dalla dimensione del carattere dell'elemento padre
rem – unità relativa basata sulla dimensione del carattere dell'elemento radice (root em)
vw – unità equivalente all'1% della larghezza della finestra di visualizzazione (viewport)
vh – unità equivalente all'1% dell'altezza della finestra di visualizzazione (viewport)
vmin – il valore minore tra vw e vh
vmax – il valore maggiore tra vw e vh

Unità assolute

px – pixel
pt – punti
pc – pica

Proprietà

font-size — dimensione del carattere.
line-height — altezza della riga.
font-weight — spessore del carattere.
text-align — allineamento del testo.
word-wrap e overflow-wrap — gestione dell'andata a capo delle parole.

Tecniche di adattamento

Tipografia fluida (Fluid Typography)

La tipografia fluida consente di scalare il testo in base alla dimensione dello schermo:

.fluid-text {
    font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Media Queries

Le Media Queries permettono di applicare diversi stili in base alla dimensione dello schermo:

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
}

La funzione calc()

La funzione calc() consente di combinare diverse unità di misura:

.adaptive-heading {
    font-size: calc(16px + 2vw);
    line-height: calc(1.1em + 0.5vw);
}

Funzioni moderne di CSS

clamp()

La funzione clamp() imposta valori minimi, preferiti e massimi:

.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

min() e max()

Le funzioni min() e max() aiutano a stabilire limiti dinamici:

.paragraph {
    width: min(65ch, 100%);
    font-size: max(1rem, 2vw);
}

Esempi di utilizzo

Titolo adattivo

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: calc(1rem + 2vw);
}

Paragrafo leggibile

p {
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    max-width: 65ch;
    margin: 0 auto;
}

Risultato del testo leggibile:

Prova il codice su una pagina separata

Consigli pratici

Utilizzare unità di misura relative invece di assolute
Combinare diverse tecniche per ottenere risultati ottimali
Testare il layout su diversi dispositivi
Considerare la leggibilità del testo
Definire valori minimi e massimi per evitare dimensioni estreme

Compatibilità con i browser

Funzione	Chrome	Firefox	Safari	Edge
clamp()	79+	75+	13.1+	79+
calc()	19+	4+	6+	12+
vw/vh	20+	19+	6+	12+