CSS font-size: em contro pixel contro punti contro percentuali

(giovedì 23 giugno)

CSS font-size: em contro pixel contro punti contro percentuali

Di seguito la traduzione dell’articolo “CSS Font-Size: em vs. px vs. pt vs. percent” di Kail Schaeffer del 30 Settembre 2008. E’ un pò vecchiotto come articolo, ma posso assicurarti che sono argomenti ancora oggi molto attuali e sentiti dai designer. L’autore inoltre nel 2011 inserisce un aggiornamento. I molti commenti (257) lo hanno spinto a scrivere un piccolo aggiornamento di stato basandosi sul confronto che ha avuto con i propri utenti.

Qual’è l’unita di misura migliore?

Uno degli aspetti più confusi dello styling CSS è l’applicazione della proprietà font-size per il cambio di dimensioni di un testo. In CSS, vi vengono date quattro diverse unità con le quali potete misurare la dimensione del testo così come viene visualizzato nel browser. Quale di queste quattro unità è la più adatta per il web? E’ una domanda che ha dato origine a una gran varietà di dibattiti e critiche. Trovare una risposta definitiva può essere complicato, soprattutto perché è difficile rispondere alla domanda stessa.

Conosciamo le unità

  1. Ems(em): è un’unità scalabile che viene utilizzata nei documenti sul web. 1em equivale al font-size corrente, ad esempio, se il font-size del documento è 12pt, 1em equivale a 12pt. Gli em sono scalabili per loro natura, quindi 2em equivarrebbero a 24pt, 0,5em equivarrebbero a 6pt, etc. Gli ems stanno diventando sempre più popolari nei documenti web a causa della loro “scalabilità” e il loro essere compatibili con i dispositivi mobile.
  2. Pixels(px): i pixel sono unità a misura fissa che vengono usati nei media di tipo screen (ad esempio possono essere letti sugli schermi dei computer). Un pixel equivale a un punto (dot) sullo schermo del computer (cioè la più piccola frazione della risoluzione del tuo schermo). Molti web designer usano i pixel nei documenti web per rappresentare perfettamente il loro sito così come viene reso sul browser. Uno dei problemi che ha il pixel è che non aumenta di dimensione per lettori con vista ridotta e non diminuisce di dimensione per adattarsi ai dispositivi mobile.
  3. Punti(pt): i punti sono tradizionalmente usati nei media di tipo print (tutto ciò che deve essere stampato su carta, ecc). Un punto corrisponde a 1/72 di un pollice. I punti sono molto simili ai pixel, infatti sono unità a misura fissa e non possono cambiare misura in scala.
  4. Percentuale(%): l’unità percentuale è simile all’unità “em”, ad eccezione di alcune differenze fondamentali. Principalmente, l’attuale font-size equivale a 100% (ad es. 12pt = 100%). Così, usando l’unità percentuale, il vostro testo rimane totalmente scalabile per i dispositivi mobili e per l’accessibilità.

Quindi qual’è la differenza?

E’ semplice comprendere la differenza tra le unità font-size quando le vedete in azione. Generalmente, 1em = 12pt = 16px = 100%. Se provate ad usare ognuno di questi font-size, vediamo cosa succede se aumentate il font-size di base (usando il body CSS selector ) da 100% a 120%.

font-size-1

Come potete vedere, sia l’unità em che la percentuale si ingrandiscono quando aumenta il font-size di base, ma i pixels e i punti no. Può essere semplice impostare una dimensione assoluta per il vostro testo, ma è molto più semplice per i vostri visitatori usare un testo scalabile che può essere essere visto su ogni dispositivo o computer. Per questo motivo, l’unità em e percentuale sono preferite per documenti di testo sul web.

EM contro PERCENT

Abbiamo deciso che punti e pixel non sono necessariamente i più adatti per i documenti web, e quindi ci rimangono em e percentuali. In teoria, le unità em e percentuali sono identiche, ma a livello di applicazione, hanno in realtà alcune piccole differenze che sono importanti da tenere in considerazione.

Nell’esempio sopra, abbiamo usato l’unità percentuale come nostro font-size di base (sul tag body). Se cambiate il vostro font-size di base da percentuale a ems (ad esempio: body { font-size: 1em; }), probabilmente non noterete alcuna differenza. Vediamo cosa succede se “1em” è il font-size del body, e se l’utente cambia le impostazioni di dimensione del testo del browser (cio è disponibile in alcuni browsers, ad esempio Internet Explorer).

font-size-2

Quando la dimensione del testo del browser è impostata su “media”, non c’è nessuna differenza tra ems e percentuale. Quando le impostazioni vengono modificate, tuttavia, la differenza è abbastanza rilevante. Con impostazioni di testo “più piccole”, gli ems sono molto più piccoli della percentuale, mentre nelle impostazioni di testo “più grandi”, è praticamente l’opposto, con gli ems che appaiono molto più larghi delle percentuali. Nonostante qualcuno possa sostenere che le unità em si stanno ridimensionando come dovrebbero, nell’applicazione pratica, i testi em si ridimensionano troppo repentinamente, il testo troppo piccolo diventa difficilmente leggibile su alcuni apparecchi.

Il verdetto

In teoria, l’unità em è il nuovo standard per le dimensioni del carattere sul web, ma in pratica, l’unità in percentuale sembra fornire una visualizzazione più coerente e accessibile per gli utenti. Quando le impostazioni dell’utente cambiano, i testi in percentuale si ridimensionano in modo ragionevole, permettendo ai designer di conservare la leggibilità, l’accessibilità e il visual design.

Il vincitore: percentuale(%)

Aggiornamento (Gennaio 2011)

Sono passati alcuni anni da quando ho scritto questo post, e vorrei riassumere le discussioni e i dibattiti che hanno avuto luogo in questo periodo. Generalmente, quando creo un nuovo design, uso le percentuali sull’elemento body (body{font-size:62.5%;}) e successivamente uso l’unità em per definire il resto. Finchè il body è impostato usando l’unità in percentuale, potete scegliere di usare questa o ems su qualsiasi altra regola e selettore CSS e conservare ancora i benefici di usare le percentuali come vostro font-size di base. Durante gli ultimi anni, ciò è diventato lo standard nel design.

I pixel ora sono considerati unità font-size accettabili (gli utenti possono usare lo zoom del browser per leggere testi più piccoli), nonostante stiano iniziando a creare qualche problema come risultato di dispositivi mobili con schermi ad alta densità (alcuni dispositivi Android e iPhone hanno da 200 a 300 pixel per pollice, rendendo i tuoi font da 11 e 12 pixel veramente difficili da leggere!).
Quindi, continuerò ad usare le percentuali come font-size di base nei documenti sul web. Come sempre, discussioni e dibattiti sono ben accetti e stimolanti; grazie per tutti i commenti degli ultimi due anni!

(tratto da www.lsboratoriocss.it, agosto 2013)

Lascia un commento

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