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.

Juan Carlos escribe una nota bien documentada, como es usual, sobre tipografía en el web. Su objetivo es tratar de entender las razones detrás del uso de fuentes con o sin serif, pero un comentario secundario capturó mi atención y no puedo evitar el entrar en detalles sobre esto.

De momento, aunque con poca base científica detrás, yo sigo recomendando escribir el cuerpo de los textos más o menos largos en letra sans serif, preferiblemente Verdana o Arial, y en un tamaño de 12 puntos (mejor puntos que pixels, pues los puntos permiten al usuario modificar fácilmente el tamaño del texto).

Evidentemente lo que ha hecho que mis alarmas suenen es la recomendación de usar puntos por sobre otras unidades de medida. Desde hace bastante tiempo que el tema de las unidades de medida para textos se viene discutiendo con bastante pasión en los círculos de die-hards de CSS. En resumen este asunto se puede resumir en lo siguiente, al menos desde mi perspectiva:

• pt (puntos) es una unidad de medida eminentemente (tipo)gráfica, sin embargo no es apropiada para la pantalla, por varias razones, entre ellas el hecho de que no es proporcional, pese a que browsers modernos realicen un escalamiento proporcional (Mozilla, Opera). Adicionalmente, un punto no siempre es exactamente equivalente a un píxel: en Windows un punto se traduce a 1.3 píxeles y en Mac el equivalente es uno a uno, por lo que los resultados en diversas plataformas son imprecisos. En conclusión, es mejor utilizar esta unidad de medida para especificar hojas de estilo especiales para impresión.
• px (píxeles) es una unidad de medida absoluta y mapeada directamente a la resolución del monitor. Si bien es posible (y aconsejable) escalarla, IE no es capaz de hacerlo, al menos hasta la versión 6.
• em es una medida inherentemente tipográfica y proporcional, y es la más apropiada para la pantalla.
• % (porcentaje) es una unidad de medida relativa que se ajusta perfectamente al uso en monitor, pero que puede llevar a ciertas impresiciones conceptuales. Prefiero utilizar porcentajes para especificar bloques en lugar de textos.

Para sostener estos argumentos y comprobar cómo se tratan las distintas unidades de medida de texto he publicado una página de prueba con texto en puntos, píxeles, ems y porcentajes. Para nadie será sorpresa que Mozilla maneja las unidades de medida de manera formidable, escalando cada una de ellas de modo apropiado. En IE, en cambio, puntos y pixeles no son escalables.

Indefectiblemente cada vez que estoy concentrado editando o generando contenido en alguna aplicación web como el CMS que soporta este sitio, WordPress,o cualquier otro, tengo el reflejo natural de presionarControl+S para guardar los contenidos. Naturalmente esto activa la función Guardar Página del navegador (Mozilla en mi caso) en lugar de guardar aquéllo que estoy elaborando. Este es un condicionamiento producto de años de trabajo digital, en que he aprendido por la fuerza a proteger mi trabajo de potenciales problemas que terminen en la pérdida de horas de dedicación. Creo que a todos nos ha pasado.

El problema es que el modelo mental que formamos para trabajar en las aplicaciones tradicionales de escritorio, con interfaces bastante estandarizadas, no se aplican al entorno web. Sin embargo, necesitamos guardar o registrar nuestro trabajo o las selecciones que hayamos realizado, la configuración que hemos modificado, etc. Aquí, no obstante, el modelo es otro: debo recordar que estoy trabajando en un formulario web y que cualquier acción debe ser procesada por un script en el servidor, llamado mediante botones más o menos reconocibles, dependiendo del diseño único de cada aplicación web.

Aquí quedan expuestos claramente dos problemas que debemos tener muy claros al desarrollar interacciones en la plataforma que nos ofrece el web:

1. Necesitamos dejar muy en claro, de modo explícito, que este es un medio diferente, con reglas propias.
2. Debemos ser claros, consistentes y establecer un modelo que resulte en un aprendizaje rápido y fácil para el usuario: no debemos inducir a errores al usuario.

Esto que acabo de plantear no es algo nuevo, pero me comenzó a dar vueltas en la cabeza desde que comencé a publicar este weblog y me ha hecho replantear o repensar algunas cosas que daba por sentado. Y si me sucede a mí, de seguro que no soy el único. El asunto de fondo es, en consecuencia, cómo resolver la ambigüedad y partucularidad del formato que nos ofrece el web para realizar tareas que en el contexto familiar de las aplicaciones de escritorio nos resulta a esta altura natural.

No pretendo tener una respuesta, pero tengo la pregunta. Volveré al tema en la medida que lo elabore un poco más.

Desde hace un par de meses que estaba en la lista de espera de mis lecturas el libro de Donald Norman The Design of Everyday Things. Finalmente comencé a leerlo y la espera no ha sido en vano. Ya desde el principio me encontré con una anécdota que vale mencionar.

Cuenta Norman que originalmente el libro se llamó La Psicología de las Cosas Cotidianas, pero su editor le hizo notar que la palabra psicología hacía que en las librerías y bibliotecas éste se catalogara junto a los libros de psicología en lugar de aquéllos relacionados con interacción humano/máquina. Norman se dedicó a conversar con bibliotecarios y personal de librerías y comprobó la situación.

La anécdota de esto es que incluso él, que había escrito un libro sobre el diseño centrado en el usuario, había cometido un error considerable: no pensar en sus lectores, sino en sus colegas académicos, a quienes el título evidentemente complacía. Fue entonces que decidió cambiar el nombre en futuras ediciones a El Diseño de las Cosas Cotidianas.

Para sumar a la anécdota, es posible encontrar copias de ambas ediciones en Amazon: la primera versión, La Psicología de las Cosas Cotidianas y la segunda, El Diseño de las Cosas Cotidianas.

Cito la anécdota de Norman no como un acto de autoindulgencia sino, por el contrario, como algo a tener en cuenta, un recordatorio de que hasta en las cosas más simples, no debemos olvidar al usuario o destinatario final.

Más comentarios sobre el libro en cuanto avance la lectura.