Cuidado con el tamaño del texto
Cuidado con el tamaño del texto
Existe cierta tendencia entre los diseñadores a creer que el texto pequeño da una apariencia impecable a las páginas Web y aumenta el espacio disponible por página para el contenido, en ocasiones esto provoca el uso de un tamaño de texto irrazonablemente pequeño.
Desafortunadamente, esto no es bueno para la diversidad de plataformas que se usan para acceder a las páginas Web, desde dispositivos portátiles con pantallas diminutas, hasta los grandes proyectores conectados a los ordenadores. Incluso, en una misma plataforma, la configuración del texto podría variar.
El problema que se presenta es una cuestión básica de usabilidad y accesibilidad: un buen diseño debería ser atractivo sin necesidad de que el usuario aumente o reduzca el tamaño del texto.
Buenas prácticas
Olvidarse de <font>, y utilizar CSS
La manera adecuada y actualizada de establecer el tamaño del texto que se muestra en las páginas Web es mediante Hojas de Estilo en Cascada (CSS). Esto es mucho más recomendable que el uso de la etiqueta <font> de HTML, ya que CSS es más flexible, más fácil de mantener y consume menos ancho de banda. No es el propósito de este documento discutir el interés de CSS en comparación a las etiquetas <font>, los lectores que deseen más información al respecto deberán consultar a su motor de búsqueda en la Web favorito... Aquí nos centraremos en el buen uso de la tecnología CSS para crear páginas Web legibles.
Uso correcto de las propiedades de texto de CSS
A continuación mostraremos una serie de reglas básicas que se deberían seguir para crear páginas Web que sean (suficientemente) fáciles de leer, usando las propiedades de texto de CSS.
- No se debe especificar el
font-sizeenpt, u otras unidades de medida absolutas. Este tipo de unidades son interpretadas de manera desigual por las distintas plataformas, y los Agentes de Usuario (p.ej. navegadores) no podrán cambiar su tamaño. - Se deben utilizar unidades de medida relativas, tales como porcentajes o
(mejor)
em, o, incluso mejor, establecer unfont-sizebásico para el documento y utilizar tamaños absolutos ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) o tamaños relativos ([ larger | smaller ]) cuando se defina un tamaño de texto para un elemento en particular del documento. - Se deben evitar tamaños expresados en
emmás pequeños que1empara el cuerpo del texto, exceptuando quizás los derechos de autor y otros tipos de declaraciones "sutiles". - Si se utiliza un
font-sizepequeño, debemos inclinarnos por unafont-familycon un valor de relación de aspecto alto (véase la sección sobrefont-size-adjusten la especificación de CSS2 para una explicación sobre el valor de relación de aspecto), ya que son más susceptibles de ser legibles con tamaños tan pequeños. - Si se ofrecen varias opciones en la propiedad
font-family(para dejar que el sistema escoja la mejor fuente disponible de una lista), se puede usar la propiedadfont-size-adjustpara forzar un valor de relación de aspecto determinado.
Lecturas complementarias
Algunos de los siguientes consejos difieren de los nuestros. "Corpus 1em, nihil minor" —Bert Bos inspirándose en Cato.
- Fuentes en la Especificación CSS2 de W3C
- ¿Qué falla en el elemento FONT? por Warren Steel
- Problemas de tamaño por Todd Fahrner
- Campaña Big Type de Lighthouse International
- Haciendo el texto legible: Diseñando para personas con vista parcial por Aries Arditi