13 types de « polices faciles à lire » et trois points à considérer lors de leur choix.

2024/10/29

Sur le site webPolices de caractères faciles à lireLa lisibilité des polices de caractères a un impact significatif sur l'expérience de l'utilisateur dans la conception d'un site web.

En particulier, la pratique du choix et de l'utilisation de polices de caractères appropriées en termes d'accessibilité au web,Il est essentiel de respecter les directives WCAG et de veiller à ce que le site web soit convivial pour tous les utilisateurs.。

Les deux facteurs suivants sont importants pour qu'une police soit lisible

(i) Visibilité.
(ii) Accessibilité.

La visibilité signifie que la taille de la police, l'espacement et le contraste sont appropriés et que le texte est clairement reconnaissable, tandis que l'accessibilité signifie que la police est facile à lire, en particulier pour les utilisateurs malvoyants et les utilisateurs ayant des difficultés de lecture.En choisissant une police qui combine ces deux éléments, les utilisateurs peuvent comprendre facilement le contenu sans se sentir visuellement surchargés.

Dans cet article,13 polices typiques faciles à lire.Les concepteurs et les ingénieurs qui doivent produire un contenu hautement accessible sont invités à lire cet article.

13 polices de caractères faciles à lire qui améliorent l'accessibilité.

Pour améliorer l'accessibilité, le choix des polices de caractères utilisées dans la conception est tout d'abord important,Polices de caractères faciles à lire en termes d'accessibilité.Voici une liste de 13 polices typiques de

◆13 polices de caractères accessibles et faciles à lire

Polices UD : polices de conception universelle (1) à (4)

Voir (1) à (4) (en vert) dans le tableau ci-dessus.Les polices dont le nom contient la mention "UD" sont appelées collectivement "polices UD : polices de conception universelle".

La police UD est,Polices développées pour être faciles à lire pour tous les utilisateurs.En particulier,Le dessin présente des formes de lettres concises et une distinction visuelle facile, en tenant compte des utilisateurs malvoyants et des utilisateurs ayant des difficultés de lecture.。

Les polices UD sont utilisées, par exemple, dans les institutions publiques au Japon, dans la signalisation des gares et dans l'enseignement. Leur polyvalence les rend également efficaces dans la conception de sites web : l'utilisation de polices UD peut améliorer l'accessibilité de l'ensemble d'un site.

Police 1 : UD New Go.

Police UD gothique, très lisible, en particulierInstallations publiques et panneaux d'information au Japon.Il est largement adopté dans divers contextes, notamment

Police (2) UD Marugo

En caractères gothiques ronds pour une impression de douceur,Matériel pour enfants et situations nécessitant une certaine familiarité.Il est utilisé dans les domaines suivants : il est moins exigeant sur le plan visuel et plus facile à reconnaître.

Police (iii) Hiragino UD Mincho.

La police Mincho UD est à la fois élégante et lisible. Elle a été conçue pour les personnes âgées et les malvoyants,Visuellement lisible tout en conservant la beauté de la police MinchoPolice de caractères.

Police 4 : FOT-UD Kakugo.

Les caractères clairs, l'épaisseur des lettres et l'espacement ajustés facilitent la lecture pour tout le monde, en particulier pour les personnes souffrant de déficiences visuelles.Les institutions publiques, les établissements de soins de santé et le secteur de l'éducation.Il est recommandé de les utiliser dans les endroits suivants

Polices faciles à lire autres que les polices UD (⑤-⑬)

Outre les polices UD, il existe un certain nombre d'autres polices très visibles et adaptées à l'accessibilité, bien que ces polices ne soient pas spécifiquement destinées aux utilisateurs souffrant de certains handicaps,Ils ont une excellente visibilité et une grande polyvalence et sont utilisés dans une variété d'environnements numériques et imprimés.

