El Tamaño es Relativo: Ems

En una nota anterior comenté sobre las unidades de medida para fuentes en CSS. En esta oportunidad profundizaremos el tema refiriéndonos particularmente a una unidad, tal vez la menos conocida del grupo: ems.

Cuando se plantea el tema de cómo definir los tamaños del texto usando CSS varias cosas entran en juego. En primer lugar las consideraciones de usabilidad, en relación a la legibilidad del texto y la posibilidad de los usuarios de controlar el tamaño de despliegue para ajustarlo a sus necesidades. Por otro lado, el control sobre el diseño y presentación del sitio, normalmente defendido a dentelladas por los diseñadores.

Poniendo las cosas en perspectiva, lo primero que debemos entender, es que las necesidades del usuario son un requerimiento y no un elemento optativo en el desarrollo de un sitio. La usabilidad y accesibilidad son demandas del usuario y nosotros debemos oirlas.

El diseño debe estar al servicio de estos requerimientos. Punto.

Estas dos perspectivas no son necesariamente contradictorias, y es posible crear sitios accesibles, usables y estéticamente agradables. En esto el control y conocimiento de las herramientas disponibles ayuda mucho, y CSS juega una parte importante.

Con CSS podemos lograr textos con tamaños relativos, es decir, no fijos, modificables por los usuarios utilizando los controles normales del browser (las opciones Text Zoom o Text Size dependiendo del browser). Para ello contamos con tres unidades de medida definidas como relativas:

em

En la práctica, el tamaño por omisión definido en las preferencias del browser. La definición real de un em es el ancho del caracter m según el tamaño de texto actualmente en uso (activo). Esto normalmente se refiere al tamaño del elemento padre, el que contiene a aquél al que nos estamos refiriendo.

ex

ex se refiere a la altura del caracter x respecto al tamaño de texto activo.

px

Para sorpresa de muchos, se considera al píxel como una unidad de medida relativa, esto respecto a diversos dispositivos de visualización. Por ejemplo, un píxel en un PC de escritorio no será del mismo tamaño que en una Palm. Incluso será de tamaño diverso en distintos tipos de monitores.

%

Pese a no estar directamente asociado a los elementos anteriores como unidad de medida, el porcentaje se relaciona siempre con otros valores, como por ejemplo, píxeles. Al definir un porcentaje, se necesita conocer un valor de referencia, por ejemplo, el 10% de 125 píxeles.

Lo que hace especial a em lo podemos resumir en la siguiente lista:

• se trata de una unidad relativa, que se escala proporcionalmente
• que no depende directamente de otros elementos, como los porcentajes
• que no es exclusivo para uso en un medio particular, como pt o px
• que permite un total control al usuario

El problema sobre el control del diseño persistirá si insistimos en desarrollar diseños que requieran de precisión absoluta. La solución es diseñar tomando en cuenta estos factores, y teniendo consciencia de que finalmente y en condiciones más o menos extremas, para un usuario (y para nosotros como responsables de un sitio) es preferible ser capaces de acceder a un contenido, que de ver un diseño agradable, pero quedar impedido de leer la información a la que supuestamente sirve.