13 tipos de 'fuentes legibles' y tres puntos para elegir

2024/10/29

En un sitio webUna 'fuente legible'Es un punto crucial para que un sitio sea cómodo de usar para muchas personas. La legibilidad de la fuente tiene un gran impacto en la experiencia del usuario en el diseño web.

la práctica de elegir y usar fuentes adecuadas, especialmente desde la perspectiva de la accesibilidad web, esson esenciales para cumplir con las pautas WCAG y crear un sitio web que sea accesible para todos los usuarios.。

Para que una fuente sea legible, hay dos elementos importantes:

①Visibilidad
② Accesibilidad

La visibilidad se refiere a que el tamaño de la fuente, el interletraje y el contraste son adecuados y las letras son claramente reconocibles, mientras que la accesibilidad significa si la fuente es legible para usuarios con discapacidades visuales o dislexia.Al elegir fuentes que combinan estos dos elementos, los usuarios pueden entender el contenido sin sentir una carga visual.

En este artículo,Una lista de 13 fuentes legibles representativas.Presentaremos las características y criterios para elegir fuentes legibles, así como métodos concretos para mejorar la accesibilidad web. Los diseñadores e ingenieros que buscan crear contenido altamente accesible deberían leer esto.

13 fuentes legibles que mejoran la accesibilidad.

En la mejora de la accesibilidad, elegir la fuente utilizada en el diseño es importante. Primero,Fuentes legibles desde la perspectiva de la accesibilidad.presentaremos 13 fuentes representativas sobre este tema.

◆13 tipos de fuentes accesibles y legibles

UD Fonts: Fuentes de Diseño Universal (①〜④)

Por favor, mire la tabla anterior, puntos ① a ④ (la parte verde).Las fuentes que contienen 'UD' en sus nombres se denominan colectivamente 'UD Fonts: Fuentes de Diseño Universal'.

La fuente UD es,Son fuentes desarrolladas con el objetivo de ser legibles para todos los usuarios.Esto es especialmente cierto,Está diseñada teniendo en cuenta a los usuarios con discapacidades visuales y dislexia, caracterizada por formas de letras simples y un diseño que facilita la distinción visual.。

La fuente UD, por ejemplo, se utiliza en señales de estaciones y en la educación en instituciones públicas en Japón, y su alta versatilidad también se refleja en el diseño web. Usar fuentes UD mejora la accesibilidad en todo el sitio.

Fuente ① UD Shin Go.

La fuente UD en estilo gótico es altamente legible, especialmenteInstalaciones públicas y señales en Japón.y se utiliza ampliamente en diversas situaciones.

Fuente② UD Maru Go

Es una fuente en estilo gótico redondeado que da una impresión suave.Materiales educativos para niños o situaciones donde se requiere un enfoque amigable.se utilizan. Se caracterizan por tener una carga visual baja y ser fácilmente reconocibles.

Fuente③ Hiragino UD Mincho

Es una fuente UD de tipo Mincho que combina elegancia y visibilidad. También está diseñada pensando en las personas mayores y en aquellas con discapacidades visuales.Manteniendo la belleza de la fuente Mincho, es visualmente legible.Es una fuente.

Fuente④ FOT-UD Kakugo

la forma de las letras es clara, y el grosor y el espaciado de las letras están ajustados, lo que lo hace fácil de leer para todos. Incluso para personas que pueden experimentar una carga visual, pueden leerlo sin dificultad, especialmenteen instituciones públicas, entornos médicos y en el ámbito educativoSe recomienda su uso en diversos entornos.

Fuentes legibles además de las fuentes UD (⑤〜⑬).

hay muchas fuentes además de la fuente UD que son altamente visibles y consideradas para la accesibilidad. Aunque estas fuentes no están diseñadas específicamente para usuarios con ciertas discapacidades,Son altamente visibles y versátiles, utilizadas en diversos entornos digitales y en impresiones.

Estas fuentes, utilizadas en muchos sitios web y aplicaciones, son elementos básicos para que todos los usuarios puedan leer el contenido cómodamente.. Si se utilizan de manera adecuada como parte del diseño, se puede mejorar la UX del sitio en su conjunto.

Fuente⑤ Yasashisa Gothic

Fuentes libresEs una fuente conocida por ser muy legible. Tiene líneas un poco más gruesas y el espacio entre letras es adecuado, lo que la hace menos fatigante visualmente. A pesar de ser fácil de leer, también tiene una impresión casual, lo que permite queMateriales educativos y diseño web para niñostambién se utiliza en.

Fuente⑥ Genno Kaku Gothic

es una fuente de código abierto desarrollada conjuntamente por Adobe y Google, que es una sans-serif muy legible. Su diseño es simple pero busca la legibilidad,Es adecuado no sólo para el japonés, sino también para aplicaciones y diseño web global que admiten múltiples idiomas.

Fuente ⑦ Noto Sans JP

Al igual que el '源ノ角ゴシック', es una fuente de código abierto desarrollada por Google que enfatiza la legibilidad del japonés. Se mantiene un diseño consistente en muchos idiomas que incluyen el japonés,Web, aplicaciones e impresionesy se usa ampliamente en varios ámbitos.

Fuente⑧Meiryo

Fuentes estándar desde Windows Vista en adelante.Es una fuente desarrollada con un enfoque particular en la legibilidad en pantalla. El espaciado entre caracteres se ajusta automáticamente, lo que mejora significativamente la legibilidad en pantallas.Está optimizado para sitios web y la interfaz de usuario del software, especialmente la presentación en monitores que es clara y fácil de leerpor lo que es también excelente desde la perspectiva de la accesibilidad web.

Fuente ⑨ Arial

ya que ha sido utilizado durante mucho tiempo como la fuente estándar de Windows,fuentes ampliamente utilizadas en todo el mundo.destaca por su alta visibilidad,Se utilizan con frecuencia, especialmente en medios digitales y materiales impresos.Se caracteriza por un diseño sencillo, y se utiliza en muchos medios como una fuente que prioriza la legibilidad.

Fuente ⑩ Verdana

fuentes diseñadas para ser legibles incluso a tamaños pequeños.La separación entre caracteres está bastante ampliada, lo que mejora la legibilidad en pantalla y se usa comúnmente en sitios web y contenidos digitales donde se requiere claridad.

la fuente⑪Tahoma

Es una fuente similar a Arial y Verdana, con un espaciado de letras estrecho que destaca por su visibilidad y legibilidad. En particular,El ancho de las letras es uniforme, por lo que son fácilmente legibles incluso en pantallas con espacio de visualización limitado.Se considera.

la fuente⑫Dyslexie

Dyslexie es unafuente diseñada para personas con dislexia (dificultades de lectura)se entrega una legibilidad única al tener formas distintivas en cada letra, lo que evita confusiones.

Fuente⑬OpenDyslexic

Es una fuente de código abierto diseñada para personas con dislexia, al igual que Dyslexie.El diseño está enfocado en que la parte inferior de las letras sea más pesada, lo que resulta en letras que son estables y fáciles de ver., lo que facilita la lectura del texto.

Además de las fuentes mencionadas, incluidas las fuentes UD, hay muchas otras fuentes accesibles y legibles.Es importante elegir la fuente adecuada según el contexto, el medio y las necesidades del usuario.es importante.

A continuación, explicaremos con detalle qué tipo de fuente se considera una 'fuente legible'.

La 'visibilidad' y 'accesibilidad' son importantes para fuentes legibles.

Lo importante en 'fuentes legibles' es‘Visibilidad’ y ‘Accesibilidad’.Ambos son conceptos importantes relacionados con las fuentes, pero su significado es diferente.。

Visibilidad

La visibilidad es,se refiere a cuán 'claramente se ven' y 'son legibles' las letras.Se refiere a que las fuentes con alta visibilidad tienen formas de letras claras, son legibles por cualquiera y las letras están dispuestas a una distancia adecuada, lo que permite su rápida identificación. En general,Las fuentes que no son ni demasiado gruesas ni demasiado delgadas, y tienen formas definidas son excelentes en visibilidad.

accesibilidad

la accesibilidad se refiere a que las fuentes o textos sean accesibles para todos, es decir, Ya sea 'fácil de leer y entender para todos'se refiere a ello. El objetivo es que todos los usuarios, incluidos aquellos con discapacidades visuales, dislexia y los ancianos, puedan utilizarlo cómodamente.

Las fuentes con alta accesibilidad no solo son visibles, sino también fáciles de usar para ciertos usuarios.Están diseñados para ser compatibles con herramientas de asistencia como los lectores de pantalla.

Al equilibrar la legibilidad y la accesibilidad, se convierte en una fuente que es accesible y fácil de leer para muchos usuarios.Ambos son consideraciones centrales a la hora de elegir fuentes, y pueden influir considerablemente en la calidad del diseño web y de los materiales impresos.

A continuación, se explicarán los elementos de fuente necesarios para garantizar la visibilidad y accesibilidad.

Los dos elementos básicos de una fuente legible

Aquí,Elementos básicos de la fuente para garantizar la visibilidad y accesibilidad.explicaré sobre esto. Hay dos elementos clave que son importantes.

Elemento ① Tamaño de la fuente

El tamaño de la fuente influye en gran medida en cuán legible es el texto. Un texto demasiado pequeño puede resultar cansado para los ojos, y es un gran obstáculo especialmente para usuarios con baja visión o ancianos.

En general,Se recomienda un tamaño de al menos 16px en la web.está establecido como una norma básica para asegurar la legibilidad. Consulte a continuación las diferencias en el tamaño de cada px.

◆ las diferencias en el tamaño de la fuente en la web

10px	El tamaño de la fuente de este texto es 10px.
12px	El tamaño de la fuente de este texto es 12px.
14px	El tamaño de la fuente de este texto es 14px.
16px (tamaño mínimo recomendado)	El tamaño de la fuente en este texto es de 16 px.
18px	El tamaño de la fuente en este texto es de 18 px.
20px	El tamaño de la fuente de este texto es de 20px.

En sitios web, por ejemplo,Distinción de que los encabezados son en negrita de 20px y el texto en 16px.es común. Elegir un tamaño de fuente adecuado es uno de los factores más importantes en términos de visibilidad, ya que permite ofrecer una lectura cómoda para todos.

Elemento② Tipografía

Las tipografías de las fuentes se dividen principalmente endos tipos, tipografías sans-serif y serifHay eso. Para comodidad,las fuentes góticas y mincho en fuentes japonesasSe puede interpretar así. Cada tipo de letra tiene una afinidad en diferentes usos y situaciones.

◆ Fuentes Sans Serif y Serif

Fuente Sans Serif	Serifas

Las fuentes Sans Serif sonSe caracteriza por un diseño simple sin decoraciones en los bordes de las letras.Esto es especialmente cierto.Debido a que tienen una alta visibilidad en entornos digitales y en tamaños pequeñosson comúnmente usados en sitios web y aplicaciones móviles.En la visualización en pantalla, es común usar fuentes Sans Serif.

Por otro lado, las fuentes con serifas son,las letras tienen pequeñas decoraciones (serifas) en los extremos, lo que las hace adecuadas para impresos y textos largos.Las fuentes Serif dan una impresión suave y rítmica al texto en su totalidad.se utilizan mucho en contextos tradicionales y formales.Sin embargo,Puede haber casos en los que la visibilidad en tamaños pequeños no sea óptima en la pantalla.

Cuando se considera la accesibilidad en entornos digitales como sitios web, las fuentes Sans Serif (Gothic) son más adecuadas. Sin embargo, en relación con la legibilidad y la lectura prolongada en libros, el diseño suave y agradable de las serifas (Mincho) es útil.Fuentes como 'Hiragino UD Mincho', están diseñadas con detalles claramente definidos para personas con discapacidades visuales, garantizando accesibilidad, además de ofrecer belleza estética y una impresión de calmado.

De esta manera, es importante elegir fuentes que no solo mejoren la visibilidad, sino que también mantengan el tono y la impresión general del documento, según el medio o la situación.

tres puntos sobre cómo elegir fuentes que sean legibles desde la perspectiva de la accesibilidad web

A continuación, abordaremos tres puntos sobre cómo elegir y usar fuentes legibles desde la perspectiva de la accesibilidad web.

Punto① Basado en las directrices WCAG

WCAG (Directrices de Accesibilidad para el Contenido Web) sonDirectrices establecidas para asegurar que el contenido web sea accesible para todos.En la elección de fuentes para la accesibilidad web,important to comply with the standards set by WCAG.。

Como ejemplo de directrices, se requiere que la relación de contraste entre el fondo y el color del texto sea de 4.5:1 o más. Esto permite que los usuarios con discapacidades visuales o características del color puedan leer claramente el texto.

Además, en general se recomienda el uso de sans-serif (gótica), ya que es más legible en una pantalla que serif (ming-cho).

En la elección y uso de fuentes,Al cumplir con estas pautas de WCAG, se puede lograr un sitio web que sea fácil de usar para todos.Para más detalles sobre WCAG, se ha resumido en el siguiente artículo, así que por favor también revíselo junto con este artículo.

Artículos relacionados:Las WCAG son estándares internacionales de accesibilidad basados en cuatro principios.

Punto ② Asegurar la escalabilidad de la fuente.

Para mejorar la accesibilidad web, es importante que las fuentes sean escalables. Es decir, que los usuarios puedan ajustar el tamaño del texto utilizando la configuración del navegador o las funciones de zoom.se requiere.

Al construir un sitio web, al especificar el tamaño de la fuente en CSS y otros, es recomendable usar unidades relativas como 'em' o 'rem' en lugar de la unidad absoluta 'px', lo que permite a los usuarios cambiar el tamaño del texto según su preferencia.

Además,se les ha diseñado fuentes que no presentan problemas de visualización en diferentes dispositivos.Se puede afirmar que, tiene una mayor escalabilidad. Por ejemplo, al ver un sitio web que está ordenadamente diseñado en una PC en una pantalla más pequeña como un teléfono inteligente o una tableta, es necesario que las fuentes se muestren sin distorsión o descomposición.

Punto ③ ¿Es compatible con lectores de pantalla?

los usuarios con discapacidades visuales utilizan para acceder al contenido web.Una fuente que funcione adecuadamente con 'lectores de pantalla'Elegir también es importante.

En cuanto a las fuentes, no hay especificaciones claras sobre su compatibilidad o no con lectores de pantalla, peroLas fuentes excesivamente decorativas o las fuentes especiales que contienen símbolos o emojis pueden no ser reconocidas correctamente por los lectores de pantalla.Por lo tanto,Utilizar fuentes Sans Serif simples o fuentes estándar (como Arial, Verdana, etc.) puede reducir el riesgo de confusión en la lectura con lectores de pantalla.。

Además, al utilizar una estructura de página adecuada, etiquetado HTML correcto y textos alternativos, se garantiza que los lectores de pantalla funcionen correctamente. Para más información sobre los lectores de pantalla, consulte el siguiente artículo.

Artículos relacionados:Explicamos cómo utilizar lectores de pantalla y cinco herramientas representativas

Comenzando con cómo elegir fuentes como estas,Métodos específicos de accesibilidad web basados en WCAGSobre ello, consulte a continuación:Guía de Introducción a la Accesibilidad Web (publicada por la Agencia Digital)está resumido en detalle, por lo que se recomienda encarecidamente a los diseñadores e ingenieros que lo revisen.

Referencia:Guía de Introducción a la Accesibilidad Web

Ahora, explicaremos técnicas específicas para mejorar la legibilidad de las fuentes.

Tres técnicas prácticas para mejorar la legibilidad

Al utilizar fuentes en la práctica, es crucial tener en cuenta varios puntos importantes. Aquí se presentan tres técnicas prácticas para mejorar la legibilidad de las fuentes y se explica específicamente qué medidas son eficaces.

Técnica ① Ajuste del interlineado y espaciado entre letras

El ajuste adecuado del interlineado y del espaciado de letras es un factor que mejora significativamente la legibilidad del texto.Si el interlineado es demasiado estrecho, las letras se amontonan y es difícil mover la vista suavemente.Como resultado, esto puede aumentar la carga sobre los lectores y dificultar la lectura. Por el contrario,Si el interlineado es demasiado amplio, se pierde la coherencia del texto y se vuelve difícil concentrarse en la lectura.。

A continuación se presenta un texto con la misma fuente de tamaño (Meirio), en el que solo se ha cambiado el interlineado y el espaciado entre letras.

◆ Diferencias en la legibilidad debido al interlineado y el kerning.

El interlineado y el espaciado entre letrasAdecuadouna oración	El interlineado y el espaciado entre letrasInapropiadouna oración

En general,Un interlineado de entre 1.5 y 2 veces es ideal.(La figura de arriba a la izquierda tiene un interlineado de 1.5 veces) y está configurado para que el texto no esté abarrotado y sea cómodo de leer. De manera similar, también es necesario ajustar el espaciado de letras (kerning).Si las letras están demasiado cerca entre sí, se verán mezcladas, y la visibilidad disminuirá especialmente en tamaños de fuente pequeños.Un interletraje adecuado ayuda a aclarar la distinción entre letras y mantiene la legibilidad.

Al mantener un margen en el interlineado y el espaciado de letras, y al aplicar saltos de línea e indentaciones adecuadas, se eleva aún más la legibilidad de la fuente y del texto.

Técnica②Contraste y combinación de colores

El contraste entre el texto y el fondo es un factor que influye enormemente en la visibilidad. Un alto contraste, como combinación de texto negro sobre un fondo blanco, es el más visible y fácil de leer para todos. Por el contrario,cuando el color de fondo y el color del texto son similares, o cuando hay combinaciones de bajo contraste (por ejemplo, texto blanco sobre fondo gris claro), se hace difícil ver las letras.Esto puede dificultar la comprensión del contenido mostrado, especialmente para usuarios con baja visión u otras limitaciones visuales.

A continuación, se presentan imágenes con el mismo tono de color comparadas en diferentes relaciones de contraste.es evidente que aquellos con alto contraste son más visibles。

◆Diferencias en la visibilidad según la relación de contraste

la elección de combinaciones de colores que consideren las características de percepción del color también es importante. Se deben evitar combinaciones como rojo y verde y seguir las pautas de WCAG.una relación de contraste de 4.5:1 o másasegúrese de mantener. Que toda la paleta de colores sea accesible es un factor que mejora la legibilidad de la fuente.

Al diseñar manteniendo un adecuado contraste, es eficiente utilizar una herramienta llamada 'Contrast Checker'.Hemos presentado un útil verificómetro de contraste en el siguiente artículo, así que si está interesado, no dude en echar un vistazo.

Artículos relacionados:Cinco 'contrast checkers' fáciles de usar para responsables

Técnica③ Consistencia y diferenciación de fuentes

Mantener la coherencia de las fuentes en sitios web y materiales impresos es crucial para que los lectores comprendan la información de manera fluida.El uso excesivo de diferentes fuentes en todo el texto puede causar confusión visual y ser una de las razones por las que el texto se vuelve difícil de leer.Particularmente, el uso de una fuente consistente para el contenido principal y los encabezados hace que el flujo de información sea claro y ayuda a mantener un diseño coherente.

