Dimensione, peso e stile del carattere
Controllate la dimensione del testo con font-size, il peso con font-weight e lo stile con font-style.
Dimensione, peso e stile del carattere è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
font-size
font-size imposta l'altezza dei glifi. Accetta qualsiasi unità di lunghezza. Per una tipografia scalabile e accessibile, è consigliato usare rem.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Dimensioni dei font tramite parole chiave
CSS offre anche dimensioni assolute tramite parole chiave (da xx-small a xx-large) e parole chiave relative (smaller, larger) rispetto alla dimensione del font dell'elemento padre.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight imposta lo spessore del testo. Utilizzi valori numerici (da 100 a 900 con incrementi di 100) oppure parole chiave:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight e font variabili
Con i font variabili, qualsiasi valore intero dello spessore (ad esempio font-weight: 550) è valido e il font interpola i valori tra gli assi definiti. Questo offre un controllo tipografico molto preciso.
font-style
font-style controlla la resa corsiva e obliqua:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant abilita funzionalità tipografiche come le maiuscolette:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
La forma abbreviata font
La forma abbreviata font raggruppa stile, variante, spessore, dimensione, altezza della riga e famiglia:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Ridimensionamento reattivo della dimensione del font
Utilizzi clamp() per creare una tipografia fluida che aumenti o diminuisca gradualmente tra una dimensione minima e una massima:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height per la leggibilità
line-height imposta la spaziatura verticale tra le righe. È consigliato il valore senza unità (ad esempio 1.5), perché si adatta alla dimensione del font degli elementi discendenti.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing e word-spacing
letter-spacing aggiunge spazio tra i caratteri; word-spacing aggiunge spazio tra le parole. Utilizzi unità em in modo che si adattino alla dimensione del font.
<h2 class="heading">Spaced Out Heading Text</h2>
Dimensionamento accessibile dei font
Non imposti mai font-size in px sull'elemento html o body. In questo modo si sovrascrive la preferenza dell'utente per la dimensione del font impostata nel browser. Utilizzi invece unità rem basate sul valore predefinito del browser.
Verifica rapida
A quale valore numerico di font-weight corrisponde la parola chiave bold?
Riepilogo
Utilizzi rem per font-size per rispettare le preferenze dell'utente. font-weight accetta valori da 100 a 900 oppure parole chiave. La forma abbreviata font raggruppa diverse proprietà. Utilizzi clamp() per una tipografia fluida e un valore line-height senza unità per ottenere una spaziatura uniforme.
Domande Frequenti
La lezione «Dimensione, peso e stile del carattere» è gratuita?
Sì — il testo completo di «Dimensione, peso e stile 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Dimensione, peso e stile del carattere»?
Controllate la dimensione del testo con font-size, il peso con font-weight e lo stile con font-style. Eserciti 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 CSS Academy?
Non è richiesta alcuna esperienza precedente. 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 2 di 4.
Quanto tempo richiede la lezione «Dimensione, peso e stile 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 CSS Academy?
Sì. Ogni lezione 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
- Famiglie di caratteri e font web-safe
- Dimensione, peso e stile del carattere
- Allineamento, decorazione e spaziatura del testo
- Google Fonts e @font-face