Sobre px y em

[Kailea]

Hola,...

Se me presenta una duda que no he encontrado en el foro. De cara a la accesibilidad, ¿qué es mejor utilizar em o px para maquetar y dar tamaños a las capas (no me refiero al font-size)?

Gracias!
Kailea

[frijolerou]

http://100px.com/articulos/ni_fijo_ni_liquido_elastico/

Ahí tienes la respuesta

[Kailea]

Totalmente claro, a maquetar en em. Muy bueno el enlace.

Saludos!

[metacortex]

Precisamente en estos días me estaba haciendo la siguiente pregunta: ¿El em es interpretado por igual en todos los navegadores si se fija bien el tipo de letra a utilizar?.

Saludos.

[hurricane]

Esa es la pregunta del millón. Lo primero es saber que grado de accesibilidad quieres cumplir. Si tu objetivo es cumplir el Nivel A entonces te da igual utilizar px o em. Si lo que quieres es llegar al Nivel AA o Nivel AAA entonces debes utilizar em. ¿cual es el problema? el problema que existe con los em es que calcula los tamaños a partir del tamaño de fuente que tengas predeterminada en tu navegador, esto es que si tu tienes por ejemplo predeterminada una fuente de tamaño 12 y utilizas una medida para el texto de 0.85em verás bien el texto pero en un navegador con una medida de 10 se verá muy pequeño con lo cual aunque tu página utilice em y te pase todos los test de accesibilidad no será accesible lógicamente. Creo que los navegadores de Mac y PC utilizan diferentes tamaños, y aquí es donde puedes encontrarte con problemas.

[Kailea]

Entonces la solución, es tener diferentes hojas de estilo, para cada tipo de medio, imagino. Así, necesitaría algún script que detectara el aparato con el que están visualizando la web, y cómo redirigirla... Ya sea TV, PDA, PC,...

¡Qué complicado!

[frijolerou]

Iniciado por hurricane

esto es que si tu tienes por ejemplo predeterminada una fuente de tamaño 12 y utilizas una medida para el texto de 0.85em verás bien el texto pero en un navegador con una medida de 10 se verá muy pequeño con lo cual aunque tu página utilice em y te pase todos los test de accesibilidad no será accesible lógicamente

Esa es la gracia de utilizar unidades relativas (%, em), que le das la posibilidad al usuario de aumentar los tamaños con las herramientas que les ofrece el navegador en caso que el tamaño de la fuente le parezca muy pequeña.

[metacortex]

Iniciado por frijolerou

Esa es la gracia de utilizar unidades relativas (%, em), que le das la posibilidad al usuario de aumentar los tamaños con las herramientas que les ofrece el navegador en caso que el tamaño de la fuente le parezca muy pequeña.

Uhmmm... Hasta donde sé el usuario puede hacer eso con cualquier configuración en el *.css a menos que se haga esto.

Saludos.

[Kailea]

Yo pensaba que diseñando con px no se varía el tamaño de la letra porque estás dando una unidad absoluta. El tamaño del pixel es siempre el mismo, ya lo des en hoja de estilos incorporada o aparte...

[frijolerou]

Iniciado por Kailea

Yo pensaba que diseñando con px no se varía el tamaño de la letra porque estás dando una unidad absoluta.

"Sólo" en Internet Explorer no varía el tamaño de la letra si la defines en pixeles, lo cual no es un tema menor considerando que sigue siendo el navegador más usado.

[Kailea]

No me había dado cuenta de ese detalle. Lo tendré en cuenta, aunque es lo que dices, si IE es el más usado pues habrá que diseñar para todos IE y no IE.

[metacortex]

Iniciado por frijolerou

"Sólo" en Internet Explorer no varía el tamaño de la letra si la defines en pixeles, lo cual no es un tema menor considerando que sigue siendo el navegador más usado.

Hay otras opiniones

[hurricane]

Iniciado por frijolerou

Esa es la gracia de utilizar unidades relativas (%, em), que le das la posibilidad al usuario de aumentar los tamaños con las herramientas que les ofrece el navegador en caso que el tamaño de la fuente le parezca muy pequeña.

El problema es ¿cuantos usuario saben modificar el tamaño de fuente del navegador?. Yo creo que un porcentaje importante de personas que lo que harán cuando vean pequeña la letra será cerrar el navegador e irse a otra página.

[Kailea]

De los que no tienen problemas de visión pocos, de los que sí los tienen y les cuesta bastante, es probable que en cursos, asociaciones, conocidos les hayan mostrado esta posibilidad. :)

[furoya]

Hola todos :

Dejo un primer enlace (hay más adentro) que habla de los em y su relación con el documento.

la propiedad .1em

'Antiguamente' la medida más usada era el punto (pt), pero en algún momento se comenzó a usar el px, que en verdad es una medida relativa ... a la resolución de pantalla. Pero las medidas absolutas no lo son tanto, también varían con el monitor.

Creo que el cambio vino con el javascript, que devolvía medidas en pixeles, y coincidió con la nueva "costumbre" de diseñar como si la pantalla fuera una hoja de papel. La gente que venía de editar en Word pensaba que los elementos de las páginas web se podían fijar, y que se iba a ver igual en cualquier máquina.

Además del px, el IE fija cualquier unidad absoluta, pero no estoy seguro de que sea un problema. Siempre se pueden usar las otras medidas para los textos.

A mi se me complicaba usar ems, porque cuesta un poco domarla, pero la peor incompatibilidad es entre versiones del mismo IExplorer. debe haber una forma de controlar la herencia con CSS para que sea más fácil usar la medida.

Una recomendación podría ser que se escriba

Código:

body { font-size: 100%; }

porque si hay que cambiar la relación de tamaño a todo el documento, alcanza con cambiar ese porcentaje. Que por otro lado, es el que tiene configurado el usuario como la medida más cómoda para él; y eso cubre a los que tenemos problemas de visión.

saludos