Se c’è un aspetto essenziale dei CSS questo è il nuovo approccio che hanno introdotto per la gestione del testo. Prima con l’html c’era il tag <FONT>: pagine pesanti e difficili da gestire. Oggi qualcosa che può trasformare una pagina web in un perfetto esempio di stile tipografico e che finalmente consente, almeno in parte, la potenza e la flessibilità di un word-processor.

Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di descriverne solo le piu diffuse. Sono quelle che definiscono i seguenti aspetti:

• font-family - Il carattere da utilizzare
• font-size – Dimensione del carattere
• font-weight – Spessore o consistenza del carattere
• font-style – Stile del carattere
• line-height – Altezza di riga
• text-decoration – Decorazione del testo Andiamo adesso ad esaminarli uno per uno.

font-family

Questo parametro viene utilizzato per determinare il tipo di font, ovvero il carattere del testo, da utilizzare all’intenro della nostra pagina o di uno specifico tag html.

Vediamo la sintassi:

p {font-family: Arial, Verdana, “Times New Roman”;}

Gli uomini del W3C hanno creato un meccanismo che consente all’autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativ nel caso in cui il primo non ci fosse.

Nel nostro esempio il browser interpreta questa riga di css cosi: utilizza il carattere Arial, se non c’è utilizza Verdana, se non c’è utilizza Times new roman se non c’è utilizza quello predefinito dal browser.

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette. Se usate famiglie strane e poco comuni come fantasy o cursive usate più di una famiglia generica. Questa andrebbe sempre messa alla fine, altrimenti risulta praticamente inutile la definizione di font specifici.

font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le dimensioni.

Sintassi:

selettore { font-size: <valore>; }

I valori delle dimensioni del testo possono essere espressi in vari modi:

• espressi in unità di misura – per esempio 10px, 10pt, 10cm, 10mm, 10pc, 10in;
• percentuale – per esempio 10%;
• espressi in em (em-height) – per esempio 1.2em (decisamente poco utilizzati);

font-weight

Serve a definire la consistenza o “peso” visivo del testo. Sintassi:

selettore {font-weight: <valore>;}

i valori applicabili per questo parametro sono:

• bold – Il classico grassetto ottenibile con <strong></strong> o <b></b> in html ;
• bolder – Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell’elemento;
• lighter – Misura relativa. Il testo sarà più leggero di quello dell’elemento parente;
• normal – E’ l’aspetto normale del font ed equivale al valore 400;
• valori numerici 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);

Vediamo un esempio:

p {font-weight: 900;}

font-style

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

• normal: il testo mantiene il suo aspetto normale
• italic: formatta il testo in corsivo
• oblique: praticamente simile a italic

Vediamo subito sintassi ed esempio:

p {font-style: italic;}

line-height

Grazie a line-height è possibile finalmente usare nelle nostre pagine un sistema di interlinea degno di questo nome. La proprietà, in realtà, serve a definire l’altezza di una riga di testo all’interno di un elemento blocco. Ma l’effetto ottenuto è appunto quello tanto ambito da tutti i web designer: un modo per impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi. Sintassi:

selettore {line-height: <valore>;}

i valori possibili per questo parametro sono diversi, vediamoli un po:

• normal. Il browser separerà le righe con uno spazio ritenuto “ragionevole”. Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2
• valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l’altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
• un valore numerico con unità di misura. L’altezza della riga sarà uguale alla dimensione
  specificata.
• percentuale. L’altezza della riga viene calcolata come una percentuale della dimensione del font.

Personalmente utilizzo solo il valore numerico senza definire in pixel o in cm l’altezza della riga. In queste pagine viene utilizzato 1.600 come valore numerico definito per l’altezza della riga, e secondo me, ma questo è soggettivo, è un giusto equilibrio che permette al visitatore di leggere senza difficoltà le guide, poichè tra un rigo e l’altro non si viene a creare quell’ammasso di grigio che infastidisce gli occhi davanti al monitor.

text-decoration

Questo parametro molto usato con le pseudo classi, che tratteremo piu avanti, per eliminare l’effetto sottolineatura di default dai link. Permette infatti di definire se una determinata porzione di testo debba avere appunto delle decorazioni. Sintassi:

selettore {text-decoration: <valore> o <valori>;}

i valori che definibili in text-decoration sono diversi:

• none - Il testo non avrà alcuna decorazione;
• underline – Il testo sarà sottolineato;
• overline – Il testo avrà una linea superiore;
• line-through – Il testo sarà attraversato da una linea orizzontale al centro;
• blink – testo lampeggiante;

vediamo alcuni esempi di utilizzo.

p {text-decoration: blink;}
 a {text-decoration: none;}