Ir directamente al contenido de esta página
—¿Que no se le puede dar al texto un tamaño de diez píxeles?—, preguntaba la diseñadora, estudiando mi reacción con una expresión en sus ojos equidistante del terror y la incredulidad…
Andrea Cesible, Diario íntimo de una consultora de accesibilidad
Antes de que el diseño centrado en el usuario adquiriese la atención que merece, los diseñadores de páginas web con un transfondo en diseño gráfico tradicional cuadraban sus diseños de Photoshop —o equivalentes— por medio de férreas estructuras de tablas anidadas, que para el desarrollador al que se entregaba el boceto eran una pesadilla de recrear por los problemas de cross-browsing, y un calvario de mantener.
Hoy en día, somos más conscientes de que esta obsesión por el píxel no sólo está condenada al fracaso —puesto que la presentación real de un documento web depende en gran medida del usuario final: resolución de pantalla, tamaño de fuente por defecto del navegador, soporte de CSS, etc.—, sino que además es muy poco recomendable por cuestiones de accesibilidad, porque un usuario con defectos de visión puede necesitar configurar el tamaño del texto para que le resulte legible.
Con respecto a esto el W3C es bastante claro:
Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units.
[Emplee para el marcado unidades relativas antes que unidades absolutas, y por medio de valores de las propiedades de las hojas de estilo. (Prioridad 2)
Por ejemplo, en la CSS, emplee ems1 o tamaños en porcentajes antes que puntos (pt) o centímetros (cm), que son unidades absolutas.]
Éste es el punto 3.4 de las WCAG 1.0 (inglés), pero en la sección Units of measure del documentos de técnicas de CSS (inglés) es mucho más claro:
Use the "em" unit to set font sizes.
[Emplee la unidad em para establecer tamaños de fuente.]
Es lo que hay, pero veamos el porqué.
En el texto de la pauta recogido arriba el W3C no menciona entre las unidades absolutas el píxel. El motivo es bien simple: en teoría, es una unidad relativa, como especifica el propio consorcio (inglés), de la misma forma que especifica, por si alguien ha tenido alguna vez curiosidad, que la media de longitud del brazo de un usuario es de 71,1 centímetros.
Por desgracia, sigue habiendo un obstáculo para su empleo: Internet Explorer 6 y anteriores no permiten escalar un texto fijado en píxeles, como se comprueba en el ejemplo.
La versión 7 sí escala correctamente los textos especificados en píxeles, pero me temo que aún es un poco pronto para desentendernos del soporte a la versión anterior; The Counter, por ejemplo, señala que en el momento en que escribo aproximadamente la mitad de los internautas la emplean (inglés). Destino aciago, pardiez.
Vale, nada de píxeles.
En tipografía tradicional, una em equivale al ancho de caja de la letra «M» mayúscula de un tipo concreto. En las tipografías digitales, es la distancia entre las líneas base de dos renglones cuando no se ha aplicado ningún interlineado adicional, es decir, sería la altura máxima de la caja de una fuente concreta. Sin embargo, en los navegadores, las fuentes se escalan proporcionalmente hasta ocupar el tamaño que por defecto haya especificado el creador del navegador.
A lo largo de los 90, en la mayoría de los navegadores el tamaño por defecto estaba establecido a 12 puntos. Como ésta es una unidad específica para medios de página, en las pantallas, y dependiendo del sistema operativo —en Windows el tamaño base de las fuentes era 16px/96ppi, y en Mac OS 12px/72ppi—, los diseños se volvían inconsistentes. La situación se mantuvo así hasta que en 1998 Todd Fahrner propuso en la lista de correo del W3C que se adoptase como tamaño base para los navegadores el tamaño de 16 píxeles, algo que los fabricantes hicieron en el año 20002.
Así pues, en los navegadores actuales, inicialmente 1 em equivale a 16 píxeles, pero sólo siempre y cuando el usuario no haya variado el tamaño por defecto de la fuente. Las ems son unidades relativas, así que más exactamente 1 em equivale al cien por cien del tamaño inicial de fuente. Si el usuario ha configurado su navegador para que el tamaño de fuente inicial sea 20 píxeles, entonces éste será el tamaño de 1 em.
Las ems, por tanto, más que emplearse para definir tamaños exactos, se emplean para establecer las proporciones relativas de los elementos incluidos en una página. No se trata ya de definir los h1 a un tamaño de 16 píxeles y los p a un tamaño de 10, sino cambiar la forma de pensar: lo que se está definiendo es que un encabezado tiene un tamaño 1,33 veces superior al de los párrafos.
Cambiar una forma de pensar establecida lleva su tiempo. Algunos diseñadores con un elevado grado de adaptación realizan una transición apenas traumática. Pero para otros parece poco menos que una ordalía. Para estos últimos, la accesibilidad no es más que una traba que les obliga a realizar cálculos adicionales para lograr el aspecto que presenta una página cuando aún no es más que una imagen en su programa de diseño gráfico.
El otro escenario típico es el del desarrollador web al que se le entrega un archivo .psd o .jpg y cuyo jefe o cliente le pide que lo reproduzca. Contagiados de la obsesión por el píxel del diseñador mencionado antes, quien tiene que realizar los cálculos a la hora de crear la hoja de estilo es él. «Malditas ems» es el pensamiento que recorre las mentes de todos.
Afortunadamente, Rich Rutter ideó un método para simplificar los cálculos necesarios para trabajar con ems pensando en píxeles (inglés). Consiste en establecer en la hoja de estilo el font-size de body a 62.5%. Teniendo en cuenta el tamaño por defecto de fuente de 16 píxeles del que hemos tratado arriba, el tamaño heredado por el resto de los elementos es de 10 píxeles. A partir de ahí, 1em en la CSS son 10 píxeles, 1.5em son 15 píxeles, 0.8em son 8 píxeles, y así sucesivamente.
Genial, ¿no? Bueno, no del todo.
font-size es una propiedad heredable, lo que significa que se aplicará a todos los descendientes de body. En este aspecto, los navegadores no tratan igual a todos los elementos. Las listas y las tablas aplican el porcentaje definido a cada uno de los elementos anidados que forman parte de la estructura de su modelo de contenido. Esto significa que el elemento ul mantiene el tamaño que por defecto se le ha dado a body, pero sus li son además otro 62.5% más pequeños. Igual ocurre en las tablas con td.
Si se incluye algún elemento dentro del ítem de la lista o de la celda —por ejemplo, si se contiene el texto dentro de un p—, su tamaño se restablece a la relación proporcional con el tamaño asignado al body.
La forma de solucionarlo es hacer que tanto los ítems de lista como las celdas partan de un tamaño mayor que el resto del documento, para corregir ese porcentaje que se aplica:
li{font-size:1.1777em;}
El problema con esta declaración es que en las listas anidadas provocaría el problema contrario: cada ítem de un nivel adicional aumentaría. Por ello hay que complementar la regla anterior con una que especifique que los li anidados dentro de otros deben mantener el tamaño inicial del elemento padre:
li{font-size:1.1777em;}
li li{font-size:1em;}
Para el caso de las tablas, la solución es la misma:
td{font-size:1.1777em;}
Quien lo desee, puede comprobar estos comportamientos en la página de pruebas.
Internet Explorer 6 renderiza por defecto los contenidos de las tablas en una fuente mayor que el del resto de los textos. Las declaraciones anteriores no solventan este comportamiento, pero sí hacen que el tamaño de texto sea el mismo tanto si está contenido en un elemento como si no.
Si nos encontramos en la situación de tener que convencer a un cliente/jefe/diseñador de que no va a obtener exactamente el mismo diseño de la imagen que nos han presentado sin mucho esfuerzo, es probable que emplear este sistema sea más rápido y menos estresante. Pero si da la casualidad de que podemos tomar la decisión determinante, es mejor olvidarse de los píxeles y pensar en relaciones. «¿Cuántos píxeles le damos al encabezado?». La respuesta sería: «Es indiferente, que sea un 25 por ciento mayor que el texto».
Yo, personalmente, suelo partir de body{font-size:0.8em}, que da un valor ligeramente superior a los 12 píxeles, que considero un tamaño cómodamente legible—si tenemos en cuenta que el umbral mínimo de legibilidad en pantalla es de 9 píxeles, un tamaño cercano a 10 me parecería un poco escaso—, y a partir de ahí establecer el resto de tamaño con porcentajes. En los navegadores, con el tamaño de body definido en ems desaparecen los problemas de listas y celdas.
No obstante, como con cualquier otra técnica, es bueno conocerla. Nunca viene mal un as en la manga.
Me he centrado en los tamaños de texto, porque desde el punto de vista de la accesibilidad es el problema más acuciante. Sobre su aplicación al maquetado de la página, entraríamos en la discusión de diseño fluido vs. diseño fijo, sobre la que no hay argumento contundente ni definitivo para establecer los anchos de columnas a píxeles, ems o porcentajes. No obstante, el planteamiento para un diseño fluido sería el mismo. «¿Qué ancho le damos a la columna derecha?», «Es indiferente, que sea el doble que la columna izquierda».
