Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Frontend SELF IT /Font

Font

Frontend SELF IT
Livello 14 , Lezione 1
Disponibile

2.1 Proprietà font-family

I font giocano un ruolo chiave nel web design, influenzando la leggibilità e l'attrattiva visiva del testo. Le famiglie di font definiscono lo stile generale e le caratteristiche dei font che possono essere usati sulle pagine web. In CSS i font vengono generalmente divisi in tre famiglie principali: serif, sans-serif e monospace. Vediamo ciascuna di esse più nel dettaglio.

Proprietà font-family

La proprietà font-family viene usata per specificare la famiglia di font. Puoi specificare diversi font separandoli con delle virgole, così il browser può usare il font successivo nell'elenco se il primo non è disponibile.

Esempio di utilizzo di più font

    
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Esempio di utilizzo:

CSS 
    
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
HTML 
    
      <body>
        <p>Questo testo viene visualizzato usando i font Helvetica Neue, Helvetica o Arial.</p>
      </body>

2.2 Famiglia di font serif

I font con grazie (serif) sono caratterizzati da piccole linee o tratti aggiunti alle estremità delle lettere e dei simboli. Questi font conferiscono al testo un aspetto più tradizionale e formale.

Esempi di font serif:

  • Times New Roman
  • Georgia
  • Garamond
  • Baskerville

Esempio di utilizzo:

CSS 
    
      body {
        font-family: 'Times New Roman', serif;
      }
HTML 
    
      <body>
        <h1>Questo è un titolo</h1>
        <p>Questo è un paragrafo che utilizza un font serif.</p>
      </body>

2.3 Famiglia di font sans-serif

I font senza grazie (sans-serif) non hanno piccole linee alle estremità delle lettere e dei simboli. Questi font appaiono più moderni e minimalisti, e sono spesso utilizzati nel web design per la loro buona leggibilità sugli schermi.

Esempi di font sans-serif:

  • Arial
  • Helvetica
  • Verdana
  • Open Sans
CSS 
    
      body {
        font-family: 'Arial', sans-serif;
      }
HTML 
    
      <body>
        <h1>Questo è un titolo</h1>
        <p>Questo è un paragrafo che utilizza un font sans-serif.</p>
      </body>

2.4 Famiglia di font monospace

I font monospaziati (monospace) hanno la stessa larghezza per tutti i caratteri. Questi font sono spesso utilizzati per visualizzare codice, documentazione tecnica e tabelle, dove è importante che i caratteri siano allineati verticalmente.

Esempi di font monospace:

  • Courier New
  • Consolas
  • Monaco
  • Lucida Console

Esempio di utilizzo:

CSS 
    
      body {
        font-family: 'Courier New', monospace;
      }
HTML 
    
      <body>
        <h1>Questo è un titolo</h1>
        <p>Questo è un paragrafo che utilizza un font monospace.</p>
        <pre>
          function helloWorld() {
            console.log("Hello, world!");
          }
        </pre>
      </body>

Per migliorare la percezione e la varietà stilistica sulle pagine web, si utilizza spesso una combinazione di diverse famiglie di font. Ad esempio, i titoli possono essere stilizzati con font serif, mentre il testo principale può essere fatto con font sans-serif. E il codice, beh, sempre monospace.

Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION