Dimensione e peso del carattere
Utilizzi da text-sm a text-9xl e da font-thin a font-black per controllare la rilevanza visiva del testo.
Dimensione e peso del carattere è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
La scala delle dimensioni dei caratteri di Tailwind
Imposti la dimensione del testo con la scala text-*, da text-xs fino a text-9xl. Scelga uno di questi livelli invece di digitare valori in pixel, così la tipografia resterà coerente.
<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>Dimensioni del testo display e delle hero
Per il testo display di grandi dimensioni nelle hero section, usi text-7xl, text-8xl o text-9xl. Li combini con font-extrabold e tracking-tight per titoli capaci di attirare l'attenzione.
<h1 class="text-7xl font-black tracking-tight text-gray-900">
Make it big.
</h1>Utility per il peso del carattere
Controlli lo spessore con il peso del carattere: font-normal per il testo del corpo, font-semibold per le etichette, font-bold per i titoli e font-extrabold o font-black per un'enfasi marcata.
<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>Combinare dimensione e peso
Dimensione e peso sono indipendenti, quindi possono essere combinati: text-sm font-medium per un'etichetta di navigazione, text-4xl font-bold per un titolo. Insieme creano la gerarchia visiva.
<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>Dimensioni dei caratteri responsive
Il testo può adattarsi alle dimensioni dello schermo. Aggiunga un prefisso di breakpoint come md: a qualsiasi dimensione: text-3xl md:text-5xl è piccolo sui telefoni e grande sui desktop.
<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
Scales with the screen
</h1>Stile del carattere: corsivo
Aggiunga italic per inclinare il testo e not-italic per annullare l'effetto. È ideale per citazioni e riferimenti: italic font-light text-gray-500 crea il classico aspetto da testimonianza.
<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>Variante numerica del carattere
Per i numeri, tabular-nums assegna a ogni cifra la stessa larghezza, così prezzi e statistiche si allineano ordinatamente in tabelle e colonne. Un piccolo dettaglio dall'aspetto molto pulito.
<!-- Tabular numbers align in columns -->
<table>
<tr>
<td class="tabular-nums text-right">1,234.56</td>
</tr>
<tr>
<td class="tabular-nums text-right">98,765.00</td>
</tr>
</table>In pratica: tipografia della navigazione
I collegamenti di navigazione funzionano bene con un aspetto piccolo e medio: text-sm font-medium. Evidenzi il collegamento attivo portandolo a font-semibold text-indigo-600, così risalterà.
<nav class="flex gap-6">
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
<a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>In pratica: testo del corpo di un articolo
Un testo del corpo confortevole usa text-base o text-lg, una spaziatura rilassata e text-gray-700 invece del nero intenso. Aggiunga max-w-prose per mantenere le righe a una larghezza facile da leggere.
<article class="max-w-prose mx-auto">
<p class="text-lg font-normal text-gray-700 leading-relaxed">
This is body text set at a comfortable reading size.
The max-w-prose constraint keeps lines short enough
to read without losing your place.
</p>
</article>In pratica: tipografia per la visualizzazione dei dati
Per le dashboard, faccia risaltare i numeri: text-3xl font-bold text-gray-900 per un valore, con un'etichetta più piccola text-sm uppercase tracking-wider sopra di esso.
<div class="text-center">
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
Total Users
</p>
<p class="text-3xl font-bold text-gray-900 tabular-nums">
24,781
</p>
</div>Riferimento rapido alle dimensioni dei caratteri
Una rapida mappa mentale: text-xs per le didascalie, text-base per il corpo del testo, da text-2xl a text-4xl per i titoli, text-5xl e oltre per il testo hero. Abbini a ciascuna dimensione il peso corretto.
Verifica rapida
Verifica rapida! Vediamo quanto ha assimilato di dimensioni e pesi. 🔤
Riepilogo della lezione
Ottimo! text-* controlla le dimensioni, da font-thin a font-black imposta il peso e combinare dimensioni, peso e colore crea una gerarchia visiva. Prossimo argomento: colore e opacità del testo.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Dimensione e peso del carattere» è gratuita?
Sì — il testo completo di «Dimensione e peso del carattere» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Dimensione e peso del carattere»?
Utilizzi da text-sm a text-9xl e da font-thin a font-black per controllare la rilevanza visiva del testo. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Dimensione e peso del carattere»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Dimensione e peso del carattere
- Colore e opacità del testo
- Interlinea e spaziatura tra lettere
- Allineamento e decorazione del testo