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
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
- sans-serif
- cursive
- fantasy
- monospace
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 Dimensione relativa
Sono valori assoluti:
- le sette parole chiave
xx-smallx-smallsmallmediumlargex-largexx-large - quelli espressi con le seguenti unità di misura
pxcmmmptpcinex
Sono valori relativi:
- le parole chiave
smallerlarger - 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
normalboldbolderlighter
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:
normalitalicoblique
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- un valore numerico
- un valore numerico con unità di misura
- percentuale
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-familyfont-sizeline-heightfont-weightfont-stylefont-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
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-heightNel 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:
leftrightcenterjustify
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:
noneunderlineoverlineline-throughblink
p {text-decoration: none;}
a { text-decoration: underline;}Approfondimenti
- Impostare la dimensione base del testo
- Stabilire le dimensioni dei font in un CSS: vantaggi, problemi e soluzioni
- Note pratiche sulle unità di misura per il testo
- Font personalizzati con @font-face
- Web fonts con @font-face
- Capire e usare il line-height