Stile del testo CSS: font, dimensione, peso, sottolineatura, allineamento
Playground per lo stile del testo CSS
Stile del testo CSS: font, dimensione, grassetto, centrare | We.Inc
Un unico playground dal vivo per il testo CSS: famiglia di font, dimensione in px, rem o clamp(), peso, stile della sottolineatura, allineamento, interlinea e spaziatura, con le classi Tailwind.
In CSS il testo si stilizza con poche proprietà: font-family sceglie il carattere, font-size imposta la dimensione (rem è la scelta migliore), font-weight: 700 lo rende grassetto, text-decoration aggiunge una sottolineatura e text-align: center lo centra. line-height e letter-spacing controllano la spaziatura. Cambiale nel playground qui sotto e copia il CSS.
Le proprietà che userai di più
Obiettivo
CSS
Tailwind
Grassetto
font-weight: 700
Corsivo
font-style: italic
Sottolineato
text-decoration: underline
Centrare il testo
text-align: center
Testo più grande
font-size: 1.25rem
Righe più ariose
line-height: 1.6
leading-relaxed (1.625)
Invece di sei pagine di riferimento separate, questo unico playground copre insieme font, dimensione, peso, stile, dettagli della sottolineatura, allineamento, interlinea e spaziatura tra le lettere, scrive il CSS e le classi Tailwind mentre li modifichi e aggiunge ricette collaudate per centrare il testo, i font stack e il caricamento dei web font.
Scrivi una tua frase nel playground oppure tieni il testo di esempio.
Modifica i controlli di font, unità di misura, peso, decorazione e spaziatura. L'anteprima e il CSS si aggiornano subito.
Copia il blocco CSS, oppure le classi Tailwind per le stesse impostazioni.
Usa le ricette più in basso per centrare, per i font stack e per @font-face.
Il testo del corpo si legge meglio intorno ai 16-18 pixel, con un'interlinea da 1.5 a 1.7 e righe di circa 60-75 caratteri.
Imposta le dimensioni dei font in rem, così seguono le impostazioni del browser di chi legge. Usa clamp() per i titoli che devono crescere con lo schermo.
Carica solo i pesi del font che usi. Ogni peso in più di un web font è un altro file da scaricare.
Evita di sottolineare testo che non è un link. Chi legge si aspetta che le parole sottolineate siano cliccabili.
Domande frequenti
Come rendo il testo in grassetto con CSS?
Usa font-weight: bold oppure un numero come 600 o 700. I numeri tra 100 e 900 scelgono tra i pesi forniti dal font. Se il font ha solo il peso normale, il browser simula il grassetto ispessendo le lettere, con un risultato più pesante e meno nitido di un vero file in grassetto.
Come centro il testo in verticale?
text-align centra solo in orizzontale. Per centrare in verticale dentro un box, rendi il box un contenitore flex o grid: display: grid; place-items: center; centra il testo in entrambe le direzioni in una sola riga. Per una singola riga in una barra ad altezza fissa, funziona anche una line-height uguale all'altezza della barra.
Come cambio il colore o lo spessore della sottolineatura?
Usa text-decoration-color, text-decoration-thickness e text-underline-offset. Per esempio text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; dà una sottolineatura blu più spessa con spazio sotto le lettere.
line-height deve avere un'unità di misura?
Di solito no. Un valore senza unità come 1.5 viene moltiplicato per la dimensione del font di ogni elemento, così i titoli e il testo piccolo dentro il blocco mantengono una spaziatura sensata. Un valore fisso come 24px viene ereditato così com'è e può comprimere il testo più grande.
Cos'è un font stack?
Un elenco di font separati da virgole in font-family. Il browser usa il primo disponibile e scende nell'elenco se manca, terminando con una famiglia generica come sans-serif o serif che esiste sempre.
Unità di misura: px, rem e clamp()
I pixel danno una dimensione esatta che ignora la dimensione del testo preferita da chi legge. rem è relativo alla dimensione del font radice, 16px per impostazione predefinita, quindi 1.125rem corrisponde a 18px per la maggior parte delle persone e cresce per chi imposta un valore predefinito più grande.
clamp(min, preferred, max) serve per le dimensioni che devono scalare con la finestra. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) non è mai più piccolo di 28px né più grande di 48px e si muove in modo fluido nel mezzo. Tieni una parte in rem nel valore centrale, così lo zoom del browser e le impostazioni del testo hanno ancora effetto.
Impostazioni predefinite leggibili
La maggior parte dei problemi di lettura deriva da tre impostazioni: testo troppo piccolo, righe troppo lunghe e righe troppo fitte. Una max-width di circa 65ch sui paragrafi, una dimensione del font di almeno 1rem e un'interlinea vicina a 1.6 risolvono quasi tutto prima di qualsiasi altro stile.
I titoli grandi vogliono l'opposto: un'interlinea più stretta, intorno a 1.1-1.2, e spesso un letter-spacing leggermente negativo. Le piccole etichette in maiuscolo si leggono meglio con un po' di letter-spacing positivo.
Caricare i web font senza rallentare la pagina
Ogni web font è un download che può ritardare il testo. font-display: swap mostra subito il font di riserva e lo sostituisce quando arriva il web font, così chi legge non fissa mai un testo invisibile. Ospitare in proprio i file WOFF2 evita una connessione a un altro dominio.
Se usi Google Fonts, richiedi in un solo link solo le famiglie e i pesi che ti servono, e aggiungi gli hint preconnect che suggerisce. Scegliere nello stack un font di riserva con proporzioni simili riduce il salto quando il font viene sostituito.
Centrare il testo in orizzontale e in verticale
Orizzontale: text-align
text-align centra le righe dentro il blocco. Per centrare il blocco stesso, dagli una larghezza e margin-inline: auto.
In entrambe le direzioni: grid con place-items
Due righe di CSS sul contenitore centrano qualsiasi contenuto in entrambe le direzioni, qualunque sia la sua dimensione.
Sottolineature dall'aspetto curato
Colore, spessore, distanza e stile
Le proprietà di decorazione cambiano la sottolineatura senza toccare il colore del testo. text-decoration-skip-ink evita che le linee taglino i discendenti delle lettere.
Caricare un font con @font-face o Google Fonts
Font ospitato in proprio con @font-face
Punta src al tuo file WOFF2. Un blocco per ogni peso e stile che usi davvero.
Link di Google Fonts
Richiedi solo i pesi che usi. display=swap imposta font-display al posto tuo.
Impostazioni leggibili da cui partire
Una piccola base sensata per il testo
Dimensione del corpo, interlinea e lunghezza delle righe impostate una volta; titoli più stretti. Adatta colori e dimensioni al tuo design.
Equivalenti Tailwind
Il CSS e le classi Tailwind corrispondenti (tema predefinito)