Font e testi

I testi sono una parte fondamentale delle pagine web, e le specifiche CSS offrono molti strumenti per personalizzare e stilizzare i dettagli di un testo. Il framework w3.css permette una semplice ma efficace gestione dei contenuti testuali offrendo classi e strumenti specifici.

Valori di default

Gli autori di w3.css dichiarano di avere selezionato i valori di default in base alle esigenze delle varie tipologie di utenti, per fare in modo che i testi ed i font siano leggibili correttamente e chiaramente e compatibili sui maggiori browser. I valori standard con cui si presenta w3.css sono i seguenti:

• font-size: 15px (indicato anche dalla classe w3-medium)
• font-family: Verdana
• line-height: 1.5

Relativamente ai tag di intestazione (o headings) h1 - hX - h6, le dimensioni di default del testo sono le seguenti:

• h1: 36px
• h2: 30px
• h3: 24px
• h4: 20px
• h5: 18px
• h6: 16px

Dimensioni del testo

Una delle caratteristiche primarie di un testo è la sua dimensione. Per lavorare con le dimensioni del testo, w3.css offre le classi del gruppo w3-[size], dove [size] è una keyword che indica la grandezza dello stesso. Tali classi sono:

• w3-tiny: imposta un font-size di 10px
• w3-small: imposta un font-size di 12px
• w3-medium: imposta un font-size di 15px (valore di default)
• w3-large: imposta un font-size di 18px
• w3-xlarge: imposta un font-size di 24px
• w3-xxlarge: imposta un font-size di 32px
• w3-xxxlarge: imposta un font-size di 48px
• w3-jumbo: imposta un font-size di 64px

Nel seguente codice è possibile vedere come la scala delle dimensioni si adatta ai valori indicati:

<div class="w3-container">
  <h2>Dimensioni w3.css</h2>
  <p class="w3-tiny">w3-tiny</p>
  <p class="w3-small">w3-small</p>
  <p class="w3-medium">w3-medium (Default)</p>
  <p class="w3-large">w3-large</p>
  <p class="w3-xlarge">w3-xlarge</p>
  <p class="w3-xxlarge">w3-xxlarge</p>
  <p class="w3-xxxlarge">w3-xxxlarge</p>
  <p class="w3-jumbo">w3-jumbo</p>
</div>

Larghezza del testo

Per aumentare la larghezza delle lettere di un testo, possiamo usare la classe w3-wide, che imposta un letter-spacing di 4px:

<div class="w3-container">
  <p>Testo a spaziatura normale.</p>
  <p class="w3-wide">Testo a spaziatura aumentata.</p>
</div>

Sovrascrivere il default

Sebbene w3.css si presenta con valori ponderati e selezionati per garantire usabilità e compatibilità, nulla vieta allo sviluppatore di sovrascrivere qualsiasi valore voglia. Per fare questo esistono 3 ovvie modalità:

• cambiare direttamente il codice del proprio w3.css. Questa scelta è efficace solo nel caso in cui vuoi riutilizzare le nuove impostazioni in un numero consistente di progetti, ovvero, se vuoi utilizzare spesso una versione personalizzata di w3.css
• aggiungere un nuovo CSS nell'head dopo w3.css. Opzione valida per pagine specifiche o modifiche inline
• aggiungere un file CSS esterno collocato dopo w3.css che contiene tutte le feature personalizzate. È la scelta migliore, perchè permette di continuare ad usare w3.css standard nei tuoi progetti, e di modificarlo con la tua versione personale solo nel caso tu ne senta l'occorrenza

Ad esempio:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="EXTEND-w3.css">

Se ad esempio, nella versione personalizzata, vogliamo impostare il carattere di default da Verdana a Comic Sans MS, scriveremo qualcosa del genere:

html, body, h1, h2, h3, h4, h5, h6 {  font-family: "Comic Sans MS", cursive, sans-serif;}

Creare una classe di font

Una "classe di font" è semplicemente un selettore CSS che imposta la proprietà font-family ad un valore specifico, per sovrascrivere i valori ereditati. In stile w3.css, potremmo agire nel seguente modo:

