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

Specifiche sulla traduzione Di seguito la traduzione dell’articolo “CSS Font-Size: em vs. px vs. pt vs. percent” di Kail Schaeffer […]
CSS font-size: em contro pixel contro punti contro percentuali

Specifiche sulla traduzione

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!

  • Gaetano Miccio

    Alcuni mesi fa mi sono avvicinato agli em per la prima volta dovendo realizzare un sito web per mobile… ore e ore di sviluppo per rendere compatibile il tutto. Davvero ingestibili e davvero poco comodi. Ma con CSS3 e Media Queries non sarebbe tutto molto più semplice?! quasi si potrebbero usare i px come unità di misura per i testi… 😛

    • Stefano Vollono

      Ciao Gaetano!
      In realtà impostando il font in em e restringendo la finestra del browser, il font-size si “adatta” in automatico in base allo spazio a disposizione. E’ più comodo da questo punto di vista perchè appunto lo setti una volta e te lo scordi. Per i pixel invece, come dicevi giustamente tu, hai sicuramente un controllo massimo di tutto, però per ogni “point” del media queries bisogna andare a ridefinire il valore in pixel per gli elementi coinvolti.

      Recentemente ho letto questo articolo di WebHouse in cui viene spiegato molto chiaramente quale sia la tecnica giusta per operare una trasformazione di un sito da fisso a responsive e analizza anche la questione “testi”. http://www.webhouseit.com/come-trasformare-un-layout-fisso-in-layout-responsive/ … prova a dargli una letta, soprattutto al capitolo dei testi.

      • Gaetano Miccio

        Gentilissimo domani nella pausa pranzo gli do una bella lettura. Ti tengo aggiornato su cosa ne penso 😉

  • se volessi rendere fluido il seguente sito che accorgimenti dovrei prendere:
    http://www.moromacchine.it

    • laboratorioCSS

      Ciao Marco, il problema è che ci sono degli errori di fondo alla base della progettazione del tuo sito. I frameset come modo di operare è stato abbandonato un pò di anni fa. Biksognerebbe riprogettare il tutto da zero.

      • Quindi in poche parole devo creare una pagina per ogni prodotto o almeno una pagina per ogni link menu. Cosi uno non possa perdersi nella somiglianza.
        Per esempio se ci fosse button1, button2, …button N io dovrei fare ogni pagina uguale alla precedente cambiando solamente il contenuto interno. cosi da sembrare che siala stessa pagina che cambia..

        Un’altra domanda se volessi come dire segnalare al navigante che ha appena premuto il pulsante e che è arrivata alla pagina selezionata diciamo di colorarla di blu.. cosa dovrei modificare?

  • Sognox77

    Ciao, sto cercando di usare gli em… son partito dando un dimensione font al body di 13px… e poi ho usato gli em in tutti gli elementi calcolandomi la conversione px->em per ogni elemento. (http://pxtoem.com/)

    La questione è che mi sono accorto che gli em fanno riferimento al primo elemento genitore in cui è definita la dimensione font… non fanno riferimento sempre e solo al body…. non c’è la possibilità di farlo puntare solo al font base del body?

    faccio un esempio di quel che io considero un problema…

    font body 13 px…
    div principale.. voglio un font di 16 px e quindi metto 1.231em
    in un div interno a quello principale vorrei un font di 18px… se facessi il calcolo in base al body risulterebbe 1.385em
    MA è sbagliato.. perchè l’em prende come base il primo genitore.. quindi il div principale con i suoi 1.231em (16px)
    di conseguenza il valore giusto per avere 18px di font nel div interno è 1.125em

    Da qui si capisce che diventa… un casino calcolarsi gli em per tutti gli elementi…
    bisogna ricordarsi qual’è il primo elemento genitore dove è stato settata una dimensione font…
    bisogna ricordarsi che dimensione font in px ha quell’elemento.. perchè leggere 1.385em non chiarisce certo che dimensione sia..

    sbaglio qualcosa?
    non c’è la possibilità di far puntare tutti gli em… allo stesso font genitore principale.. cioè quello del body?

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github