Tamaño y escala del texto o fuente en CSS

Leo un artículo en A List Apart de Richard Rutter sobre las diferentes técnicas para definir el tamaño –y la escala, el redimensionamiento– de textos en CSS y las consecuencias del uso de esas técnicas sobre distintos navegadores –el estudio se realiza sobre Safari 2, Firefox 2, Internet Explorer (IE5 y IE6) y Opera 9.5–. No es una gran lista, pero suficiente, dado que son los navegadores más empleados por los usuarios. Hago un breve resumen:

Tamaño de fuente por defecto

El tamaño de texto por defecto, cuando no hay ningún estilo que se le aplique, es de 16 píxeles. Todos los navegadores interpretan esa cantidad correctamente y, además, el texto se escala perfectamente cuando el lector decide ampliar o reducir el tamaño de la fuente… ¿entonces dónde está el problema? Pues que a muchos de los diseñadores les parece excesivamente grande para el texto del cuerpo.

Tamaño del texto en píxeles

Una solución “a medias” es poner el tamaño del texto a 14 px –en A List Apart definen el texto del sidebar a 12 px–.

.bodytext p {
font-size: 14px;
}

De esta forma, tanto Safari como Firefox ajustan correctamente el tamaño del texto, pero las versiones 5 y 7 de IExplorer no. Tanto en Opera, como en el IE 7, el texto puede ser ajustado con la herramienta del zoom. Por mucho que los diseñadores odiemos –y con razón– Internet Explorer, es cierto que la estadísticas en esta caso no mienten, y es un navegador usado por mucha gente. Por lo que definir el texto en píxeles dejará a mucha gente sin posibilidad de ver el texto ajustado tal y como nosotros lo definimos.

Definir el texto con la medida em

La medida em es una unidad tipográfica recomendada por la W3C. Trabajando desde los 16px que se nos dan por defecto, el siguiente estilo debería darnos el tamaño de texto deseado:

.bodytext p {
font-size:0.875em; /* 16x.875=14 */
}

Los resultados hablan por sí mismos. Todos los navegadores se ajustan correctamente a nuestro estilo definido, y vemos el texto como si lo hubiésemos definido a 14px.

Body ajustado en porcentaje

Hemos visto que con la medida em podemos ajustar correctamente el valor que queríamos darle por defecto al texto. Pero, sin embargo, en las versiones 5 y 7 de Explorer, vemos se exagera la pequeñez y la grandeza del texto redimensionado. Una forma de solucionar esa exageración, es aplicadole una medida de porcentaje al texto del body. Guardamos los ems del contenido y aplicamos los siguientes estilos:

body {
font-size:100%;
}

.bodytext p {
font-size:0.875em;
}

En los resultados vemos que esa exageración se difumina. Ahora sí, todos los navegadores renderizan el texto con el mismo tamaño por defecto y se redimensiona consistentemente.