Consejos útiles en el uso de la tipografía en pantalla

¿Has visto alguna vez letras tejidas en punto de cruz?

Es similar al funcionamiento de la tipografía en pantalla. Una pantalla está formada por píxeles (un pixel equivale a cada uno de los cuadrados que componen una letra). Así, las letras están formadas por varios píxeles coloreados.

¿Qué hay que tener en cuenta?

El fin último de toda tipografía es ayudar a la lectura, para que sea lo más fácil posible. Por eso, hay que tener en cuenta que las primeras tipografías fueron inventadas para imprenta, pero no para ser leídas en pantalla.

¿Cuál es la diferencia? Por ejemplo, las curvas que conforman una letra en papel se representan bien, ya que es más fácil plasmar el detalle fino en tinta, mientras que se requieren muchos píxeles para ser representadas correctamente en pantalla. Esto afecta sobre todo a las letras con serifa, hasta el punto de que la lectura en pantalla llega a ser hasta un 30% más lenta.

Te mostramos a continuación algunos ejemplos de letras creadas en distintos momentos y para distintos fines:

• Garamond fue creada para tipos de plomo (impresión en papel).
• Univers fue creada para fotocomposición.
• Adobe fonts y Google fonts fueron creadas para ser leídas en pantalla.

Hay que tener en cuenta además que no existe un tipo uniforme de pantalla. Existen distintos dispositivos (ordenadores fijos, portátiles, móviles, tabletas, ebooks, etc.) y diferentes resoluciones de pantalla que afectan a la calidad de la lectura. Aunque no existen por tanto unas instrucciones exactas, sí hay una serie de recomendaciones generales a seguir:

• Averigua el año de creación de la fuente y cómo fue utilizada en inicio.
• Prueba cómo se comporta el tipo de letra en pantalla con distintos tamaños. Hay tipos de letra diseñados para tamaños específicos (8, 10, 12 píxeles) y si se utilizan a otra dimensión (11, 13) perderán definición.
• Sé compasivo con los hipermétropes y nunca bajes de un tamaño de letra 12, aunque debes saber que el recomendado para la lectura en web es 16.
• Comprueba si hay un buen contraste entre la letra y el fondo. Busca colores oscuros sobre colores claros o colores saturados frente a colores poco saturados. Hay webs específicas como https://colorable.jxnblk.com/ que te ayudarán a comprobar el contraste entre la letra y el fondo.
• Asegúrate de que es fácil distinguir cada letra. Evita que el diseño entre letras distintas sea demasiado homogéneo, porque se leerá peor.
• Da preferencia a las letras de caja baja, porque los caracteres son más individualizados. La letra en mayúscula dificulta la lectura.
• Evita la negrita, la cursiva o la letra fina en textos largos. La negrita y la cursiva añaden píxeles extras a cada caracter (lo “emborronan”), y la letra fina es más difícil de diferenciar del fondo. Elige un peso medio, que facilita la lectura.
• Revisa la distancia entre letras dentro de cada palabra y la distancia entre palabras. Si hay poca separación, parecerá que el texto se amontona; si hay demasiada, aparecerá fragmentado. Emplea un interlineado un 20% superior al tamaño de la letra, sobre todo con letras sin serifa que carecen de los remates que ayudan al ojo a seguir la línea de lectura.
• Elige familias con serifa para textos largos, y sin serifa si tienes que utilizar un tamaño pequeño de letra.
• Evita la letra demasiado ancha o demasiado estrecha.
• Utiliza párrafos de entre 12 y 15 palabras (entre 45 y 75 caracteres) por línea para evitar que el texto se disperse a lo ancho de la pantalla, porque dificulta al lector el encontrar la línea siguiente.
• Ten en cuenta el tamaño de letra, el ancho de columna y el interlineado cuando crees un texto responsive, ya que el teléfono móvil está más cerca de la vista de los lectores que la pantalla del ordenador.
• Da preferencia a la alineación a la izquierda frente a la justificada o la centrada. La alineación justificada presenta una separación desigual entre palabras que interfiere la lectura fluida.

En relación a la composición del diseño en pantalla, hay también unas pautas a seguir al seleccionar el tipo de letra:

• Elige un tipo de letra con personalidad, evitando las demasiado comunes, para que sea recordada con facilidad.
• No utilices más de tres tipos de letra por composición (lo ideal es dos). Procura que los tipos de letra que elijas contrasten entre sí, pero que sean de familias compatibles.
• Adapta el tipo de letra a tu público objetivo: Por ejemplo, no será adecuada la misma letra para un público infantil que para una web deportiva.
• Evita los subrayados, ya que en web significa enlace y puedes confundir a tu lector.
• Ten en cuenta que en web sólo se lee el 25% del texto completo; el resto simplemente se escanea o se hace una lectura en diagonal.

¿Te ha interesado este artículo? Encuentra más en Baetica.es.