¿Cuánto mide 1EM? - Breve explicación
Hola a todos,
A raíz de un mail personal que me ha mandado un forero, me ha parecido interesante explicar su duda de forma pública, ya que yo creo que es bastante frecuente.
Las dudas en concreto eran estas:
<fieldset>Sin embargo tengo que hacerte una consulta. El problema que tenia es
que en el DIV si meto un tamaño de letra me cambia el ancho del propio
DIV.
Es decir: no es lo mismo
width: 77em;
font-size: 1em;
que
width: 77em;
font-size: 1.2em;
Porque ocurre esto... Sinceramente, no lo termino de entender, al
igual que no termino de entender las herencias en el tema de los ems</fieldset>
Bien, aclaremos las cosas...
1EM equivale a la medida de la letra "M" del tamaño de letra que estemos utilizando (y se pilla la M porque sus dimensiones son más o menos cuadradas, mide más o menos lo mismo de alto que de ancho).
También podemos utilizar como medidas 1EX = tamaño de la letra X, un poco mas pequeña).
Por defecto el tamaño de letra debería ser de 16px, es decir que si no toco nada 1EM = 16px. PERO, aqui está la clave, si yo redefino el FONT-SIZE el tamaño de 1EM VARIARÁ TAMBIÉN. Es decir que si yo pongo body { font-size: 10px } 1EM=10px.
Ahora sabéis de por qué leches se ve mucho esto: body { font-size: 62.5% }... porque el 62.5% de 16px = 10px. Y esto es muy útil, porque si yo tengo un tamaño base de 10px -> 1EM=10px y 0.1EM=1px... con lo que es muy fácil hacer cálculos para tamaños, bordes, paddings, etc....
Esto es válido en cualquier elemento, es decir que si yo defino #cabecera { font-size: 15px }, en el elemento con ID="cabecera" 1EM=15px.
PERO los FONT-SIZE expresados en EMs o % tienen un problema, y es que se HEREDAN... imaginemos que tenemos esto:
CSS ->
body { font-size: 62.5% } /* Tamaño de 1EM = 10px */
div { font-size: 1.5em } /* Tamaño de 1EM en un DIV = 15px */
HTML ->
<body>
<div> hola <div>hola2</div> </div>
Es decir en el BODY la fuente es de 10px, ok, y en los DIV la fuente es de 15px ¿no?... PUES NO.
El BODY es de 10px, pero en los DIV el tamaño de fuente va a ser 1.5veces el tamaño de su CONTENEDOR. El primer DIV está dentro del BODY, con lo que su tamaño de letra es de 10px*1.5 = 15px.... pero el segundo DIV está dentro a su vez de otro DIV, es decir que su tamaño de letra es de 15px*1.5 = 22.5px
Esto es MUY peligroso, porque, o se conocen al dedidillo las propiedades, las reglas de herencia Y se es muy meticuloso programando... o al final no hay manera de controlar el tamaño de fuente.
En este escenario es donde yo recomiendo utilizar PALABRAS CLAVE, porque las palabras clave NO se heredan. Y además font-size: x-small = 10px (redondo).
Lo mejor para mi es definir esto:
body { font-size: x-small } /* 1EM=10px */
Y a partir de ahí jugar con lo que sea, pero siempre teniendo en cuenta que, como toquemos el font-size de algo, TODAS las medidas que expresemos con EMs en ese algo van a estar referidas a su font-size (que será a su vez un multiplicador del FONT-SIZE del elemento que lo contenga).
RECOMENDACIÓN ENCARECIDA: Leeros el capítulo sobre tipografía del libro de Zeldman, porque ahí se explica todo y además se dicen más cosas a favor de las palabras clave que yo no explico porque me he aburrido.
xavib
viva!
zigotica
post para enmarcar (lastima del gruyere, porque habia una de detalles...).
Gracias por el resumen.
eRNieB
Quiero a este hombre... :)
Impresionante explicación Mr. Orange. Prometo tenerla muy en cuenta en el presente y en el futuro.
Saludos, y graciás por tan breve a la vez que productivo post
eRNieB
hartum
plas, plas, plas muy bien explicado si señó.
jescortes
Impresionante aportación, muchisimas gracias Orange por compartir tu conocimiento. Me va a ser de gran utilidad tu explicación!
Gracias!
chile·logela
duda en voz alta: me pregunto porque se popularizó el EM cuando en tipografía de toda la vida ha sido el EX el referente de casi todo.
zigotica
admito que yo hasta hace pocos días no conocia lo del EX, lo vi curioseando los estilos de Gmail para tunearlo :)
JordiAnton
Directo a Bookmarks!!!
pseudo
chile&#9733;logela
duda en voz alta: me pregunto porque se popularizó el EM cuando en tipografía de toda la vida ha sido el EX el referente de casi todo.
En tipografía tamaño de m en caja alta = tamaño del cuadratín = cuerpo de la tipo.
El cuadratín es unidad clave para la composición junto a la altura de la "x", sobretodo en la tradición anglosajona
<!--
¿se nota que tengo el libro de John Kane delante? :P
-->
eRNieB
Queda todo entendido... pero ahora llego yo y hago la pregunta del millón (tocando los bowlings, para variar)
porque puede ser que...
<code>.buscar select {
font-size: 0.56em;
float: right;
margin: 0.13em 0.13em 0 0;
width: 36.92em;
height: 2em;
}
.buscar input {
font-size: 0.56em;
float: right;
margin: 0.13em 0.13em 0 0;
width: 36.92em;
height: 1.30em;
}</code>
Al agrandarlo en Explorer (en Firefox si que funciona bien) se me agrande bastante más en Explorer el select que el input. :-?
Se agradece cualquier tipo de comentario... ;)
Saludos,
eRNieB
orange
Para empezar Explorer no te pilla decimales con 2 cifras, sólo con 1 (al menos mi experiencia), así que ya estás jugando con valores distintos.
Los floats y los margins se llevan mal con Explorer: Explorer double margin Bug
Puede depender además de las herencias. Quizá en algún momento metiste una regla para los inputs y no para los selects.
No entiendo por qué tienes que redefinir el font-size ahí. Tocar esas cosas siempre es peligroso. Yo recomiendo tener un tamaño con base 10px en todo el documento. Y con eso ya puedes maquetar al pixel sin tener que utilizar 2 cifras decimales.
eRNieB
Muchas gracias Orange. Voy a comprobar lo de las herencias...
Ah!!! Interesante lo de los decimales... la verdad es que no tenia ni idea de eso. Lo comprobare tambien. :)
Respecto al asunto del font-size: el problema es que no todo tiene el mismo tamaño de letra. Lo más extraño de todo es que funciona todo de lujo excepto eso.
El otro problema que tengo (por si acaso sabes de que puede ser) es que eso esta dentro de un iframe: todo se redimensiona bien excepto el select y los checkboxs. Para que se redimensiones hay que recargar la web.
En cualquier caso todo va saliendo bien... ;)
Mirare lo de la herencia. Lo que no entiendo es que Firefox me lo hace de lujo, y que en tamaño normal los anchos son practicamente indenticos: el problema es cuando aumentas el tipo de letra.
Raro raro raro...
Gracias de nuevo,
eRNieB
P.D. Tienes que bajarte un día por Zaragobio, que nos meteremos una comilona de alucinar... :P
orange
Lo de los frames suele ser mala idea por muchas cosas, y ahora ya sabes una más.
Lo de que se vea bien en FireFox y mal en Explorer es de todo menos extraño
:D
Y la comilona cuando quieras.
eRNieB
Es un iframe... un iframe... ;)
El problema es que lo tenemos que meter por narices: es una pena, pero es asi. De todas formas en el fichero que se incluye en el iframe pasa exactamente lo mismo. Ahora estaba en ello...
La comilona, cuando quieras... prometido.
Saludotes,
eRNieB
orange
Me da igual, es mejor utilizar includes del lado del servidor
zigotica
iframe = inline frame
(o sea, un frame)