Teo
Teo Autore di matteoricci.net.

Introduzione CSS: Proprietà del testo

Introduzione CSS: Proprietà del testo

Tipografia CSS: Proprietà del Testo e Google Fonts

La tipografia è un aspetto cruciale del design di un sito web, poiché influisce sull’estetica e sulla leggibilità dei contenuti. In CSS, abbiamo diverse proprietà che ci permettono di controllare l’aspetto del testo, dall’aspetto visivo alla sua posizione all’interno degli elementi HTML. In questa guida, esploreremo le proprietà CSS per il testo e la loro configurazione, l’uso di Google Fonts e dei font customizzati, e l’impiego delle unità di misura relative e assolute.

Proprietà del Testo in CSS

  1. Color (Colore del Testo):
    • La proprietà color definisce il colore del testo di un elemento HTML. È possibile specificare il colore in vari formati: nomi di colori (es. red), valori esadecimali (es. #ff0000), valori RGB (es. rgb(255, 0, 0)), o valori HSL (es. hsl(0, 100%, 50%)).
    • Esempio: 
      1
2
3

      p {
  color: #333333;
}
  2. Font-Size (Dimensione del Carattere):
    • La proprietà font-size imposta la dimensione del testo e può essere definita con unità assolute (come px o pt) o relative (come %, em, rem). Un valore più grande rende il testo più grande e viceversa.
    • Esempio: 
      1
2
3

      h1 {
  font-size: 2rem; /* Dimensione relativa */
}
  3. Font-Weight (Peso del Carattere):
    • La proprietà font-weight specifica lo spessore del carattere. I valori possono variare da 100 (più sottile) a 900 (più spesso), o essere impostati come normal o bold.
    • Esempio: 
      1
2
3

      strong {
  font-weight: bold;
}
  4. Font-Style (Stile del Carattere):
    • La proprietà font-style controlla lo stile del carattere, solitamente impostato su normal o italic. Altri valori possono includere oblique, che inclina il testo, anche se non con la stessa precisione di italic.
    • Esempio: 
      1
2
3

      em {
  font-style: italic;
}
  5. Text-Align (Allineamento del Testo):
    • La proprietà text-align determina come viene allineato il testo all’interno di un elemento. I valori possono essere left, right, center, o justify.
    • Esempio: 
      1
2
3

      p {
  text-align: justify;
}
  6. Line-Height (Altezza della Linea):
    • La proprietà line-height controlla l’altezza di ciascuna riga di testo, influenzando la leggibilità e il “respiro” del testo. Solitamente è impostata come una unità senza dimensione (1.5) o con unità relative e assolute.
    • Esempio: 
      1
2
3

      p {
  line-height: 1.6;
}

Google Fonts e Font Customizzati

Google Fonts

Google Fonts è una libreria gratuita di font online che permette di importare facilmente font personalizzati nei progetti web. L’uso dei font di Google migliora l’estetica e la personalizzazione dei testi e la libreria offre una vasta gamma di opzioni gratuite. Per utilizzare Google Fonts:

  1. Vai su Google Fonts e seleziona il font desiderato.
  2. Scegli gli stili necessari (es. Regular 400, Bold 700).
  3. Copia il link generato e aggiungilo all’interno del tag <head> nel file HTML: 
    1

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  4. Imposta il font nel tuo CSS: 
    1
2
3

    body {
  font-family: 'Roboto', sans-serif;
}

Font Customizzati

È possibile anche utilizzare font personalizzati (scaricati o creati). Per farlo, si utilizza la regola @font-face in CSS, specificando il percorso del file del font.

Esempio:

1
2
3
4
5
6
7
8
9
10
11

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

Unità di Misura Relative e Assolute

Unità Assolute

Le unità assolute (come px, pt) definiscono una dimensione fissa, indipendente dal contesto:

  • px (pixel): Utilizzato per precisione e per mantenere proporzioni costanti tra i dispositivi, anche se a volte può essere meno flessibile per layout responsive.
  • pt (point): Utilizzato principalmente nella stampa, raramente usato per il web.

Esempio:

1
2
3

h1 {
  font-size: 24px;
}

Unità Relative

Le unità relative si adattano al contesto, rendendole preferibili per i layout responsive.

  • em: Definisce la dimensione del font rispetto alla dimensione del font del suo elemento padre. Esempio: se il font del body è impostato a 16px, 1.5em sarà pari a 24px.
  • rem (root em): Definisce la dimensione del font rispetto alla dimensione del font radice (solitamente 16px), quindi offre maggiore coerenza rispetto a em.
  • %: Definisce la dimensione rispetto alla dimensione del contenitore padre, usata spesso per larghezze e altezze.

Esempio:

1
2
3
4
5
6
7
8
9
10
11

body {
  font-size: 16px; /* Dimensione radice */
}

h1 {
  font-size: 2rem; /* 32px rispetto alla radice */
}

p {
  font-size: 1.5em; /* 24px rispetto alla dimensione del font del paragrafo */
}

Conclusione

La tipografia CSS è un potente strumento per migliorare la leggibilità e l’attrattiva del testo in un sito web. Con la giusta combinazione di proprietà di testo, font personalizzati e una scelta consapevole delle unità di misura, è possibile creare un’esperienza visiva coerente e ottimizzata per diversi dispositivi e risoluzioni.

Layout CSS

comments powered by Disqus