Il Testo

Tra le tante proprietà disponibili per il testo, le più utili sono:

• font-family: il tipo di font;
• font-size: dimensione del carattere;
• font-weight: il “peso” del font, ovvero quanto è spesso;
• font-style: stile del font;
• line-height: altezza di una riga di testo;
• text-align: allineamento del testo.

font-family

L'attributo font-family indica la famiglia del font da utilizzare. Si possono definire diverse famiglie separate dalla virgola, tra cui il browser sceglierà a cascata: prima cerca di applicare la prima famiglia definita (quella più a sinistra) e se non è installata sul sistema su cui è visualizzata alla pagina passa alla seconda; se non trova la seconda installata, passa alla terza e così via. Per questo motivo, per prime si definiscono le famiglie che si vogliono, mentre per ultime le cosiddette “famiglie generiche”, ovvero le famiglie supportate da più o meno tutti i browser.

Di seguito, un esempio delle 5 famiglie generiche: serif, sans-serif, cursive, fantasy e monospace. Le famiglie serif e sans-serif sono rispettivamente font “con grazie”, ovvero con dei ricciolini sulle estremità, e “senza grazie”, ovvero senza questi piccoli prolungamenti. Per ogni famiglia, sulla sinistra è possibile osservare un'immagine del font, mentre sulla destra come il browser esegue il codice:

serifsans-serifcursivefantasymonospace

Hello world!

<p style="font-family:serif">Hello world!</p>

Hello world!

<p style="font-family:sans-serif">Hello world!</p>

Hello world!

<p style="font-family:cursive">Hello world!</p>

Hello world!

<p style="font-family:fantasy">Hello world!</p>

Hello world!

<p style="font-family:monospace">Hello world!</p>

Se il codice eseguito dal browser genera un font uguale a sans-serif o serif, significa che quella famiglia non è disponibile.

Per quanto riguarda le altre famiglie invece, possiamo avere molti tipi di font tra cui Arial, Verdana, Tahoma, Times New Roman per citarne alcune. L'importante è inserire i nomi dei font con degli spazi tra virgolette. Una definizione completa potrebbe essere:

p {
    font-family: "Times New Roman", Georgia, serif;
}

È possibile inserire anche font esterni nella propria pagina. Ad esempio si possono scaricare i font da Google ed inserirli con il tag link nella pagina:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

Che permette di inserire il font “Sofia” nella pagina.

Hello world in Sofia!

Visitare la pagina dedicata del W3C per ulteriori approfondimenti.

font-size

Definisce la dimensione del font. Questa può essere espressa in diverse unità di misura:

• pixel: la dimensione del font in numero di pixel dello schermo.
  • Esempio con 16px:

    Hello world

  • Esempio con 30px:

    Hello world

• Em: consente agli utenti di ridimensionare il testo, utile per persone con problemi legati alla vista che possono attivare le opzioni di accessibilità. 1em corrisponde alla dimensione corrente del testo dove, per default, 1em=16 pixels.
  • Esempio con 1em:

    Hello world

  • Esempio con 1.5em:

    Hello world

• pt: la dimensione del font in numero di punti:
  • Esempio con 14pt:

    Hello world

  • Esempio con 20pt:

    Hello world

• percentuale: definisce quanto è grande il testo in percentuale rispetto agli elementi che lo circondano.
  • Esempio con 100%:

    Hello world

  • Esempio con 90%:

    Hello world

Attenzione: queste proprietà si usano per modificare la dimensione del testo e non per trasformare titoli in paragrafi o viceversa!

font-weight

Consente di definire il “peso” del font, ovvero quanto deve apparire in grassetto rispetto agli altri caratteri. Il perso può essere:

• una stringa: normal per caratteri normali, bold per grassetto, bolder per caratteri più grossi del resto del testo, lighter per caratteri più fini.
• un valore numerico: 100, 200, 300, ... , 900 dove 400 corrisponde a normal e 700 a bold

Esempio:

lighternormalboldbolderweight 900

Hello world in lighter

<p style="font-weight:lighter">Hello world in lighter</p>

Hello world in normal

<p style="font-weight:normal">Hello world in normal</p>

Hello world in bold

<p style="font-weight:bold">Hello world in bold</p>

Hello world in bolder

<p style="font-weight:bolder">Hello world in bolder</p>

Hello world with weight 900

<p style="font-weight:900">Hello world with weight 900</p>

font-style

Specifica lo stile del testo. Lo stile può essere:

• normal: testo normale;
• italic: testo in corsivo. italic di solito si riferisce ad un font specifico creato dal designer;
• oblique: testo in corsivo. A differnza di italic si tratta dello stesso tipo di font del carattere normale ma leggermente inclinato verso destra.

Esempio:

normalitalicoblique

Hello world in normal

<p style="font-style:normal">Hello world in normal</p>

Hello world in italic

<p style="font-style:italic">Hello world in italic</p>

Hello world in oblique

<p style="font-style:oblique">Hello world in oblique</p>

line-height

Descrive l'altezza di un rigo di testo. Può assumere 3 tipi di valori:

• valore numerico: numero moltiplicato per la dimensione del font (font-size);
• valore con unità di misura: altezza del rigo espressa in pt, px, cm, em eccetera;
• percentuale: valore percentuale, ad esempio 40%. Il valore percentuale si riferisce al contorno del testo.

Esempio:

<p style="line-height:normal">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna.

<p style="line-height:20pt">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna.

text-align

Regola l'allineamento del testo. I suoi valori sono: left per allineamento a sinistra, right per allineamento a destra, center per centrare il testo e justify per testo giustificato, ovvero che utilizza gli spazi per far sì che ogni linea del testo abbia la stessa lunghezza.

Esempio:

<p style="text-align:center">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna.

<p style="text-align:left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna.

<p style="text-align:right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna.

<p style="text-align:justify">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna.