Hyperlegible Sans: una fuente gratuita y de código abierto para un diseño accesible
La evolución centrada en la accesibilidad del Inter de Milán combina formas geométricas modernas con principios de diseño legibles.
he usado Inter de Milán A lo largo de los años. Esta es mi configuración predeterminada en docenas de proyectos y, en mi opinión, representa lo mejor de la tipografía de código abierto. Su geometría limpia, su sólida ingeniería y su ritmo constante lo han convertido en un elemento básico de los sistemas de diseño modernos. Con el tiempo, especialmente cuando desarrollaba productos centrados en la accesibilidad, comencé a notar algunas pequeñas limitaciones. Algunos glifos se vuelven borrosos en tamaños más pequeños, algunos cuencos se sienten apretados en entornos de baja visión y caracteres como I, l y 1 no son lo suficientemente claros para los lectores que dependen de una claridad adicional. Nada de esto disminuye mi respeto por el Inter, sólo resalta áreas donde la accesibilidad podría mejorarse.
Debido a estos problemas de legibilidad, cuando comencé a escribir para alto + clarouna aplicación diseñada para pacientes de Parkinson, recurrí a Atkinson es muy fácil de leer.. Es una de las fuentes de accesibilidad mejor diseñadas, con formas completamente abiertas y formas de glifos inconfundibles que priorizan la claridad. Es excelente para usuarios con baja visión.
Pero extrañé la estética visual, la geometría moderna, el ritmo contemporáneo y la familiaridad del Inter que los diseñadores esperan de la tipografía UI. Admiro la legibilidad de Atkinson y el aspecto general del Inter y siempre he deseado que hubiera una manera de combinar lo mejor de ambos en un solo diseño.
Súper fácil de leer Sans es el resultado. Es una bifurcación de código abierto del Inter de Milán que conserva su carácter moderno al tiempo que incorpora principios de legibilidad inspirados en Atkinson. No pretende reemplazar ninguna fuente, solo brindar otra opción, una que no existía antes.
Qué cambié (y por qué)
La idea detrás de Hyperlegible Sans es simple: mantener intacta la identidad visual del Inter pero reducir la ambigüedad en todas partes. Esto significa realizar ajustes específicos y bien pensados en lugar de volver a dibujar el tipo de letra desde cero.
Estos son los cambios más impactantes:
capital uno
Agregué sutiles barras superior e inferior. Esto lo alinea visualmente con la geometría del Inter de Milán y al mismo tiempo elimina su similitud con la l minúscula y el número 1. Los lectores con baja visión dependen de la desambiguación, y este único cambio mejora enormemente la claridad sin cambiar la sensación general.
l minúscula
Agregué un pequeño estímulo de referencia. Esto evita que se confunda con una letra minúscula y evita la confusión con 1. También proporciona una mayor estabilidad visual en cadenas de interfaz de usuario densas.
cero
Agregué una barra. La barra diagonal cero es más legible para todos. Evita por completo los problemas de O/0, especialmente en interfaces que dependen en gran medida de entradas numéricas o códigos de un solo uso.
O mayúscula
Lo amplié un poco. La O del Inter es equilibrada y elegante, pero demasiado cercana a cero para una interfaz que prioriza la accesibilidad. La forma ligeramente más ancha mejora el reconocimiento manteniendo la estética.
a y e
Abrí dos aberturas. Los travesaños a y e de dos pisos siempre son un poco estrechos para los lectores con baja visión. Activar estas formas las hace más legibles en tamaños pequeños y más resistentes al desenfoque.
No. 8
Ajusté la estructura de la figura 8, reduciendo la simetría y estrechando la relación entre los cuencos superior e inferior. En el Inter de Milán, el 8 es equilibrado y elegante, pero en tamaños pequeños o borrosos, puede colapsar en formas densas y borrosas.
Repensar el espaciado y el kerning para mejorar la accesibilidad
Si bien el espaciado y el kerning de Inter son excelentes para el diseño universal, la accesibilidad requiere un cambio sutil en la filosofía. El hacinamiento puede ser un obstáculo. Cuando los usuarios tienen baja agudeza lectora, algunas combinaciones de letras pueden fusionarse.
Agregué espacio extra de kerning a los pares normalmente colapsados:
- RN, RL, RL.
- fi, fl, pies, tt
- ii, ll, il, li
- este
Estos son pequeños cambios, pero los pequeños cambios pueden tener un gran impacto. La súper legibilidad a menudo se logra mediante una serie de ajustes sutiles que producen mejoras significativas en la claridad.
Las creencias de diseño detrás de este proyecto.
La accesibilidad no debería exigir sacrificar la estética.
Las fuentes no deben verse “especiales” o “diferentes” para ser inclusivas. Una buena tipografía debería adaptarse a todos.
Hyperlegible Sans refleja las creencias que aporto a cada proyecto: El diseño puede ser hermoso y conveniente.
No necesitamos elegir entre geometría moderna y tipografía nítida. Podemos tener ambos.
El diseño está plagado de estas malas decisiones y parte del trabajo es ampliar la gama de herramientas disponibles para que los diseñadores puedan elegir las que mejor se adapten a sus intenciones.
¿Qué sigue para Hyperlegible Sans?
Esta es solo la versión 1. La hoja de ruta incluye:
- peso extra
- Fuente totalmente variable
- puntuación extendida
- Soporte de idiomas más amplio
- Mejoras para modo oscuro y entornos de bajo contraste.
Al igual que el Inter, este proyecto es de código abierto. Estoy subiendo el archivo completo a GitHub junto con la documentación sobre los cambios y una hoja de ruta para futuras versiones.
Mi esperanza es simple: esta fuente se convierta en una herramienta más en el conjunto de herramientas de accesibilidad. Cuando los diseñadores, desarrolladores y equipos de productos de UI necesitan claridad y belleza, cuando quieren una tipografía que refleje cómo debería funcionar el diseño moderno, pueden encontrar algo allí.
No tan hermoso. No más clínico. Más claro, más sencillo y más fácil de usar.
Echa un vistazo a “Hyperlegible Sans” en Github
Hyperlegible Sans: una fuente gratuita y de código abierto para un diseño accesible Publicado originalmente en Colectivo de experiencia de usuario En Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
