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+