El *em* y el *en* son unidades de longitud.
El "em" es igual al tamaño de la letra: por ejemplo, para una fuente a 12
puntos, un "em" son 12 puntos. Un "em" mide exactamente el ancho de la letra
"M" mayúscula de una tipografía dada y a un tamaño dado. Efectivamente,
según esta definición un "em" no mide *físicamente* siempre lo mismo.
Un "en" es la mitad de un "em", el equivalente a la anchura de una "n", o 6
puntos si un "em" es 12.
Un ejemplo es margin-top: 1.5em que funciona a la perfección en la mayoría
de navegadores que respetan los estándares excepto el 94% de usuarios de
internet que tienen su navegador IE (cifra estimada en la mayoria de sitios,
aunque el numero de Firefox por ejemplo ya supera el 20% en páginas no
afines a FF ni anti-IE).
IE da problemas para manejar distintos tamaños (especialmente cuando se
hereda un tamaño definido por un elemento "padre"). Hay una solución muy
simple a este problema. Basta con definir un tamaño de letra basado en
porcentaje al BODY de la página. Además al posicionar con float, IE de Mac
necesita que se defina el ancho de al menos uno de los bloques un poco más
pequeño de lo que la lógica matemática podría decir.
Cualquiera que se haya dedicado en algún momento de su vida al diseño
gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de,
ciertas normas o convenciones. Una de ellas define lo que se considera el
ancho óptimo de una línea de texto para ser leído en bloque. Éste es de
entre 30 em y 35 em. ¿Por qué se usa esta medida? porque el ancho óptimo
para la lectura dependerá, necesariamente, del tipo de letra que se use y,
más necesariamente aún, del tamaño de ésta.
Una práctica que se usa últimamente es usar anchos fijos (px) para definir
los bloques de una página y "em" para el tamaño de la tipografía. Ésto
permite al usuario ver el texto en el tamaño que prefiera. El problema es
que alguien necesite ampliar la tipografía dos o más veces y el ancho del
contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea
queda en entredicho.
Ejemplo Basico en CSS:
body {
font-size: 100%;
}
h1 {
text-size: 2.5em;
}
#contenido {
text-size: .85em;
width: 30em;
background-color: #f0f0f0;
}
En BODY:
<h1>Mi cabecera</h1>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec est sit
amet wisi ultricies aliquam. Nulla mollis sodales diam. Duis enim purus,
gravida at, varius sed, egestas sit amet, ligula. Sed est neque, ultricies
ut, fermentum id, congue sed, magna.</p>
</div>
Espero que os haya servido para saber un poco más de tipografía y
presentación en web.
Más referencias:
http://www.100px.com/articulos/ni_fijo_ni_liquido_elastico/
http://www.thenoodleincident.com/tutorials/box_lesson/font/
El día 20/07/05, Carlos Revillo <[EMAIL PROTECTED]> escribió:
>
> Hola. Estoy tratando de desarrollar una web utilizando anchos de
> contenedores con unidades em´s . Ahora bien, probando en diferentes
> navegadores la misma medida de em´s ( 70em ) los únicos que varían son
> Opera
> e IE para Mac que salen más cortos que en los otros (Explorer, Safari,
> Gecko, etc). Supongo que tiene que ver con la configuración de cada
> navegador, pero me pregunto si hay alguna forma de igual la anchura en ems
> para todos los navegadores, al menos en su configuración estandar.
> Gracias.
>
>
>
> Carlos Revillo
> Tanta Tecnología y Comunicación
> Grupo Onetec
> c/ Julián Camarillo 26 1º Of. 2
> 28037 Madrid
> Tel.: 91.440.10.40
> Fax: 91.304.91.24
> www.tantacom.com <http://www.tantacom.com>
> www.grupoonetec.com <http://www.grupoonetec.com>
>
>
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
--
Salu2:
MARTIN desde Valencia (ESPAÑA)
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