Por otro lado, en algunos casos puede ser efectivo utilizar diferentes fuentes. Por ejemplo,Al usar diferentes fuentes para los encabezados y el cuerpo del texto, se establece una distinción visual, lo que facilita que la información importante llame la atención.Sin embargo,usar demasiadas fuentes puede reducir la visibilidad y obstaculizar una comprensión fluida.Es importante hacer la selección con cuidado.

Hasta aquí hemos explicado en detalle sobre fuentes legibles. A continuación, presentaremos algunos sitios web que realmente utilizan tales fuentes accesibles.

Tres sitios web que implementan 'fuentes legibles'.

Aquí, se destaca cómo las fuentes legibles, que son óptimas para la visibilidad y la accesibilidad, mejorantres sitios web que están mejorando la accesibilidad web de todo el sitio.se presentan aquí. Estos sitios son reconocidos por la elección de fuentes accesibles y su diseño.

el sitio①Gobierno Digital

El sitio web oficial de la Oficina Digital adopta un diseño centrado en la accesibilidad. La fuente es,Se utiliza la fuente de código abierto 'Noto Sans JP', que considera la visibilidad y accesibilidad.

Además, se han implementado muchas mejoras de accesibilidad, como estructurar los encabezados para usuarios de lectores de pantalla y avanzar en la compatibilidad de lectura de archivos PDF. Estas medidas permiten que las personas con discapacidad visual puedan utilizarlos cómodamente.

◆ el sitio web oficial del Gobierno Digital

https://www.digital.go.jp/

Sitio②Apple

El sitio web oficial de Apple, que prioriza la accesibilidad en sus productos y servicios, es un buen ejemplo de un sitio altamente valorado por ser legible para muchos usuarios.una combinación adecuada de colores y tamaño de fuente, además de un amplio espacio en blanco.se consideran adecuadamente la legibilidad y la accesibilidad.

Presenta un diseño simple y claro basado en una combinación de colores en blanco y negro con alto contraste, utilizando fuentes sans-serif (góticas), y proporciona información sobre productos y soporte de manera muy legible.

◆El sitio web oficial de Apple

https://support.apple.com/ja-jp/accessibility

Sitio③BBC

El sitio web de la BBC presta especial atención a la legibilidad de la fuente al proporcionar contenido de noticias.La fuente utilizada es una fuente original llamada 'Reith', que proporciona una impresión formal mientras asegura legibilidad y claridad.

que también cuenta con funciones para ajustar el contraste de fuente y el tamaño de la misma, creando un entorno cómodo para los usuarios. Además, la BBC se destaca como un sitio web ejemplar por su cumplimiento con los estándares de accesibilidad WCAG.

◆El sitio web oficial de la BBC

https://www.bbc.com/

Resumen

Un punto importante al elegir fuentes legibles es aumentar simultáneamente la 'visibilidad' y la 'accesibilidad'.Si la visibilidad es alta, cualquiera puede reconocer rápidamente las letras y acceder a la información sin problemas. Por otro lado, si se garantiza la accesibilidad, los usuarios con limitaciones visuales, aquellos con discapacidades de lectura o incluso los ancianos pueden leer el texto cómodamente.

Lo que los diseñadores y los ingenieros deben abordar a partir de ahora es, primero,Elección de fuentes basada en las pautas de WCAGson aspectos a destacar. Al considerar la relación de contraste y el tamaño de la fuente, se puede reducir la carga visual para los usuarios. Además, es importante diseñar para que el texto no se distorsione en diferentes dispositivos.

Sobre eso,A través de la verificación con lectores de pantalla, pruebas de usuario y pruebas A/B, se verifica cuánto consideran los usuarios que las fuentes son legibles.y se requiere avanzar con las mejoras adecuadas.

Es importante que los futuros sitios web consideren la elección de fuentes accesibles que permitan a todos los usuarios navegar cómodamente por el sitio y las aplicaciones.