Dimensione del font: come dichiararla?

Quando dobbiamo definire la dimensione del carattere in un foglio di stile CSS abbiamo a disposizione diverse opzioni. Possiamo utilizzare una ‘parola chiave’, (small, large ecc.} oppure un valore numerico. Se si utilizza un valore, è ovviamente necessario dichiarare l’unità di misura con una delle quattro opzioni: px – em – % – pt. Quale è la migliore? Beh, se ci fosse un’opzione da preferire in assoluto non ci sarebbero verosimilmente le opzioni alternative. La risposta è quindi: dipende.

[ad code=5]

Vediamo in dettaglio le quattro opzioni:
Keywords: le keywords che possono essere usate sono xx-small, x-small, small, medium, large, x-large, and xx-large oltre a quelle relative smaller e larger.
Come si può vedere dall’immagine riportata qui sotto sorprendentemente i diversi browsers interpretano queste keywords in maniera del tutto simile. Le dimensioni sono le stesse, ma si possono comunque notare delle differenze sulle interlinee e l’altezza della riga.

Uno dei modi efficaci di usare questo modo di definire la grandezza del font è quello di definire una grandezza di default per il body e poi usare larger and smaller per ingrandire o rimpicciolire il font. Questo semplificherebbe tutta la gestione perché tutte le grandezze dipendono dall’unica definita inizialmente come default. Attenzione che se non si definisce un default, il browser utilizzerà il proprio default che in genere è 16px, ma non è detto che sia così per tutti.
Occorre però notare che utilizzare questo sistema non permette di definire le dimensioni dei font con grande precisione per la limitatezza del numero di keywords disponibili. Per esempio se il default fosse 16px ed il figlio avesse la dimensione ‘larger’ assumerebbe un font-size di 20px. Tutte le dimensioni intermedie tra 16px e 20px non sarebbero utilizzabili con questo metodo.

px: esprimere la dimensione di un font in pixels è il modo più preciso tra quelli a disposizione. Oltre a dare tutto il range di possibilità di dimensioni, è anche una definizione interpretata in egual modo da tutti i browsers. Un pixel è un pixel su tutti i monitor. E’l’unità di misura utilizzata da sempre per il display a video.
Cionondimeno a video i diversi browsers mostrano qualche differenza del tutto simile a quelle viste per le keywords.
Inoltre bisogna tener presente che Internet Explorer fino alla versione 6 non permetteva il ridimensionamento dei font la cui dimensione è espressa in pixels. Non pensiamo che ormai ci siano molti users che utilizzano questo vecchio browser e di conseguenza ci sentiamo di dire che utilizzare il dimensionamento in pixel è una buona scelta.

em: che cos’è em? L’origine del nome è alquanto semplice se si pensa alla pronuncia inglese. em è la pronuncia della lettera M, che fu presa come unità di misura base. bene, ma quanto vale in pixels? Dipende perché in realtà vale quant’è il font corrente o in mancanza quello di default. Così se il font corrente fosse 16px, 1em varrebbe 16px, se il default fosse 20px 1em varrebbe 20px. Da qui se indichiamo per esempio 1.5em intendiamo una volta e mezzo il font corrente (24px e 30px nei due esempi fatti).
Questo metodo era una volta preferibile perché era trattato correttamente anche da Internet Explorer 6 e precedenti, anche se ormai, come detto, questa è una motivazione molto debole.
Per contro può presentarsi una controindicazione: se fissiamo in CSS gli elementi p e li (paragrafo ed elemento di lista) entrambi con dimensione di font pari a 1.2em, potrebbe presentarsi il caso di avere un paragrafo interno ad un elemento di lista così che la proprietà ‘a cascata’ di em porterebbe ad avere questo paragrafo con font di dimensione 1.44em e ci costringerebbe ad intervenire eliminando il tag o definendo uno stile specifico a livello di singolo tag.

%: esprimere la dimensione di un font in percentuale non è molto diverso da em. Funziona esattamente come uno si aspetterebbe. Occorre tener presente che la percentuale è riferita, come nel caso di em, alla dimensione del font corrente (quindi quello dell’elemento padre). Se si indica font-size: 120%; si intende quindi che la dimensione del font sarà 20% in più di quella dell’elemento padre, così se quella fosse stata di 20px diventerebbe di 24px. Come si vede è esattamente lo stesso funzionamento, dove 1.2em = 120%.
E’ quindi ovvio che la stessa limitazione evidenziata per em è valida anche per %.

pt: i punti sono un’unità di misura utilizzata esclusivamente per la stampa. 72pt = 1″ (1 pollice) e corrisponde ad 1 pollice in stampa, che non ha nulla a che vedere con le misure a video essendo queste dipendenti dalla risoluzione dello schermo. Questo suggerisce di scrivere un CSS separato per la funzione di stampa delle pagine qualora questo debba essere previsto, altrimenti ci si può affidare alle funzioni di stampa dei browser moderni che permettono la stampa od il salvataggio in formato PDF delle pagine in maniera assolutamente perfetta.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *