Unidades Relativas (em) para beneficiar a los usuarios con problemas de visión.

¿Por qué es más accesible utilizar unidades relativas (% em) en lugar de absolutas (px)?

  • Utilizar unidades relativas permite a las personas con problemas de visión cambiar las preferencias del navegador y de este modo modificar los tamaños de los textos e imágenes de los Sitios a los que acceden.
  • Y permite a las personas que todavía utilizan IExplorer 6, utilizar la función Ctrl+ ó – para hacer zoom (dado que en esta versión, los elementos en pixels no se amplían y sólo lo hacen los que están especificados en EM).

¿Cuál es la diferencia entre ambas formas de trabajo?

  • Si utilizamos unidades absolutas (pixels, puntos, etc.) cuando los usuarios modifiquen las preferencias del navegador, los elementos no se verán afectados.

UNIDADES ABSOLUTAS => DISEÑO RÍGIDO
=> EL USUARIO DEBERÁ ATENERSE A LAS PREFERENCIAS DEL DISEÑADOR.

  • En cambio, si utilizamos unidades relativas (por ejemplo, EM) los textos e imágenes van a ampliarse o achicarse según lo decida el usuario.

UNIDADES RELATIVAS => DISEÑO ELÁSTICO
=> EL USUARIO DECIDE.


¿Cómo podemos llevar nuestros diseños armados en PX a esta medida relativa?

Para poder sincronizar el diseño armado en pixels con la maquetación en EM, podemos hacer que 1 EM sea igual a 10 px (esto es simplemente para hacer las cuentas más fáciles!).

Dado que la tipografía predeterminada del navegador viene preestablecida en 16 px, si establecemos el font-size al 62.5% (62.5 % de 16 px = 10 px) estamos fijando que 1 em sean 10 px.

body {

font-size: 62.5%;

}

Por lo tanto:

  • 1 EM = 10 PX
  • 1.2 EM = 12 PX
  • 1.3 EM = 13 PX
  • 2 EM = 20 PX


¿Cómo hacemos para que nuestros diseños no se desarmen en caso de que el usuario modifique el tamaño predeterminado?
Entiendo que tenemos dos posibilidades:

1)      Utilizar los EM para TODOS LOS ELEMENTOS (divs,  textos e incluso imágenes) y de este modo, todo aumentará proporcionalmente.

2)      Hacer una mixtura: armar la maquetación de forma rígida (en pixels) y sólo las fuentes determinarlas en EM. Pero para esto deberíamos preparar el diseño teniendo en cuenta qué pasaría si el usuario decidiera aumentar la fuente, por ejemplo, al 200%.

Los invito a ver cómo está armado el código fuente de este mismo WordPress Themes, programador por Rodrigo Galindez.