Ces polices, utilisées dans de nombreux sites web et applications, sont un élément fondamental pour rendre le contenu confortable et facile à lire pour tous les utilisateursUtilisé correctement dans le cadre de la conception, il peut améliorer l'expérience utilisateur globale du site.

Police 5 : Yasashisa Gothic.

police gratuiteLa police a la réputation d'être facile à lire, mais très lisible, avec des lignes épaisses et un espace raisonnable entre les lettres, ce qui la rend visuellement moins fatigante,Matériel éducatif et conception de sites web pour les enfantsÉgalement utilisé dans.

Police 6 : Genno Kaku Gothic.

Il s'agit d'une police gothique très lisible, au design simple, mais conçue pour être lisible,Il convient à la conception de sites web et d'applications à l'échelle mondiale, car il est multilingue et japonais.

Police (vii) Noto Sans JP

Comme Genno Kaku Gothic, cette police open source a été développée par Google et se concentre sur la lisibilité du japonais ; elle conserve un design cohérent dans de nombreuses langues, y compris le japonais,Web, applications et matériel impriméIl est largement utilisé dans les domaines suivants

Font (viii) Meirio.

Polices standard à partir de Windows Vista.La police a été développée comme une "police", avec un accent particulier sur la lisibilité à l'écran : l'espacement des lettres est automatiquement ajusté, ce qui améliore grandement la lisibilité à l'écran.Optimisation de l'interface utilisateur des sites web et des logiciels, particulièrement claire et facile à lire sur les écrans.Il est donc excellent en termes d'accessibilité au web.

Police (ix) Arial.

Elle a longtemps été utilisée comme police standard dans Windows et est désormaisPolices de caractères largement utilisées dans le mondeTrès visible,Il est fréquemment utilisé, en particulier dans les médias numériques et imprimés.Elle se caractérise par sa simplicité et est utilisée dans de nombreux médias comme police de caractères facile à lire.

Police 10 Verdana.

Polices de caractères conçues pour être faciles à lire en petite tailleL'espacement entre les caractères est large, ce qui est souvent utilisé dans les contenus web et numériques où une grande visibilité à l'écran et une bonne lisibilité sont requises.

Police (11) Tahoma.

Une police similaire à Arial et Verdana, avec un espacement étroit entre les lettres mais une excellente lisibilité, en particulierLargeur de texte homogène, conçue pour faciliter la lecture, même sur les écrans à espace limité.Voici un résumé des résultats de l'étude.

Font ⑫Dyslexie.

La dyslexie est,Polices de caractères conçues pour les personnes souffrant de troubles de la lecture (dyslexie).Les lettres sont : chaque lettre a une forme unique, ce qui assure la lisibilité en rendant difficile la confusion des lettres.

Font⑬OpenDyslexic.

Comme Dyslexie, il s'agit d'une police de caractères open source conçue pour les personnes souffrant de troubles de la lecture.La partie inférieure des lettres est fortement dessinée, ce qui les rend stables et faciles à lire.Le texte est conçu pour être lu de manière fluide.

Il existe de nombreuses autres polices accessibles et lisibles, notamment les polices UD.Choisir la bonne police de caractères en fonction de l'occasion, du support et des besoins de l'utilisateur.est importante.

La section suivante explique exactement quels types de polices sont "faciles à lire".

La "visibilité" et l'"accessibilité" sont importantes pour la lisibilité des polices de caractères.

La clé des "polices faciles à lire" est la suivanteVisibilité" et "accessibilité".C'est.Les deux sont des concepts importants liés aux polices de caractères, mais avec des connotations différentes.。

visibilité

Qu'est-ce que la visibilité ?La "clarté" et la "lisibilité" du texte.Une police de caractères très visible est une police dont la forme des lettres est claire, qui est facile à lire par n'importe qui et qui peut être reconnue rapidement parce que les lettres sont placées à une distance raisonnable les unes des autres,Les polices qui ne sont ni trop épaisses, ni trop fines et qui ont une forme claire sont très visibles.

Accessibilité

L'accessibilité consiste à déterminer si les polices de caractères et le texte sont accessibles à tous, c'est-à-direEst-il facile à lire et à comprendre pour tout le monde ?se réfère au confort de tous les utilisateurs, y compris les utilisateurs malvoyants, les utilisateurs ayant des difficultés de lecture et les personnes âgées.

Les polices accessibles sont non seulement visibles mais aussi faciles à utiliser pour certains utilisateurs,Il est conçu pour être facilement compatible avec les lecteurs d'écran et autres outils d'assistance.

Combiner visibilité et accessibilité afin que la police soit accessible et facile à lire pour de nombreux utilisateurs.Ces deux éléments sont des considérations essentielles dans la sélection des polices de caractères et ont un impact significatif sur la qualité de la conception d'un site web ou d'un document imprimé.

La section suivante explique quels sont les éléments de police nécessaires pour garantir la visibilité et l'accessibilité.

Deux éléments de base d'une police lisible

Ici,Éléments de base des polices de caractères pour garantir la visibilité et l'accessibilité.Cette section explique les deux principaux facteurs qui sont importants.

Élément 1) Taille de la police.

La taille de la police a un impact significatif sur la facilité de lecture du texte ; un texte trop petit peut fatiguer les yeux, en particulier pour les utilisateurs malvoyants et les personnes âgées.

Généralités,Sur le web, une taille minimale de 16 px (pixels) est recommandée.Voir ci-dessous les différentes tailles de chaque px.

◆Différentes tailles de police sur le web

10px	La taille de la police pour ce texte est de 10px.
12px	La taille de la police pour ce texte est de 12px.
14px	La taille de la police pour ce texte est de 14px.
16px (taille minimale recommandée)	La taille de la police pour ce texte est de 16px.
18px	La taille de la police pour ce texte est de 18px.
20px	La taille de la police pour ce texte est de 20px.

Sur le site web, par exemple,Utilisez des caractères gras de 20 px pour les titres, de 16 px pour le corps du texte, etc.est généralement l'un des facteurs les plus importants en termes de lisibilité, car le choix de la bonne taille de police permet à chacun de bénéficier d'une lisibilité confortable.

Élément (ii) Police de caractères.

Les polices de caractères comprennent principalementDeux types de formes sans empattement et avec empattementIl y en a, par commodité,Gothic et Mincho en polices japonaises.Chaque police de caractères est compatible avec différentes applications et situations.

◆ sans empattement et avec empattement

sans serif	style à empattement

Le corps sans-serif est,Conception simple, sans décoration sur les bords des lettres.En particulier.Pour une grande visibilité dans les environnements numériques et les petites tailleset sont souvent utilisés sur les sites web et les applications mobiles.Dans les écrans, les polices de caractères sans empattement sont couramment utilisées.

Les corps à empattements, en revanche,Il présente de petites décorations (empattements) sur les bords des lettres et convient aux documents imprimés et aux textes longs.Le style à empattement donne une impression de douceur et de rythme tout au long du texte,Souvent utilisé pour des occasions traditionnelles et formellesCependant,La visibilité des petites tailles sur l'écran peut être médiocre.

Lorsqu'il s'agit d'accessibilité dans des environnements numériques tels que les sites web, le sans-serif (gothique) est plus approprié ; cependant, lorsqu'il s'agit de lecture longue et de lisibilité de textes tels que les livres, le design lisse et confortable du sans-serif (mincho) est plus utile.Par exemple, Hiragino UD Mincho est conçu avec des détails Mincho clairs pour garantir l'accessibilité aux personnes souffrant de déficiences visuelles, tout en offrant une apparence agréable et un sentiment de calme.

Ainsi, en fonction du support et de la situation, il est important de choisir une police qui améliore l'accessibilité tout en préservant le ton et l'impression d'ensemble du document, et pas seulement la visibilité.

Trois points clés pour choisir une police de caractères facile à lire en termes d'accessibilité au web.

Dans la section suivante, nous nous concentrerons sur l'accessibilité du web et expliquerons trois points clés sur la manière de choisir ou d'utiliser des polices de caractères faciles à lire.

Point 1 : basé sur les lignes directrices WCAG.

WCAG（Web Content Accessibility Guidelines）は、Des lignes directrices ont été établies pour garantir que le contenu du site web est accessible à tous.Dans le choix des polices de caractères pour l'accessibilité du web,Il est important de respecter les normes définies dans les WCAG。

Par exemple, le rapport de contraste entre les couleurs de l'arrière-plan et celles du texte doit être d'au moins 4,5:1, afin que les utilisateurs souffrant de déficiences visuelles ou de troubles de la vision des couleurs puissent lire clairement le texte.

En outre, l'utilisation de caractères sans empattement (gothiques) est généralement recommandée, car ils sont plus lisibles sur un écran que les caractères avec empattement (ming-cho).

Dans la sélection et l'utilisation des polices de caractères,Le respect des directives WCAG garantit que le site web est facile à utiliser pour tout le monde.Pour plus d'informations sur les WCAG, voir l'article suivant, qui peut être lu conjointement avec le présent article.

Articles connexes :WCAG est une norme internationale d'accessibilité basée sur quatre principes.

Point (ii) Assurer l'évolutivité (extensibilité) de la police de caractères.

Pour l'accessibilité du web, il est important que les polices soient évolutives, c'est-à-dire qu'elles puissent être utilisées dans une variété de formats, y compris : a) pour la première fois, b) pour la première fois, c) pour la première fois et d) pour la première fois,Les utilisateurs doivent pouvoir ajuster la taille du texte en utilisant les paramètres du navigateur et les fonctions d'agrandissement.C'est ce qui est exigé.

Lorsque vous spécifiez la taille de la police dans la construction d'un site web, par exemple en CSS, utilisez les unités relatives "em" et "rem" au lieu de l'unité absolue "px", afin que les utilisateurs puissent modifier librement la taille du texte.

De plus,Polices conçues pour éviter les altérations d'affichage sur différents appareils.sont plus évolutifs - par exemple, un site web bien présenté sur un PC doit pouvoir être visualisé sur un écran plus petit, tel qu'un smartphone ou une tablette, sans que les polices de caractères ne soient déformées ou corrompues.

Point 3) Est-il compatible avec les lecteurs d'écran ?

Utilisé par les utilisateurs malvoyants pour accéder au contenu webPolices de caractères avec un "lecteur d'écran" entièrement fonctionnel.Il est également important de choisir le

Il n'existe cependant aucune spécification claire concernant la prise en charge ou non des lecteurs d'écran dans les polices de caractères,Les polices trop décoratives ou les polices spéciales contenant des symboles ou des pictogrammes peuvent ne pas être reconnues correctement par les lecteurs d'écran.C'est pourquoi,L'utilisation de polices simples, sans empattement ou standard (par exemple Arial, Verdana) réduit le risque de confusion lors de la lecture à haute voix sur des lecteurs d'écran.。

Les lecteurs d'écran peuvent alors fonctionner correctement en utilisant une structure de page appropriée, un balisage HTML ou un texte alternatif, etc. Pour plus d'informations sur les lecteurs d'écran, voir l'article suivant.

Articles connexes :Explication de l'utilisation des lecteurs d'écran et des cinq outils représentatifs

En commençant par des choix de polices tels que ceux-ci,Moyens spécifiques de soutenir l'accessibilité du web sur la base des WCAGPour plus d'informations sur des sujets tels queGuide de mise en œuvre de l'accessibilité du Web", publié par l'Agence numérique.Il est fortement recommandé aux concepteurs et aux ingénieurs d'y jeter un coup d'œil, car elle est résumée en détail dans la section suivante.

Référence :Guide de mise en œuvre de l'accessibilité du web.

Passons maintenant à l'examen des techniques spécifiques permettant d'améliorer la lisibilité des polices de caractères.

Trois techniques pratiques pour améliorer la lisibilité

Il y a un certain nombre de points importants à prendre en compte lors de l'utilisation des polices de caractères : nous présentons ici trois techniques pratiques pour améliorer la lisibilité des polices de caractères et expliquons quelles sont les innovations spécifiques qui peuvent être utiles.

Technique 1 : Réglage de l'interligne et de l'espacement des lettres.

Un réglage correct de l'interligne et de l'espacement des lettres est un élément qui peut améliorer de manière significative la lisibilité du texte.Si l'interligne est trop étroit, le texte sera bloqué, ce qui empêchera l'œil de se déplacer facilement.Cela rend le texte plus lourd et plus difficile à lire pour le lecteur,Si les lignes sont trop larges, le texte perd de sa cohérence et il est difficile de se concentrer sur la lecture.。

Le texte suivant est une police de même taille (Mayrio), dont seuls l'interligne et l'espacement des lettres ont été modifiés.

◆ Différences de lisibilité dues à l'espacement des lignes et des caractères

l'interligne et l'espacement des caractères.appropriéstyle littéraire basé sur le kanji (moderne)	l'interligne et l'espacement des caractères.improprestyle littéraire basé sur le kanji (moderne)

Généralités,Idéalement, l'espacement des lignes devrait être de 1,5 à 2 fois.（Similairement, l'espacement des caractères (crénage) doit être ajusté.Si les lettres sont trop proches les unes des autres, elles apparaissent floues et la visibilité est réduite, en particulier pour les petites tailles de police.Un espacement adéquat entre les lettres contribue à maintenir la lisibilité en établissant des distinctions claires entre les lettres individuelles.

Un espace important entre les lignes et les caractères, ainsi que des sauts de ligne et des retraits appropriés, améliorent encore la police de caractères, la lisibilité et la facilité de lecture du texte.

Technique 2 : Contraste et jeux de couleurs.

Le contraste entre le texte et le fond est un facteur déterminant de la visibilité : un contraste élevé, par exemple une combinaison de texte noir et de fond blanc, est le plus visible et le plus facile à lire pour tout le monde ; inversement,Si les couleurs de l'arrière-plan et du texte sont proches l'une de l'autre, ou dans des combinaisons peu contrastées (par exemple, un texte blanc sur un arrière-plan gris clair), le texte sera difficile à voir et à interpréter.Le contenu de l'affichage peut être difficile à comprendre, en particulier pour les utilisateurs malvoyants ou souffrant d'autres déficiences visuelles.

Voici une comparaison d'images ayant le même ton de couleur mais des rapports de contraste différents,Il est clair que les rapports de contraste élevés sont plus faciles à voir.。

◆ Différences de visibilité en fonction du ratio de contraste

Il est également important de choisir une palette de couleurs qui tienne compte des utilisateurs ayant des problèmes de vision des couleurs, par exemple en évitant les combinaisons de rouge et de vert, et en respectant les directives WCAG,Rapport de contraste de 4,5:1 ou meilleurVeillez à ce que la palette de couleurs reste accessible, car elle contribue à améliorer la lisibilité de la police de caractères.

Un outil appelé "vérificateur de contraste" peut s'avérer efficace pour concevoir un produit tout en maintenant un rapport de contraste approprié.Un vérificateur de contraste utile est décrit dans l'article suivant, qui pourrait vous intéresser.

Articles connexes :Cinq sélecteurs de contraste faciles à utiliser pour les responsables

Technique 3) Cohérence et utilisation des polices de caractères.

La cohérence des polices de caractères sur les sites web et dans les documents imprimés est importante pour une bonne compréhension de l'information par le lecteur.L'utilisation intensive de différentes polices de caractères dans le texte peut entraîner une confusion visuelle et contribuer à rendre le texte difficile à lire.En particulier, l'utilisation de polices de caractères cohérentes pour le contenu principal et les titres facilite la compréhension du flux d'informations et le maintien d'une conception unifiée.

D'autre part, il peut être efficace d'utiliser différentes polices de caractères, par exemple,L'utilisation de polices différentes pour les titres et le corps du texte crée une distinction visuelle et permet aux informations importantes d'attirer plus facilement l'attention.Cependant,Un trop grand nombre de polices de caractères peut réduire la visibilité et nuire à une bonne compréhension.Il est important de faire un choix judicieux.

Maintenant que nous avons abordé en détail la question des polices de caractères accessibles, examinons quelques sites web qui utilisent ces polices.

Trois sites web mettent en pratique les "polices de caractères faciles à lire".

Ici, au moyen de polices de caractères faciles à lire et offrant une excellente visibilité et accessibilité,Trois sites web qui améliorent l'accessibilité globale des sites web.Ces sites sont reconnus pour leur choix de polices de caractères et leur conception accessibles.

Site 1 : Agence numérique.

Le site officiel de l'Agence numérique a été conçu dans un souci d'accessibilité ; la police de caractères est,Elle utilise Noto Sans JP, une police de caractères open source qui tient compte de la visibilité et de l'accessibilité.

En outre, un certain nombre d'améliorations en matière d'accessibilité ont été mises en œuvre, telles que la structure des titres pour les utilisateurs de lecteurs d'écran et la promotion de la lecture à haute voix pour les fichiers PDF, etc. Ces innovations garantissent que même les utilisateurs malvoyants peuvent utiliser le site web confortablement.

◆ Site officiel de l'Agence numérique.

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

Site 2 : Apple

Le site officiel d'Apple, qui met l'accent sur l'accessibilité de ses produits et services, est un excellent exemple de site dont la navigation est considérée comme facile par de nombreux utilisateurs.Des couleurs et des tailles de police appropriées, ainsi que des marges suffisantes.La visibilité et l'accessibilité sont pleinement prises en compte par la

La conception simple et claire, basée sur une palette de couleurs monochromes, un taux de contraste élevé et une police de caractères sans empattement (gothique), fournit des informations sur les produits et l'assistance sous une forme très lisible.

Site officiel d'Apple

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

Site (iii) BBC.

Le site web de la BBC a pris soin de veiller à ce que la police de caractères soit lisible lors de la diffusion des informations.La police utilisée est une police originale appelée "Reith", qui donne une impression fonctionnelle tout en garantissant la lisibilité.

La BBC est également un site web exemplaire en termes d'accessibilité, conformément aux normes WCAG.

◆ Site officiel de la BBC

https://www.bbc.com/

Résumé

La clé du choix d'une police lisible est d'augmenter la visibilité et l'accessibilité en même temps.La haute visibilité permet à chacun de reconnaître immédiatement le texte et d'accéder facilement à l'information, tandis que l'accessibilité permet aux utilisateurs malvoyants, aux personnes ayant des difficultés de lecture ou aux personnes âgées de lire confortablement le texte.

La première chose sur laquelle les concepteurs et les ingénieurs devraient travailler à l'avenir est la suivante,Sélection des polices de caractères selon les directives WCAG.Il est également important de veiller à ce que le texte soit conçu de manière à ce qu'il ne s'effondre pas sur différents appareils.

En plus de cela,Vérification par validation du lecteur d'écran, tests utilisateurs et tests A/B pour voir si les utilisateurs trouvent les polices faciles à lire.et promouvoir des améliorations appropriées.

Il est important que les futurs sites web tiennent compte des choix de polices accessibles afin que tous les utilisateurs puissent utiliser les sites web et les applications confortablement.