Font Size in EM: troppo piccolo o troppo grande

**ricman** · 05-10-2006, 12:09

Stavo provando a fare un foglio di stile con le unità di misura dei font in EM. Non so se è corretto ma lo stavo facendo per un gestionale con tabelle piene di dati e che quindi l'utente potrebbe voler ingrandire. Visto che se misuro in px IE non ingrossa i caratteri col CTRL+ (e neanche da menu) pensavo agli EM...
Ho "azzerato" tutti i tag portandoli agli stessi valori in questo modo:

codice:

body,p,div,table,tr,td,th,input,select,textarea,pre,ol,li,ul,p,h1,h2,h3,h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #555;
	font-weight: normal;
}

...per poi aumentare o diminuire le dimensioni (tipo, per capirsi, H1-->2em o Footer-->0.7em).
Su FF ci si può anche stare... vado a vedere il risultato su IE (impostato di default con Visualizza->Carattere->Medio) e vedo che i testi nelle tabelle sono piccolissimi!!! Quasi illeggibili.
Se il font-size lo porto da 0.9 a 1, invece, i testi diventano troppo grandi.

Che mi dite? Sbaglio qualcosa? Voi come fareste?

Grazie mille

**Mich_** · 05-10-2006, 12:22

Mi risulta che sia un baco di IE.

IE vuole che il primo carattere (quello su cui si basano tutti gli altri) sia espresso in %.

Inoltre tieni presente che hai dimenticato il blocco html (che in IE coincide con body, ma in altri browser no).

Quindi conviene:

codice:

html, body {
  font-size: 100%;
  /* qui le altre specifiche del font */
  width: 100%; height: 100%;
}
body * {          /* opzionale, se serve (ma forse non serve) */
  font-size: .9em;
}

Tieni presente che il font e` ereditato, per cui se non specificato viene preso il font del blocco contenitore, e questo ricorsivamente; per cui una volta definito in html e body, non serve ridefinirlo se non per modificarlo.

**ricman** · 05-10-2006, 12:40

Originariamente inviato da Mich_
Tieni presente che il font e` ereditato, per cui se non specificato viene preso il font del blocco contenitore, e questo ricorsivamente; per cui una volta definito in html e body, non serve ridefinirlo se non per modificarlo.

Scusa... forse non ho capito. Corregimi:
Scrivere:

codice:

body,p,div,table,tr,td,th,input,select,textarea,pre,ol,li,ul,p,h1,h2,h3,h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
}

è uguale a scrivere questo?

codice:

html {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #555;
	font-weight: normal;
	font-size: 100%;
}
body {
	font-size: .9em;
}

Nel secondo caso... l'H1 come si comporta? ...e i TD?
Considerando che ho un codice tipo questo:

codice:

<form action="" method="post">
<table id="tblstruttura"><tr><td>
	<table id="tblsx">
		<tr>
			<td>Codice</td>
			<td><input type='text' name='codice' value='<?php print $codice; ?>'></td>
		</tr>
.....
.....

Con gli ID "tblstruttura" e "tblsx" usati NON per i font ma solo per riquadrate e "smerlettare" i vari dati tabellari...

**Mich_** · 05-10-2006, 14:43

Dipende dal browser. In effetti in IE il blocco <html> e` coincidente con il <body>, per cui non so la resa del tuo esempio. Credo che convenga scrivere:

codice:

html, body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #555;
	font-weight: normal;
	font-size: 100%;
}
body * {               /* oppure #tutto */
	font-size: .9em;
}

dove nel secondo caso il <div id="tutto"> racchiude tutta la pagina.
Nota che nel secondo selettore (primo caso), dopo il body c'e` un asterisco, che quindi e` riferito a tutti i blocchi figli e nipoti ... di body.

Invece per gli <h1>, <h2> .... i vari browser hanno un loro default per il font-size (che dipende dal browser), per cui conviene specificare separatamente la dimensione del font, se non vuoi usare i default.

Per quanto riguarda le tabelle, non sono adatte per "riquadrare e smerlettare", dato che aggiungono un'informazione semantica, che e` una sovrastruttura inutile e che crea confusione (chi non ha un browser visivo percepisce tale sovrastruttura e perde il significato della pagina). Per riquadrare devi usare i <div>.

**ricman** · 05-10-2006, 15:16

Originariamente inviato da Mich_
dove nel secondo caso il <div id="tutto"> racchiude tutta la pagina.
Nota che nel secondo selettore (primo caso), dopo il body c'e` un asterisco, che quindi e` riferito a tutti i blocchi figli e nipoti ... di body.

Invece per gli <h1>, <h2> .... i vari browser hanno un loro default per il font-size
...

Ok, ora guardo di capire meglio facendo qualche prova...
grazie

Originariamente inviato da Mich_
Per quanto riguarda le tabelle, non sono adatte per "riquadrare e smerlettare", dato che aggiungono un'informazione semantica, che e` una sovrastruttura inutile e che crea confusione (chi non ha un browser visivo percepisce tale sovrastruttura e perde il significato della pagina). Per riquadrare devi usare i <div>.

Guarda, io sono un promotore dei Div e del codice pulito e tutti i siti che ho fatto ultimamente sono in html strict e solo coi div.
In questo caso, invece, stavo lavorando ad una interfaccia di amministrazione, curando un po' meno la grafica e gli standard. In pratica volevo affiancare due "riquadri" con dati del tipo:
Nome __________
Cognome _______
etc... un po' sulla sinistra e un po' sulla destra; allineati, centrati in verticale... insomma a meno che non ci sia un sistema che non conosco, coi div ci voleva trooooppo di più. Un sacco di classi per dare le misure... boh...
Che ne pensi? (sarò pigro io ??

)

**Mich_** · 05-10-2006, 15:24

sarò pigro io ??

Puo` darsi. O forse non hai ancora capito bene come funzionano i CSS.
In linea di massima si fa prima con i <div> e CSS che con le tabelle; inoltre si ottiene una pagina accessibile e razionale nonche` piu` leggera (si risparmia codice).

L'importante e` partire da un (X)HTML fatto bene e con i tag semanticamente corretti, altrimenti si` diventa dura sistemare i CSS.

**sonik_the_sonik** · 05-10-2006, 17:30

Originariamente inviato da ricman
In questo caso, invece, stavo lavorando ad una interfaccia di amministrazione, curando un po' meno la grafica e gli standard. In pratica volevo affiancare due "riquadri" con dati del tipo:
Nome __________
Cognome _______
etc... un po' sulla sinistra e un po' sulla destra; allineati, centrati in verticale... insomma a meno che non ci sia un sistema che non conosco, coi div ci voleva trooooppo di più. Un sacco di classi per dare le misure... boh...

Ho visto qualche tempo fa questo articolino davvero interessante sui form. Forse potrebbe esserti utile.

Discussione: Font Size in EM: troppo piccolo o troppo grande

Strumenti discussione

Ricerca discussione

Visualizza

Font Size in EM: troppo piccolo o troppo grande

Permessi di invio