[CSS]Font-size:Px vs Em(?)

Discussioni inerenti lo sviluppo di markup XHTML e CSS validi.

Moderatori: antoscarface, Kagemitsu

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

[CSS]Font-size:Px vs Em(?)

Messaggioda Othalan » mercoledì 23 marzo 2011, 6:05

Ciao a tutti, vorrei delle delucidazioni, io ho il brutto vizio di usare "px" come unità di misura per il font il che, in termini di accessibilità, è sconsigliato...ora, il problema non è il cambiare unità di misura ma è il capirlo, purtroppo ancora non ci sono riuscito a capire 'sti benedetti "em" e mi trovo in difficoltà nel realizzare un progetto...Avete suggerimenti, consigli, guide etc per aiutarmi a capire st'unità di misura?

Vi ringrazio... :)
Othalan

Avatar utente
 
Messaggi: 24
Iscritto il: venerdì 10 dicembre 2010, 15:47
Località: Roma

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Kagemitsu » venerdì 8 aprile 2011, 14:50

Ma non ci scrive nessuno sulla sezione HTML/CSS? :D Anche se in ritardo, ti rispondo lo stesso:

Mentre i px sono un'unità di misura assoluta, ovvero sono gli stessi per tutti gli schermi e tutti i browser, gli em sono un'unità di misura relativa, cioè si adattano a seconda delle impostazioni del browser di chi visita la pagina.
Se uno come impostazioni del browser ha la grandezza del carattere di default di 16px, allora 1 em equivale a 16 px. Se lo stesso tizio alza la grandezza del carattere di default a 20px per esempio, allora 1 em diventa 20px.

Inoltre, gli em supportano la parentela degli elementi. Se per esempio impostiamo che il body del nostro sito ha una grandezza del font di 2em, allora la grandezza di base di tutti gli elementi all'interno sarà di 2em.

Esempio: il mio browser ha la grandezza di base del font di 16px. Il font del mio body ha 2em di grandezza, quindi vuol dire che vedrò tutti i font all'interno di una grandezza pari a 16 x 2, ovvero 32px. Ora, questi 32px diventano la grandezza di base di tutti gli elementi all'interno del body.
Se decido di dare all'header una grandezza del font di 1.5em, questa è il risultato della moltiplicazione della grandezza del font di base per 1.5. Nel nostro caso: 16px (grandezza di default del browser) x 2 (grandezza di base del font inserito nel body) x 1.5 = 16 x 2 x 1.5 = 48px.

Spero di essere stato chiaro. :lol:
Kagemitsu

Moderatore

Avatar utente
 
Messaggi: 36
Iscritto il: mercoledì 12 gennaio 2011, 14:58
Località: Teramo

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Othalan » lunedì 25 aprile 2011, 18:47

Chiarissimo! Ti ringrazio...mi rimane solo un dubbio...ma la grandezza di base dei font del browser è una cosa soggettiva, cioè, varia da utente a utente (credo siano pochi quelli che vadano a cambiare questa impostazione) ma comunque rimane soggettiva e variabile...come faccio io a sviluppare in maniera universale con gli em di fronte a questo "problema"?
Othalan

Avatar utente
 
Messaggi: 24
Iscritto il: venerdì 10 dicembre 2010, 15:47
Località: Roma

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Kagemitsu » mercoledì 27 aprile 2011, 2:39

Othalan ha scritto:Chiarissimo! Ti ringrazio...mi rimane solo un dubbio...ma la grandezza di base dei font del browser è una cosa soggettiva, cioè, varia da utente a utente (credo siano pochi quelli che vadano a cambiare questa impostazione) ma comunque rimane soggettiva e variabile...come faccio io a sviluppare in maniera universale con gli em di fronte a questo "problema"?


"em" e "universale" non sono termini che vanno molto d'accordo. :lol: Come nei layout liquidi, il risultato finale lo vedrà solo chi guarda il sito con le sue impostazioni, benchè tu possa dare limiti minimi e massimi alla grandezza delle cose.
Se vuoi fare in modo che il tuo sito si veda universalmente allo stesso modo, vai di px. :)
Kagemitsu

Moderatore

Avatar utente
 
Messaggi: 36
Iscritto il: mercoledì 12 gennaio 2011, 14:58
Località: Teramo

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Othalan » mercoledì 27 aprile 2011, 20:35

Come immaginavo :)
Ultima cosa...voi avete preferenze nella scelta dell'uno o dell'altra unità di misura quando scrivete il vostro codice?

Grazie! :)
Othalan

Avatar utente
 
Messaggi: 24
Iscritto il: venerdì 10 dicembre 2010, 15:47
Località: Roma

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Kagemitsu » mercoledì 27 aprile 2011, 21:10

Othalan ha scritto:Come immaginavo :)
Ultima cosa...voi avete preferenze nella scelta dell'uno o dell'altra unità di misura quando scrivete il vostro codice?

Grazie! :)


Personalmente preferisco i px perchè li trovo più pratici. Mi sento più sicuro nel sapere che il layout che ho fatto è quello e basta, e non si vede chissà come sugli schermi degli altri. :lol: E poi perchè sono una schiappa con la matematica: tra valori relativi, percentuali etc impazzirei dopo 10 minuti.
Kagemitsu

Moderatore

Avatar utente
 
Messaggi: 36
Iscritto il: mercoledì 12 gennaio 2011, 14:58
Località: Teramo

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Sara_p » mercoledì 4 maggio 2011, 15:34

Kagemitsu ha scritto:
Othalan ha scritto:Come immaginavo :)
Ultima cosa...voi avete preferenze nella scelta dell'uno o dell'altra unità di misura quando scrivete il vostro codice?

Grazie! :)


Personalmente preferisco i px perchè li trovo più pratici. Mi sento più sicuro nel sapere che il layout che ho fatto è quello e basta, e non si vede chissà come sugli schermi degli altri. :lol: E poi perchè sono una schiappa con la matematica: tra valori relativi, percentuali etc impazzirei dopo 10 minuti.


Quoto :) se cerchi un amante degli 'em' chiedi a Nando :)
Sara_p

Moderatore

Avatar utente
 
Messaggi: 375
Iscritto il: lunedì 12 ottobre 2009, 11:45

Re: [CSS]Font-size:Px vs Em(?)

Messaggioda Othalan » giovedì 5 maggio 2011, 15:22

Sara_p ha scritto:
Kagemitsu ha scritto:
Personalmente preferisco i px perchè li trovo più pratici. Mi sento più sicuro nel sapere che il layout che ho fatto è quello e basta, e non si vede chissà come sugli schermi degli altri. :lol: E poi perchè sono una schiappa con la matematica: tra valori relativi, percentuali etc impazzirei dopo 10 minuti.


Quoto :) se cerchi un amante degli 'em' chiedi a Nando :)

Ahahahha ok...domandavo perchè io, nella mia breve esperienza da neofita, ho sempre utilizzato i px come unità di misura...e molte volte la blogosfera li indicava come "inadatti", specialmente in termini di accessibilità...
Othalan

Avatar utente
 
Messaggi: 24
Iscritto il: venerdì 10 dicembre 2010, 15:47
Località: Roma


Torna a XHTML & CSS