7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Accessibility

Cómo mejorar la accesibilidad de las fuentes y la tipografía en tus diseños

Scroll to top

Spanish (Español) translation by Alison Pumapillo (you can also view the original English article)

Las fuentes, el diseño de las mismas y la tipografía pueden tener un gran impacto en la legibilidad y visibilidad de los diseños para los espectadores con problemas de visión, algo que los diseñadores de páginas web e impresas suelen pasar por alto.

Elegir el tipo de fuente adecuado para mejorar la accesibilidad de tu diseño impreso o de tu sitio web no tiene por qué ser difícil ni comprometer la estética general de tu diseño. Aquí podrás saber más sobre cómo los distintos tipos de fuentes y el diseño de las mismas pueden afectar a los espectadores con problemas de visión, y cómo puedes mejorar tus diseños al instante.

font accessibilityfont accessibilityfont accessibility

¿Cómo afectan las fuentes y la tipografía que elijas a las personas con discapacidades visuales?

Según la Organización Mundial de la Salud (OMS), al menos 2 200 millones de personas padecen algún tipo de discapacidad visual o ceguera, lo que significa que un altísimo porcentaje del 28,5% de la población mundial sufre algún tipo de discapacidad visual.

Las discapacidades visuales se dividen en tres categorías, que tienen efectos diferentes o simultáneos en la forma en que los afectados interactúan con los diseños tipográficos:

El daltonismo provoca que, aunque la forma del texto no esté distorsionada, el color del mismo pueda ser difícil de percibir, y que distinguir los colores sea más complicado. Los daltónicos también pueden ser sensibles al brillo de los colores.

color blindnesscolor blindnesscolor blindness

La visión reducida (o baja agudeza visual) quiere decir que un individuo puede tener visión parcial en uno o ambos ojos, visión borrosa, visión en túnel, pérdida del campo visual central y/o visión nublada. Los diseños con texto o los objetivos de clic de tamaño pequeño pueden ser difíciles de leer o ver para los usuarios afectados. Aunque algunas personas utilizan el zoom integrado en el navegador o lupas de pantalla como ZoomText para navegar por los sitios web, muchos usuarios sin conocimientos técnicos no conocen o no saben cómo utilizar estas extensiones.

low visionlow visionlow vision

La ceguera es la pérdida sustancial de visión en ambos ojos. Para los textos impresos y físicos, las personas con ceguera han recurrido al texto en braille, mientras que los usuarios invidentes de Internet suelen recurrir a la tecnología de los lectores de pantalla, que convierten el contenido en pantalla en voz o lo muestran en una pantalla en braille. El software lector de pantalla más popular para dispositivos Windows es JAWS (Job Access With Speech), mientras que los usuarios de Apple suelen utilizar VoiceOver.

braille translation of fontbraille translation of fontbraille translation of font

Otros síntomas específicos de las discapacidades visuales que pueden afectar la forma en que las personas interactúan con el texto son:

  • Nieve visual, deslumbramiento, efecto fantasma y cataratas, síntomas que pueden afectar la claridad, la posición y el número de apariciones (visión doble) del texto.
  • El nistagmo, que se caracteriza por un movimiento rápido, involuntario y oscilatorio de los ojos, puede dar la impresión de que el texto salta o desaparece.
  • Un campo visual obstruido, que incluya miodesopsias o moscas volantes, una obstrucción lateral (desprendimiento de retina o hemianopía), una visión central obstruida (glaucoma), una visión irregular (retinopatía diabética) o una visión periférica obstruida (retinosis pigmentaria o degeneración macular), puede limitar el campo visual de una persona, lo que significa que algunas partes del texto de un diseño podrían no ser visibles.

Un ejemplo de accesibilidad e inaccesibilidad en la práctica

Veamos un ejemplo de cómo la elección de las fuentes y el formato de la tipografía pueden influir en la accesibilidad de un sitio web para las personas con discapacidad visual.

La revista estadounidense The New Yorker ha sido alabada por los aficionados de la tipografía debido a su elegante uso de la misma. En el sitio web de la revista, la peculiar fuente serif diseñada a medida, NY Irvin, mantiene un equilibrio con la geométrica fuente sans serif Neutraface y la tradicional serif Times New Roman.

Al tratarse de un medio con una reputación excelente, The New Yorker tiene un sitio web con mucho texto, que incluye un encabezado y un titular central, además de otros títulos de artículos en la periferia.

the new yorkerthe new yorkerthe new yorker

Por muy elegante y estéticamente equilibrada que sea, la tipografía presenta una serie de problemas que suelen limitar la accesibilidad de este tipo de sitios a los usuarios con problemas de visión.

El sitio web de The New Yorker muestra un mal rendimiento en tres ocasiones, ante usuarios con síntomas de baja agudeza visual (desenfoque), efecto fantasma y campo visual bloqueado. Estas imágenes se generaron con el simulador de visión NoCoffee, una extensión del navegador que permite a los diseñadores web evaluar la accesibilidad de los sitios.

Una persona con baja agudeza visual tendría dificultades para leer los textos más pequeños, como los avances de los artículos en las columnas de la izquierda y la derecha, así como el texto del cuerpo en el área del encabezado.

blurry visionblurry visionblurry vision

Si una persona experimenta ghosting (también conocido como visión doble o diplopía), el texto del sitio web se vuelve casi completamente ilegible. El estilo ornamentado de la fuente serif es, sin duda, un factor agravante en este caso, ya que la forma de las letras individuales no es perceptible al instante cuando se superponen.

ghostingghostingghosting

En el caso de un campo visual parcialmente bloqueado, el hecho de que el diseño tenga mucho texto y esté disperso en una zona amplia se suma a la inaccesibilidad del sitio. En el caso de la visión periférica (que suele ser un síntoma de glaucoma o de retinosis pigmentaria), los artículos periféricos son cada vez más difíciles de ver.

blocked visual fieldblocked visual fieldblocked visual field

Sin embargo, el sitio web funciona mucho mejor en otros tres aspectos. Si una persona sufre de una deficiencia de la visión del color (como la protanopía, ceguera al color rojo-verde), en general solo se verán afectadas las imágenes, ya que el texto negro sobre el fondo blanco resulta ser una opción de color clara y legible.

color blindnesscolor blindnesscolor blindness

En el caso de la pérdida de contraste, el esquema de colores monocromos de alto contraste también contrarresta el efecto de "cortina" visual. Los usuarios con cataratas, que suelen experimentar un campo de visión nublado, también se beneficiarán del color de alto contraste del texto.

low contrastlow contrastlow contrast

Si bien, basándose en todas estas observaciones, los diseñadores tipográficos de The New Yorker están tomando algunas buenas medidas para los usuarios con discapacidad visual, hay aspectos importantes que podrían cambiarse para mejorar la accesibilidad.

Aunque el contraste del texto en blanco y negro mejora la legibilidad, la elección de una fuente serif estilizada, el pequeño tamaño del texto y la cantidad y dispersión del mismo en el diseño dan lugar a un diseño con mucho estilo pero con poca accesibilidad.

6 pasos que para mejorar la accesibilidad de los textos de tus diseños

Hacer que los textos de tus diseños impresos o digitales sean más accesibles no es difícil. A continuación, te presentamos 6 pasos que puedes seguir para mejorar la legibilidad y la visibilidad general de las fuentes y la tipografía.

Utiliza fuentes sans serif estándar

Actualmente, la Sección 508 de la Ley de Rehabilitación de 1973 no establece los requisitos para elegir tipos de letra accesibles. Sin embargo, el Departamento de Salud y Servicios Humanos de EE.UU. ha recomendado las siguientes fuentes para los documentos PDF: Times New Roman, Verdana, Arial, Tahoma, Helvetica y Calibri.

Estas fuentes cumplen dos requisitos de accesibilidad. En primer lugar, son fuentes sans serif. Al carecer de los adornos adicionales de las fuentes serif, que pueden dificultar la legibilidad, las fuentes sans serif suelen ser mucho más fáciles de leer.

En segundo lugar, se trata de fuentes comunes que, por tanto, tienen menos probabilidades de ser sustituidas en los sitios web y son utilizadas con más frecuencia por los lectores, lo que hace que el estilo de la fuente sea menos llamativo y el texto más legible.

arial fontarial fontarial font

Limítate a usar una o dos fuentes en tu diseño

La presencia de múltiples fuentes puede distraer la atención de los lectores, lo que supone un esfuerzo adicional para los espectadores que sufren discapacidad visual, por lo que se debe limitar el número de fuentes en un diseño impreso o web a un máximo de dos o, de ser posible, a una sola fuente.

fontsfontsfonts

Aumenta el tamaño de la fuente

Utiliza una fuente con un tamaño mínimo de 12 pt para los diseños web e impresos, pero procura que sea aún mayor para mejorar la visibilidad. El sitio web del gobierno británico, por ejemplo, utiliza un tamaño de letra mínimo de 19 pt.

Asegúrate de que los títulos clave, las llamadas a la acción y los elementos de información importantes tengan un tamaño de letra grande.

resize fontresize fontresize font

Maximiza el contraste de colores

Asegúrate de que el contraste entre el texto y el fondo sea lo más alto posible. Poner texto negro contra blanco, y viceversa, es la opción más evidente, pero utilizar colores de extremos opuestos del espectro también ayudará a maximizar el contraste en caso de daltonismo.

Consejo: Utiliza una herramienta para comprobar el contraste y asegurarte de que las opciones de color que has elegido ofrecen el mayor contraste posible.

color contrastcolor contrastcolor contrast

Evita las animaciones

Los textos que parpadean, se mueven o desaparecen no solo pueden resultar molestos para la mayoría de los usuarios del sitio web, sino que pueden agravar los problemas de discapacidad visual, especialmente en el caso del nistagmo (aleteo).

animationsanimationsanimations

Evita el uso de cursivas y estilos con MAYÚSCULAS

La inclinación y la compresión de un texto, como ocurre con las letras en cursiva, reducen la legibilidad, como también lo hace el poner el texto en mayúsculas. Si quieres destacar ciertas partes del texto, opta por utilizar negritas o aumentar el tamaño de la fuente.

italic fontitalic fontitalic font

Evita utilizar fuentes modernas o display

Las fuentes modernas tienden a ser más estilizadas que las sans serif y las serif, lo que significa que habrá que procesar una capa adicional de información visual. La textura, la decoración o los adornos adicionales aumentan la complejidad de la fuente y reducen su legibilidad. Para un espectador con problemas de visión, esto supone un esfuerzo adicional que se suma al de intentar leer el texto.

novelty or display fontsnovelty or display fontsnovelty or display fonts

Diseña fuentes claras y la distintivas

A los diseñadores de fuentes les encanta experimentar con nuevos estilos tipográficos, formas, texturas y colores en sus diseños. Aunque esto puede dar lugar a una fuente original y llamativa, no significa necesariamente que la misma esté optimizada para las personas con discapacidades visuales.

Cuando diseñes tus propias fuentes, procura que las letras sean claras y se distingan unas de otras.

Mejora la claridad de tus letras ciñéndote a un estilo sans serif sencillo y sin complicaciones. Algunas letras minúsculas, como la "d" y la "b", pueden confundirse fácilmente, así que asegúrate de establecer una distinción entre las letras que podrían ser confundidas.

d and b lettersd and b lettersd and b letters

Conclusión: cómo mejorar la accesibilidad de las fuentes en tus diseños

Si tienes en cuenta los requisitos de accesibilidad a la hora de diseñar fuentes o utilizarlas en medios impresos o sitios web, podrás estar seguro de que tus diseños serán lo más accesibles posible para los usuarios con problemas de visión.

Si bien la legislación sobre el uso de fuentes en los sitios web aún no es obligatoria, cada vez es mayor la presión que se ejerce sobre las empresas para que se adapten a los usuarios con deficiencias visuales u otras discapacidades. El diseño es un área que puede tener un impacto significativo en la accesibilidad de los medios de comunicación, por lo que es cada vez más importante que los diseñadores sean conscientes de las necesidades de las personas con discapacidad visual y actúen en consecuencia en los trabajos que producen.

Para saber más sobre cómo mejorar la accesibilidad de tus diseños, consulta estos prácticos artículos:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.