Gestione del testo: proprietà di base

24 giugno 2013

La gestione del testo e della tipografia è un aspetto essenziale dei CSS. Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di suddividere l’argomento in due lezioni. Iniziamo quindi dalle proprietà di base. Sono quelle che definiscono i seguenti aspetti:

  • il font da usare;
  • la sua dimensione;
  • la sua consistenza
  • l’interlinea tra le righe;
  • l’allineamento del testo:
  • la sua decorazione (sottolineature, etc.).

Presenteremo qui una panoramica generale. Per gli approfondimenti è vivamente consigliata anche la lettura degli articoli suggeriti alla fine della lezione.

La proprietà font-family

La proprietà font-family serve a impostare il tipo di carattere tipografico per una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata.

Gli uomini del W3C hanno creato un meccanismo che consente all’autore di impostare nei CSS non un unico font, ma un elenco di caratteri alternativi. Il meccanismo funziona così:

p {font-family: Arial, Verdana, sans-serif;}

Quando la pagina viene caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile sul dispositivo dell’utente userà il secondo. In mancanza anche di questo, verrà utilizzato il font principale della famiglia sans-serif presente sul sistema. La spiegazione di tutto ciò è semplice: ovviare al problema dei diversi font presenti sulle varie piattaforme.

Dunque: quando si imposta la proprietà font-family si possono usare tutti i font che desideriamo, valutando la loro presenza sui vari sistemi e non dimenticando mai di inserire alla fine l’indicazione di una famiglia generica. Esse sono cinque (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows):

  • serif (Times New Roman);
  • sans-serif (Arial);
  • cursive (Comic Sans);
  • fantasy (Allegro BT);
  • monospace (Courier).

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette.

Sintassi ed esempi

selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}

Ed ecco un semplice snippet di codice esemplificativo:

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

La proprietà font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le dimensioni. È applicabile a tutti gli elementi ed ereditata.

Sintassi ed esempi

selettore {font-size: valore;}

I valori delle dimensioni del testo possono essere espressi in vari modi. I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo. Dimensione assoluta significa che essa non dipende da nessun altro elemento ed è quella definita dall’unità di misura usata. Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell’elemento parente.

Sono valori assoluti:

  • le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large;
  • quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height (ex). Di tutte queste unità, le uniche proponibili per il testo sono punti e pixel. Si consiglia di usare la prima solo per CSS destinati alla stampa.

Sono valori relativi:

  • le parole chiave smaller e larger;
  • quelli espressi in em;
  • quelli espressi in percentuale.

Nelle pratiche più comuni, la scelta del dimensionamento dei font viene fatta tra pixel, em e percentuale.

p {font-size: 12px;}
div {font-size: 50%;}
h2 {font-size: 1.2em;}

La proprietà font-weight

Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata.

Sintassi ed esempi

selettore {font-weight: valore;}

Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:

  • valori numerici: 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);
  • normal: valore di default, è l’aspetto normale del font ed equivale al valore 400;
  • bold: il carattere acquista l’aspetto che definiamo in genere ‘grassetto’; equivale a 700;
  • bolder: misura relativa; serve a specificare che una determinata porzione di testo dovrà apparire più pesante a livello visuale rispetto al testo dell’elemento parente;
  • lighter: misura relativa; il testo sarà più leggero di quello dell’elemento parente.
p {font-weight: 900;}
div {font-weight: bold;}

La proprietà 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.

La proprietà si applica a tutti gli elementi ed è ereditata.

Sintassi ed esempi

selettore {font-style: valore;}
p {font-style: italic;}

La proprietà line-height

Grazie a line-height è possibile usare nelle nostre pagine un sistema di interlinea paragonabile a quello dei word-processor. 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 di impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi ed è ereditata.

Sintassi ed esempi

selettore {line-height: valore;}

I valori che è possibile utilizzare sono:

  • normal: il browser separerà le righe con uno spazio ritenuto "ragionevole"; dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2;
  • un 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.

Il consiglio è di non usare mai la percentuale, di valutare attentamente l’utilizzo di unità esplicite e di affidarsi senza problemi al valore numerico.

p {line-height: 1.5;}
body {line-height: 15px;}

La proprietà font

La proprietà font è una proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo. Le proprietà definibili in forma abbreviata con font sono:

  • font-family;
  • font-size;
  • line-height;
  • font-weight;
  • font-style;
  • font-variant;
  • font di sistema.

Sintassi ed esempi

selettore {font: valori;}

Alcune indicazioni sull’uso. I valori relativi alle singole proprietà non vanno separati da virgole. Virgola che deve invece separare i valori definiti per la font-family. Anche in questo caso i nomi dei font costituiti da più parole vanno racchiusi tra virgolette. Per quanto riguarda l’ordine, la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family.

Il valore della proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di font-size e separando i due con una slash:

font-size/line-height

Nel codice che segue definiamo nell’ordine: font-weight, dimensione/interlinea, font-family.

p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;}

Allineare il testo: la proprietà text-align

La proprietà serve a impostare l’allineamento del testo. È ereditata e si applica a tutti gli elementi.

Sintassi ed esempi

selettore {text-align: valore;}

I valori possono essere rappresentati da una delle seguenti keyword:

  • left: allinea il testo a sinistra;
  • right: allinea il testo a destra;
  • center: centra il testo;
  • justify: giustifica il testo.
p {text-align: center;}
div {text-align: justify;}

La proprietà text-decoration

Imposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi.

Sintassi ed esempi

selettore {text-decoration: valore o valori;}

I valori che è possibile usare sono:

  • none: il testo non avrà alcuna decorazione particolare;
  • 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.
p {text-decoration: none;}
a { text-decoration: underline;}

Esempi per tutte le proprietà.

Approfondimenti

Approfondimenti CSS3

Tutte le lezioni

1 ... 25 26 27 ... 33

Se vuoi aggiornamenti su Gestione del testo: proprietà di base inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Gestione del testo: proprietà di base

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy