Tipografía web accesible: Diseño, aplicación y aspectos técnicos
Tipografía web accesible: Diseño, aplicación y aspectos técnicos
Phil Garnham Fuentes por la accesibilidad
El diseño web adaptable ha alcanzado la mayoría de edad y han surgido nuevos modos de leer y relacionarse con el texto. En combinación con los recientes avances en las tecnologías de respuesta "variable" fuente , que permiten que fuentes se muestre en diferentes anchuras, pesos y contrastes, la concienciación sobre los atributos accesibles de fuente es ahora más importante que nunca.
Elegir un tipo de letra accesible puede parecer una tarea desalentadora. La gran cantidad de información sobre diseño de tipos accesibles, aplicaciones y metodología de código es asombrosa. Una cosa está clara: la legibilidad del contenido es probablemente el principal objetivo de casi todos los sitios web. Los puntos aquí expuestos pretenden ser una caja de resonancia para la consideración y evaluación a la hora de seleccionar un tipo de letra para su marca.
Diseño tipográfico
Legibilidad frente a legibilidad: La legibilidad se refiere a la pregunta "¿Puede reconocer esta letra o palabra?" "¿Puede interpretar y comprender esta palabra?". La legibilidad tiene que ver con "¿En qué medida se siente cómodo durante la lectura? Un diseño accesible es tanto legible como legible.
Serif vs sans: Nuestra investigación en colaboración con Mencap indicaron que las letras sin gracias fuentes se consideraban el estilo más accesible. Las personas con problemas de lectura consideraban demasiado complejo el nivel de detalle de las letras con gracias. Las sans fuentes tienen una estructura simplificada; sus formas se asemejan más a nuestra escritura aprendida y, por tanto, se consideraban más legibles. En el navegador, las letras sans monolineales se muestran con mayor limpieza en tamaños de píxel más pequeños, sobre todo en los entornos de renderizado más duros.
Formas de las letras: Elegir un tipo de letra que reconozca bien los caracteres facilita la legibilidad. Las personas con problemas visuales pueden encontrar confusas algunas letras, por lo que es importante que las formas de las letras potencialmente confusas estén claramente definidas. Las más comunes son la "I" (ojo), la "i" (ojo inferior), la "l" (el) y el "1". Una "C" cerrada puede parecer una "O" en píxeles pequeños. Las formas de contador abiertas facilitan la lectura. La combinación de "r" y "n" puede leerse como una "m". Los ascendentes y descendentes largos también son importantes. Ayudan a definir formas de palabras externas que el ojo puede escanear e interpretar rápidamente.
Fuente proporciones: Una altura x grande y proporciones de moderadas a anchas es lo más accesible. La altura x de un tipo de letra es importante porque a menudo infiere un mayor espacio en blanco dentro de una letra, lo que ayuda a la definición y la claridad. A menudo, los estilos de anchura condensada y comprimida se promocionan porque permiten un diseño más fluido y sensible. Es importante tener en cuenta que, si se utiliza un estilo condensado en fuente cuando el espacio es limitado (móvil), también se puede reducir la accesibilidad. Es fundamental probar exhaustivamente el uso de fuentes en su contexto.
Pistas: Las sugerencias son una capa añadida de datos dentro de fuente que describen el grado en que un píxel debe activarse o de descuento para mejorar la calidad de una letra en un tamaño de píxel específico. A pesar de las mejoras en la resolución de la pantalla, la insinuación en fuente sigue siendo un proceso esencial en el diseño tipográfico. La mayoría de las fundiciones automatizan este proceso y obtienen muy buenos resultados, pero no hay que confiarse. Por mucho hinting que se haga, una letra de alto gramaje como fuente no quedará bien a un tamaño de 12px.
Tipo de aplicación
Peso: Establezca una jerarquía asignando funciones a cada fuente. Una jerarquía permite al ojo descomponer la información en una experiencia clara. Utilice pesos abiertos y medios para los subtítulos y el cuerpo. Establezca una prueba para evaluar a través de varios navegadores y entornos o utilice Pila de navegadores para obtener una visión general. El peso puede cambiar drásticamente de un entorno a otro. Si lo desea, aplique Mezcla de representación tipográfica para equilibrar la apariencia.
El tamaño: El tamaño es importante. Tenga en cuenta que cada fuente se sitúa en una escala diferente en el cuerpo tipográfico y que los tamaños reales pueden variar enormemente entre fuentes. 14px en un fuente pueden equivaler a 18px en otro. El tamaño medio del cuerpo oscila entre 14px y 16px. Por regla general, 16px o más se considera el más inclusivo. Fuente-El tamaño también puede influir en la calidad de la representación. Encuentre los puntos óptimos que ofrezcan los mejores resultados de representación para sus plataformas principales.
Altura de línea: Deje que la letra respire. El ojo debe poder pasar de una línea a otra con facilidad. Las Pautas de Accesibilidad al Contenido en la Web recomiendan un valor de 1,5 para el cuerpo del texto. Evalúelo, redúzcalo o auméntelo según sea necesario.
Longitud de línea: Escanear líneas de texto largas es una prueba para los ojos. Los estudios indican que la longitud media de las líneas en línea es de unos 70-80 caracteres. Limite las líneas a un máximo de 16 palabras.
Alineación tipográfica: El texto centrado no es un texto accesible. El centrado crea diferentes posiciones de partida. Esto crea problemas para los discapacitados visuales.
TODO EN MAYÚSCULAS: Nunca utilice "TODO EN MAYÚSCULAS" en el cuerpo del texto. Utilice minúsculas si necesita mayúsculas cortas. Son ideales para enfatizar, abreviar y subtitular.
Ligaduras: Considere el diseño de ligaduras - fi, fl etc... Estas letras combinadas pueden añadir armonía, pero también confusión para las personas con discapacidades lectoras.
El color: Como todos los elementos visuales, el tipo de letra debe tener un contraste adecuado. Un tipo gris sobre blanco puede ser difícil de leer si el gris y el peso de fuente son demasiado ligeros. Nuestro FS Untitled tiene pesos finamente "graduados" para ayudar a los usuarios a equilibrar su apariencia. Un tipo de letra blanco sobre un fondo oscuro "brillará" en la pantalla, aparecerá más apretado y, como resultado, algunos sitios fuentes pueden necesitar ajustes de espacio entre letras.
Tipos técnicos
Fuente estrategias de carga: Las conexiones lentas (móviles) y los archivos fuente de gran tamaño ralentizan la carga del texto. Un solo archivo WOFF con un juego completo de caracteres europeos tendrá un tamaño de 30KB - 50KB. Hay que tener en cuenta los estados FOUT (Flash of Unstyled Text) o FOIT (Flash of Invisible Text). FOIT es el estado por defecto predominante en los navegadores y en términos estéticos FOIT es deseable, pero en términos de accesibilidad FOUT es sin duda el camino a seguir. Ver algo de contenido es mejor que no ver nada. Intente mostrar el texto en un navegador alternativo hasta que se cargue toda la web fuentes . Impleméntelo con Webfont Loader y establezca una cookie, ya que esto minimiza el FOUT a medida que el espectador se adentra en el sitio. Alternativamente, puede establecer el nuevo descriptor CSS fuente-display que permite la configuración de la carga de fuente a través de CSS. Más información aquí.
Fallback fuentes: La selección es limitada, sobre todo en móviles. Tabla de compatibilidad de Jordan Moore ilustra el problema. A la hora de seleccionar un fallback, procura que los pesos y proporciones sean similares. Ajusta las métricas del texto alternativo para que coincidan con el tamaño de fuente . Fundamenta tu decisión superponiendo tu fuente accesible elegido sobre el fallback y juzga si es apropiado.
text-rendering: Use optimiseLegibility to enable kerning and improve rendering quality. This setting also enables ligatures, so review the design of the ligatures and their shape complexity. If necessary disable them by setting: .classname { font-feature-settings: “liga” 0; }
Proteger fuentes: Desarrollar un tipo de letra de alta calidad lleva años de esfuerzo e inversión. Es justo que, dado el importante papel que desempeñan los tipos de letra en todos los proyectos web, tomes medidas para proteger la inversión realizada en ellos. Utiliza CORS para desplegar fuentes, garantizando que sólo los sitios permitidos tengan acceso a los archivos.
En Fontsmith, nuestro objetivo es hacer que la tipografía sea lo más accesible posible. Nuestras fuentes accesibles fuente FS Me está disponible con un conjunto Pro que cubre más de 150 idiomas. Hemos trabajado con grupos medioambientales y de señalización para crear un tipo de letra de orientación del siglo XXI. FS Millbankpara facilitar la navegación en entornos con mucho tráfico.
Una versión anterior de este artículo apareció por primera vez en Net Magazine.
Los archivos web variables fuente están en el horizonte y pronto se abrirá de par en par la flexibilidad de una familia que ya es estándar: fuente . Tanto el diseñador como el desarrollador podrán adaptar el peso y la anchura de los tipos de letra que se utilicen en un sitio y en entornos específicos. Creemos una web más legible con los principios básicos de la tipografía accesible en línea.