InnoMarts logo
InnoMarts
Fast websites
← Back to course

Colori, Font e Stile del Testo

Colori, Font e Stile del Testo

Bentornato.

Nella lezione precedente hai imparato i selettori CSS.

Ora puoi dire a CSS esattamente cosa deve stilizzare.

Molto potente.

Molto pericoloso.

Come dare un pennello a qualcuno che ha appena scoperto i gradienti.

In questa lezione ci concentreremo sul testo.

Perché la maggior parte dei siti web è piena di testo.

Titoli.

Paragrafi.

Link.

Pulsanti.

Messaggi.

Avvisi.

Piccolo testo nel footer che nessuno legge ma che tutti legalmente devono avere.

Se il testo è difficile da leggere, tutto il sito sembra rotto.

Anche se il layout è tecnicamente corretto.

Il testo leggibile non è decorazione.

Il testo leggibile è sopravvivenza.

Cosa Imparerai

In questa lezione imparerai:

Perché lo Stile del Testo Conta

HTML dà significato al testo.

CSS dà presentazione al testo.

HTML dice:

<h1>Benvenuto nel Mio Sito</h1>
<p>Questo è un paragrafo.</p>

CSS dice:

h1 {
  color: #111827;
  font-size: 48px;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

Ora il browser sa non solo cos’è il contenuto, ma anche come dovrebbe apparire.

Un buon stile del testo aiuta gli utenti a leggere comodamente.

Un cattivo stile del testo fa scappare gli utenti più velocemente di uno sviluppatore che vede “undefined is not a function” venerdì sera.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson3
cd css-lesson3
touch index.html
touch style.css

Dovresti avere:

css-lesson3/
  index.html
  style.css

Apri la cartella nel tuo editor.

Creeremo una piccola pagina articolo.

Perché gli articoli sono perfetti per praticare lo stile del testo.

Tanti titoli.

Tanti paragrafi.

Tante opportunità per rendere tutto leggibile.

O terribile.

Noi scegliamo leggibile.

Siamo persone civili.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colori, Font e Stile del Testo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Imparare lo Stile del Testo con CSS</h1>
    <p class="subtitle">Rendi le parole leggibili, belle e un po’ meno noiose.</p>
  </header>

  <main class="page">
    <article class="article-card">
      <p class="category">CSS Basics</p>

      <h2>Perché lo Stile del Testo Conta</h2>

      <p>
        Il testo è una delle parti più importanti di qualsiasi sito web. Se le persone non riescono a leggere comodamente il contenuto, non resteranno a lungo.
      </p>

      <p>
        CSS ci permette di controllare colori, font, dimensioni, spaziatura, allineamento e molti altri dettagli che rendono la lettura più semplice.
      </p>

      <h3>Il Testo Leggibile È Buon Design</h3>

      <p>
        Il buon design non riguarda solo bei colori ed effetti eleganti. Riguarda anche la chiarezza delle informazioni.
      </p>

      <a href="#" class="read-more">Leggi di più</a>
    </article>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo lo stile del testo con CSS.</p>
  </footer>
</body>
</html>

Questa pagina ha:

Perfetto.

Un piccolo campo di gioco per il testo.

Ma senza sabbia nelle scarpe.

Inizia con gli Stili Base della Pagina

Apri style.css e aggiungi:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

Questo dà alla pagina:

La pagina sembra già meno caotica.

Non finita.

Ma meno come se il browser avesse preso tutte le decisioni di design durante la pausa pranzo.

Colore del Testo con color

La proprietà color cambia il colore del testo.

Esempio:

p {
  color: #374151;
}

Questo rende il testo dei paragrafi grigio scuro.

Il grigio scuro è spesso più facile da leggere del nero puro.

Il nero puro su bianco puro può risultare duro.

Come se la pagina stesse urlando.

Aggiungi questo:

p {
  color: #374151;
}

Ora tutti i paragrafi usano un colore più morbido.

Piccolo cambiamento.

Grande comfort.

Gli occhi degli utenti ti ringraziano in silenzio.

Colore di Sfondo

La proprietà background-color cambia lo sfondo di un elemento.

Esempio:

.site-header {
  background-color: #111827;
}

Aggiungi questo:

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

Ora l’header ha:

È già più intenzionale.

CSS sta iniziando a comportarsi bene.

Non fidarti completamente.

Ma è progresso.

Font Family

La proprietà font-family controlla il carattere tipografico.

Esempio:

body {
  font-family: Arial, sans-serif;
}

Questo significa:

Usa Arial se disponibile. Altrimenti usa qualsiasi font sans-serif.

Il fallback è importante.

Non tutti i computer hanno tutti i font.

I browser sono pratici.

Hanno bisogno di piani B.

Come gli sviluppatori prima del deploy in produzione.

Font family comuni:

font-family: Arial, sans-serif;
font-family: Georgia, serif;
font-family: "Courier New", monospace;

Per ora tieni questo:

body {
  font-family: Arial, sans-serif;
}

Semplice.

Leggibile.

Sicuro.

Non drammatico.

Font Size

La proprietà font-size controlla la dimensione del testo.

Esempio:

h1 {
  font-size: 48px;
}

Aggiungi questo:

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

p {
  font-size: 18px;
}

Ora titoli e paragrafi hanno dimensioni diverse.

Questo crea gerarchia.

La gerarchia dice all’utente cosa è più importante.

Senza gerarchia, tutto urla allo stesso volume.

Non è design.

È una cena di famiglia con Wi-Fi scarso.

Font Weight

La proprietà font-weight controlla quanto è spesso il testo.

Esempio:

h1 {
  font-weight: 700;
}

Valori comuni:

font-weight: 400;
font-weight: 600;
font-weight: 700;

Puoi anche usare parole:

font-weight: normal;
font-weight: bold;

Aggiungi questo:

h1,
h2,
h3 {
  font-weight: 700;
}

.category {
  font-weight: 700;
}

Ora i titoli e la category label sembrano più forti.

Usa il grassetto con attenzione.

Se tutto è in grassetto, niente è davvero in grassetto.

Come se ogni pulsante dicesse “URGENTE”.

Alla fine nessuno ti crede più.

Line Height

La proprietà line-height controlla lo spazio tra le righe del testo.

Esempio:

p {
  line-height: 1.7;
}

Aggiungi questo:

p {
  font-size: 18px;
  line-height: 1.7;
}

Questo migliora la leggibilità.

Senza un buon line-height, i paragrafi sembrano compressi.

Come parole in un ascensore affollato.

Dagli spazio.

Anche le parole hanno bisogno di ossigeno.

Text Align

La proprietà text-align controlla l’allineamento orizzontale.

Esempio:

text-align: center;

Valori comuni:

text-align: left;
text-align: center;
text-align: right;

L’abbiamo già usata nell’header:

.site-header {
  text-align: center;
}

Usa il testo centrato con attenzione.

Funziona bene per header brevi.

Ma i paragrafi lunghi sono di solito più facili da leggere allineati a sinistra.

Non centrare un intero articolo, a meno che tu non voglia far soffrire educatamente i lettori.

Text Transform

La proprietà text-transform cambia maiuscole e minuscole del testo.

Esempio:

.category {
  text-transform: uppercase;
}

Aggiungi questo:

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Questo fa sembrare la category label una piccola etichetta.

letter-spacing aggiunge spazio tra le lettere.

Utile per etichette uppercase.

Pericoloso se esageri.

Troppo letter spacing fa sembrare il testo come se stesse cercando di scappare.

Text Decoration

La proprietà text-decoration controlla le linee sul testo.

I link hanno una sottolineatura di default.

Puoi rimuoverla:

a {
  text-decoration: none;
}

Ma attenzione.

Le sottolineature aiutano gli utenti a riconoscere i link.

Se rimuovi la sottolineatura, rendi il link chiaramente riconoscibile in altro modo.

Aggiungi questo:

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

Ora il link è pulito.

Quando l’utente passa sopra con il mouse, la sottolineatura ritorna.

Educato.

Leggibile.

Un link con buone maniere.

Stilizza la Article Card

Ora rendi l’articolo più leggibile.

Aggiungi questo:

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

Questo crea:

Ora la pagina ha struttura.

Il testo ha una casa.

Una bella casa.

Non una cantina con Times New Roman di default.

Stilizza il Footer

Aggiungi:

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Ora il footer sembra più leggero.

Il testo del footer di solito deve essere meno dominante.

È utile.

Ma non deve entrare nella stanza con una tromba.

CSS Completo

Il tuo style.css dovrebbe essere così:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h1,
h2,
h3 {
  font-weight: 700;
}

.subtitle {
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Salva il file.

Aggiorna il browser.

La pagina dovrebbe essere molto più leggibile.

Non solo stilizzata.

Leggibile.

Questo è l’obiettivo.

Un sito non deve solo sembrare “cool”.

Deve aiutare le persone a capire.

Idea selvaggia, a quanto pare.

Errori Comuni

Testo Troppo Piccolo

Male:

p {
  font-size: 10px;
}

Il testo minuscolo non è elegante.

È solo minuscolo.

Il testo principale dovrebbe essere comodo da leggere.

Un buon punto di partenza:

p {
  font-size: 16px;
  line-height: 1.6;
}

Per fare pratica, anche 18px va bene.

Contrasto Debole

Male:

p {
  color: #cccccc;
  background-color: #ffffff;
}

Testo grigio chiaro su sfondo bianco è difficile da leggere.

Può sembrare “soft”.

Ma sembra anche invisibile.

Il tuo contenuto non dovrebbe giocare a nascondino.

Troppi Font

Brutta idea:

h1 {
  font-family: Georgia, serif;
}

h2 {
  font-family: "Courier New", monospace;
}

p {
  font-family: Arial, sans-serif;
}

Usare troppi font rende la pagina disordinata.

Inizia con un font.

Forse due più avanti.

Non dodici.

Questo è un sito web, non uno zoo di font.

Pratica

Crea una piccola pagina in stile blog con:

Poi stilizza:

Concentrati sulla leggibilità.

Non sulla decorazione.

Prima leggibile.

Poi elegante.

Come imparare a camminare prima di comprare scarpe da corsa lucide.

Mini Sfida

Crea due article cards.

Dai a entrambe la classe:

class="article-card"

Poi crea una classe speciale:

class="article-card highlighted"

Stilizza l’articolo highlighted in modo diverso:

.highlighted {
  border: 2px solid #2563eb;
}

Prova a cambiare:

Stai praticando un vero modo di pensare in CSS:

stile base più variazione.

È così che i siti restano organizzati invece di trasformarsi in style soup.

Riassunto

Oggi hai imparato che:

Il testo non è un dettaglio piccolo.

Il testo è il contenuto principale di molti siti.

Trattalo bene.

Gli utenti lo noteranno.

Anche se non sapranno spiegare perché.

Prossima Lezione

Nella prossima lezione studieremo il box model.

Margin.

Padding.

Border.

Content.

La geometria segreta dietro ogni pagina web.

Preparati.

Le scatole stanno arrivando.