Spesso si ragiona su quale unità di misura usare per font-size, margin e padding, larghezze e altezze nel design del nostro CSS senza aver compreso bene la reale differenza e funzione tra le 3 unità conosciute: em, px e pt.
Tutti e tre i formati sono utilizzabili nel nostro foglio di stile, questo perchè il CSS è stato appunto studiato per essere versatile ed adattarsi a più media come lo schermo (screen) e la stampante (printer) ma non conoscendone la logica potremmo ritrovarci dei risultati inaspettati e spiacevoli.
Per quanto riguarda la stampa il formato da utilizzare è il PT o POINT: questa unità di misura viene usata e preferita in qualunque programma preveda la successiva stampa del documento creato come Illustrator, Word, Photoshop: le stampanti, potendo avere diverse risoluzioni ed un numero ipoteticamente infinito di punti, non fanno uso di pixel e adattano il risultato di questi approssimando alla misura in point più vicina.
Quindi per avere una visualizzazione corretta della nostra stampa sul foglio di carta sarà bene utilizzare i points.
Per quanto riguarda lo schermo invece diamo per assunto che 1 point corrisponderà ad un pixel, per default: comunque trattandosi di schermo per il quale la risoluzione viene stabilita in pixel di altezza per pixel di larghezza sarà meglio usare questa unità di misura come quella base così da aspettarci dei risultati precisi che potranno variare solo per le dimensioni dei diversi monitor.
Stabilito questo, a cosa servono gli em?
A differenza degli altri 2, l’EM è un’ unità di misura relativa: settando nel body la dimensione generale dei font a 12px e dichiarando poi il font-size del testo contenuto in un elemento html essere 1.5em, la dimensione dei caratteri sarà il 150% dei pixel dichiarati all’inizio, 18px.
Quindi per avere un CSS ancora più versatile ed adattabile ai vari media, basterà impostare tutti i font-size con em lasciando solo quello generale nel body dichiarato con i pixel: se e quando dovremo modificare la dimensione dei caratteri del nostro layout dovremo solo modificare il font-size generale nel tag body.
Altro punto a favore degli em è la compatibilità diffusa tra i diversi browser: tanto per citarne uno a caso, Internet Explorer 6 non riesce a gestire a dovere i px quando si tratta di ridimensionamento, cosa che non avviene con gli em.
Da citare anche il font-size in % che si comporta più o meno come l’em.
Ritieni questo post utile o interessante?
Condividi e Segnala
CSS webdesign, font em, font pt, font px, font-size, font-size CSS
Leggi anche:
CSS gallery per template CSS
Una selezione delle migliori CSS Gallery del web, usateli come ispirazione per i vostri nuovi template in CSS e sfida per le creazioni di webdesign più elaborate. E come al solito la selezione è aperta ai vostri consigli e suggerimenti..se conoscete gallery CSS non presenti lasciate pure un commento. CSS Tea Template gallery in CSS divisi per categoria, [...]
dei commenti -
lascia un commento - trackback