.w3-comicsans {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.w3-arial {
  font-family: "Arial", cursive, sans-serif;
}

E poi utilizzarle sui nostri elementi HTML:

<p class="w3-comicsans">Carattere Comic Sans</p>
<p class="w3-arial">Carattere Arial</p>

w3.css contiene una classe che svolge una funzione identica, chiamata w3-serif, che permette appunto di utilizzare il carattere con grazie (scelto dal browser), equivalentemente a quanto fatto da CSS impostando il font-type a Serif:

<p class="w3-serif">Carattere Serif</p>

Utilizzare font esterni

Oltre alla lista dei classici font, grazie al motore HTML è possibile aggiungerne di nuovi (in una lista praticamente infinita). Per fare questo, inseriamo prima il font esterno tramite CDN, come ad esempio Google Font:

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

Creiamo la classe apposita come in precedenza:

.w3-tangerine {
  font-family: 'Tangerine', serif;
}

Ed infine lo utilizziamo nel nostro HTML:

<p class="w3-tangerine">Carattere tangerine</p>

Allineamento del testo

Per allineare il testo w3.css ci offre le seguenti 4 classi:

• w3-left-align: allinea il testo sulla sinistra
• w3-center: allinea il testo al centro
• w3-justify: giustifica il testo
• w3-right-align: allinea il testo sulla destra

Eccole applicate:

<div class="w3-container w3-border w3-large">
  <div class="w3-left-align"><p>Allineamento a sinsitra.</p></div>
   <div class="w3-center"><p>Allineamento al centro.</p></div>
    <div class="w3-justify"><p>Allineamento giustificato.</p></div>
  <div class="w3-right-align"><p>Allineamento a destra.</p></div>
</div>

Nota: le classi w3-left e w3-right NON sono la stessa cosa delle classi w3-left-align e w3-right-align. Mentre le seconde, come abbiamo appena visto, si occupano dell'allineamento del testo, le prime lavorano con la proprietà CSS float.

Opacità del testo

Grazie alla classe w3-opacity, è possibile applicare un'opacità di 0.6 a qualsiasi elemento o testo, che lavora con qualsiasi colore:

<div class="w3-container">
  <h2>Text Opacity</h2>
  <div class="w3-panel w3-pink">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>
  <div class="w3-panel w3-blue">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>
  <div class="w3-panel w3-orange">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>
  <div class="w3-panel w3-black">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>
</div>

Si noti che applicare la classe w3-opacity ad un elemento contenitore, modifica la sua opacità e quella dei suoi elementi figli. Per applicare l'opacità al solo testo, occorre utilizzare un elemento figlio e ad esso applicare la classe la classe w3-opacity. Notare la differenza:

<div class="w3-container w3-red w3-opacity">
  <p class="">opacità applicata all'elemento contenitore.</p>
</div>
<div class="w3-container w3-red">
  <p class="w3-opacity">opacità applicata all'elemento figlio.</p>
</div>

Colore di un testo

Come abbiamo visto nella lezione dedicata ai colori, con w3.css è possibile utilizzare una collezione di classi per impostare direttamente il colore di un testo, con la seguente sintassi: w3-text-[color-name], dove [color-name] è una keyword indicante il colore selezionato:

<div class="w3-text-red">Sono rosso!</p>
<div class="w3-text-blue">Sono blu!</p>
<div class="w3-text-green">Sono verde!</p>

I seguenti sono tutti i valori possibili nella scala di colori w3.css di default:

• w3-text-red
• w3-text-green
• w3-text-blue
• w3-text-yellow
• w3-text-light-grey
• w3-text-grey
• w3-text-dark-grey
• w3-text-black
• w3-text-white
• w3-text-pink
• w3-text-purple
• w3-text-teal
• w3-text-light-green
• w3-text-lime
• w3-text-deep-purple
• w3-text-indigo
• w3-text-light-blue
• w3-text-blue-grey
• w3-text-cyan
• w3-text-aqua
• w3-text-amber
• w3-text-orange
• w3-text-deep-orange
• w3-text-sand
• w3-text-khaki
• w3-text-brown