Mise à jour de la typographie

Ce document décrit un changement apporté en 2014 à la typographie du thème par défaut « Vector » dans les projets Wikimedia et le logiciel MediaWiki.

Ancienne typographie (en haut) et typographie actualisée (en bas), sous OS X.

Ancienne typographie (en haut) et typographie actualisée (en bas), sous Ubuntu/Firefox.

Résumé des changements

Nous avons conçu cette mise à jour de la typographie par défaut de Wikimedia de manière à respecter les exigences suivantes :

1. Lisibilité : les polices d’écriture doivent être lisibles et belles quelle que soit leur taille. En tant qu’élément, les caractères doivent aider à faire la différence entre l’interface (comme les éléments de navigation sur le site) et le contenu des articles.
2. Cohérence : une expérience visuelle cohérente entre les ordinateurs de bureau et les périphériques mobiles.
3. Disponibilité : toutes les polices que nous utilisons doivent être déjà disponibles (ou rendues disponibles) sur toutes les plateformes où les projets Wikimedia sont présents. Toute sélection de polices doit être faite de sorte qu’en cas d’absence du premier choix de la liste, l’affichage en mode dégradé reste convenable quels que soient l’appareil et la plate-forme (Mac OS X, Windows, Linux, systèmes d’exploitation pour mobiles).
4. Accessibilité : le contenu des projets Wikimedia doit être accessible à tous, y compris aux personnes ayant certains handicaps.

Dans ce contexte, nous avons effectué les modifications suivantes :

Nouvelles polices :

Nous avons défini les familles de polices suivantes : le style des titres a été défini à « Linux Libertine, Georgia, Times, serif ». Le style du corps des articles était initialement défini à « Helvetica Neue, Helvetica, Arial, sans-serif », mais en raisons de problèmes sur les wikis non latins, il a été réinitialisé à « sans-serif » jusqu'à ce qu’une meilleure solution soit trouvée.

Notez que ces listes ne signifient pas que vous verrez toutes ces polices, mais que votre navigateur et votre système d’exploitation sélectionneront la première police déjà installée dans chaque liste (ou pour lesquelles ils ont une règle correspondante) et vont la présenter..

Changement de l’espacement et de la taille des titres, du corps du texte et des interlignes :

Avec la largeur actuelle du texte, les titres doivent ressortir clairement et l’espace entre les lignes doit être suffisant pour permettre une bonne lisibilité sans créer de fatigue visuelle.

• Les titres seront désormais définis de la façon suivante : celui de la page (H1) sera en corps / interligne 1,8 em / 1,3 ; ceux des sections (H2) seront en corps / interligne de 1,4 em / 1,3 ; ceux des sous-sections (H3) seront en corps / interligne de 1,17 em / 1,6 ; ceux des sous-sections plus fines (H4 et H5) seront en corps / interligne de 1 em / 1,6.
• Pour le corps du texte, la taille de corps a été augmentée de 0,8 em à 0,875 em et l’interligne de 1,5 em à 1,6 em. Cela se traduira par des valeurs en pixels légèrement différentes selon votre navigateur et votre système d’exploitation, mais globalement, le résultat sera une légère augmentation de la taille de la police.
• L’interligne des textes positionnés en exposant (sup) et en indice (sub) est maintenant réduit à 1 afin de régler un vieux problème de collision affectant le rendu des numéros des références dans l’écart de séparation des lignes de texte.

Nouvelle couleur du texte :

En triplets hexadécimaux, la couleur du texte est désormais définie à #252525 sur fond #FFFFFF, contre #000000 sur fond #FFFFFF précédemment. En termes moins techniques, cela signifie que la couleur a été modifiée de noir sur fond blanc à gris très foncé sur fond blanc (la couleur des liens, des titres et des autres éléments reste inchangée).

FAQ

Ce qui suit répond à quelques questions clés liées à ce changement.

Qui verra ce changement ?

Tous les utilisateurs des sites basés sur MediaWiki 1.23 qui utilisent l’habillage par défaut Vector, aussi bien les lecteurs que les rédacteurs. Ce changement visait d’abord principalement les lecteurs des wikis de Wikimedia, mais c’est extrêmement minime du point de vue du style. Les utilisateurs qui utilisent leur propres préférences ou qui ont défini un habillage différent dans leurs préférences, comme Monobook ou Cologne Blue, ne verront aucun changement.

Veuillez noter que les utilisateurs qui ont personnalisé leur feuille de style CSS, ou qui passent par une plateforme où les administrateurs ont modifié le CSS de l’ensemble du site, peuvent obtenir un résultat différent d’avec le nouvel affichage par défaut. Merci de lire ce résumé et de parcourir la présente foire aux questions pour voir si un élément particulier de conception visuelle peut être attribué à ce changement de typographie.

Quel était pour commencer le problème avec notre typographie ?

Le texte est l’élément visuel central des projets Wikimedia, que ce soit pour l’encyclopédie Wikipédia ou des projets plus petits comme Wikisource et Wikibooks. Nous voulons que l’apparence visuelle du site donne à nos utilisateurs une sensation de précision, de fiabilité et de clarté, comme c’est le cas avec le contenu qu’ils lisent. Avant cette mise à jour de la typographie, nous avions plus de 20 tailles de police arbitrairement définies rien que pour les ordinateurs de bureau, ce qui ne donnait pas un aspect cohérent à nos utilisateurs. La taille de la police était trop petite pour de nombreux lecteurs et la hauteur des lignes pouvait rendre la lecture de longs textes difficile. Les titres doivent être des points d’entrée dans de longues pages de texte et leur style a été défini en conséquence afin d'améliorer la lisibilité. Nous avons voulu obtenir un meilleur équilibre et une meilleure cohérence pour que les utilisateurs puissent parcourir efficacement la page ou se plonger dans une lecture approfondie.

Les problèmes fonctionnels avec nos anciens styles ont d’abord été résolus par des améliorations de la typographie dans l’interface pour mobiles. Ceci nous a donné l’occasion d’essayer une plus grande taille de police, des interlignes plus grands et des titres avec une police à empattement. Désormais, il est temps de s’attaquer aux problèmes de lisibilité et d’accessibilité dans toutes les langues et sur tous les projets, ainsi que de rendre l’apparence cohérente entre les ordinateurs de bureau, le web mobile et les applications.

Y a-t-il une police idéale qui réponde à nos besoins de lisibilité dans toutes les écritures ? Que pensons-nous qu’elle soit ?

Non, il n’y a aucune police idéale qui allie :

1. l’ubiquité, c’est-à-dire la disponibilité dans tous les systèmes d’exploitation courants (de bureau ou mobiles) ;
2. un rendu correct des glyphes et des diacritiques pour des centaines de caractères non latins, ainsi qu’un bon crénage entre deux caractères, afin que les utilisateurs n’aient pas à cligner les yeux pour les deviner plutôt que les lire ;
3. une hauteur d’x suffisante pour les lettres minuscules (qui sont les caractères les plus fréquents), afin que la police soit lisible même avec une taille réduite, pour les liens de navigation à gauche, les légendes, les conditions de service et les informations secondaires.
4. le hinting, pour améliorer la netteté et réduire les effets d’escalier le long des traits courbes ou obliques lors du rendu des caractères en petit corps sur un support de faible résolution, en particulier sous Windows.

Nous devons prendre une décision pragmatique permettant de satisfaire au mieux ces exigences, dans la limite de nos contraintes. Des millions d’utilisateurs lisent chaque jour Wikipédia sur des appareils variés. Les nouveaux choix de police amélioreront la lisibilité et la cohérence entre les plates-formes, même s’ils ne sont pas parfaits.

Pourquoi augmenter la taille de la police et les interlignes ?

C’est un changement modeste. La taille de police précédente était illisible pour de nombreux utilisateurs. Les retours des utilisateurs nous ont montré que ceux qui avaient des problèmes de vision, même basiques, avaient très souvent besoin d’agrandir le texte. Comme nous nous efforçons de rendre l’information accessible à tous, ce changement nous a semblé être une condition élémentaire pour toute amélioration dans ce domaine. Avec la taille de la police, l’interligne a également été augmenté à 21px, ce qui correspond aux standards typographiques qui sont de 120 % de la taille de la police. Ceci aide les lecteurs qui vont au-delà de l’introduction et lisent de longs paragraphes.

Le texte est l’élément central des pages sur les projets Wikimedia. Pour la plupart des projets linguistiques, le texte est petit et dense selon nos mesures. Bien que cela occupe efficacement la page, le manque d’aération crée une fatigue visuelle lors d’une lecture prolongée. De plus, utiliser une taille inférieure à 14px n’est pas recommandé pour les écritures non latines ou qui utilisent de plus fréquents signes diacritiques (notamment les écritures et alphabets asiatiques). Les mots portent des exposants et des glyphes qui ont tendance à être écrasés et ne peuvent pas être lus sans plisser les yeux.

Pourquoi utilisons-nous des polices à empattement pour les titres ?

Le fait de combiner des polices avec et sans empattement n’est une idée ni rare, ni originale. Nous le faisons, dans ce cas, pour apporter un meilleur contraste et une meilleure distinction entre le corps du texte et les titres. Les titres jouent le rôle de points d’entrée lorsque les utilisateurs lisent la page en diagonale, à la recherche d’informations. Tant les titres que les images jouent un rôle important en cassant la monotonie de la page, ce qui est d’une importance primordiale quand on considère que l’essentiel du contenu de Wikimedia (les pages de contenu et de discussion, les textes d’aide, les règles, etc.) sont assez longs et comportent de nombreuses sections.

Pourquoi avons-nous choisi Linux Libertine, Georgia et Times comme polices à empattement ?

Les titres de section sont le point d’entrée dans l’article. Une police à empattement (« serif ») permet une distinction visuelle avec le corps du texte, ce qui aide l’utilisateur à parcourir la page. Les polices à empattement sont bien connues pour véhiculer un aspect traditionnel qui correspond à nos objectifs de conception.

Linux Libertine n’est pas très répandue, mais c’est une police libre/ouverte bien conçue qui est aussi utilisée dans le logo de Wikipédia. Ceci en fait un élément omniprésent du langage visuel de Wikimédia et rend cette police appropriée pour une utilisation dans les titres. Georgia est une police optimisée pour les navigateurs et les écrans. De plus, elle est largement répandue sur les plates-formes les plus populaires, notamment Windows, Mac OSX et iOS. Linux Libertine et Georgia sont de bonnes polices complémentaires et s’associent bien à Helvetica et Arial. Times est présent pour garantir que les utilisateurs de Linux ont une bonne police à empattement par défaut — les systèmes Linux n’incluent par défaut ni Linux Libertine, ni Georgia. En incluant Times dans la liste, la plupart des utilisateurs verront en fait un substitut libre Nimbus Roman No9 L.

Les langues et les écritures pour lesquels des problèmes ont été reportés avec Georgia ou Times incluent le russe/cyrillique, l’hébreu, l’arabe, le polonais, le chinois, le japonais et le coréen.

Pourquoi avons-nous défini de nouvelles polices sans empattement ?

Auparavant, pour le corps du texte, la seule police spécifiée était « sans-serif », ce qui signifie que le navigateur utilisait sa police sans empattement par défaut. À l’exception d’Helvetica, d’Arial et de Nimbus Sans L, les polices utilisées par la plupart des navigateurs dans ces circonstances n’ont pas un bon rendu des glyphes, des paires et des signes diacritiques en petite taille. Il n’y a pas de police libre/ouverte répondant à ce besoin tout en étant universellement disponible (voir le tableau).

Nous avons choisi Neue Helvetica pour les utilisateurs de Mac, car c’est une version légèrement plus développée de Helvetica où la ponctuation a été améliorée, la hauteur des minuscules est légèrement plus homogène et où, dans certains cas, les traits courbés internes et externes sont plus arrondis. Dans l'ensemble, il s’agit d’une optimisation de Helvetica, bien qu’elle puisse ne pas être aussi idéale dans toutes les écritures.

Nous définissons des polices à la fois pour obtenir une cohérence entre les différents appareils et plates-formes et pour garantir une lisibilité et un rendu appropriés à toutes les tailles pour les écritures latines et non latines. Ces spécifications étant définies, les utilisateurs intéressés peuvent télécharger les polices libres/ouvertes qui ont été testées ou nous signaler les problèmes rencontrés avec les solutions de repli, ce qui nous permettra de résoudre ces problèmes d’une manière plus systématique.

Nous avons, par le passé, expérimenté divers types de polices alternatives qui avaient une licence d’usage libre et gratuite, comme : Arimo, Liberation Sans et d’autres. Mais en définitive, ces polices, n’étaient soit pas habituellement installés par les utilisateurs (ce qui n’avait donc pas d’effet), soit elles étaient affichées de manière incorrecte sur les anciens systèmes ou ceux qui ne prenaient en charge ni l’anticrénelage, ni le hinting.

Pourquoi avons-nous inclus des polices non libres dans la liste des polices ?

La liste comprend des polices telles que Helvetica Neue et Arial, qui sont disponibles sur toutes les principales plates-formes. Bien qu’Arial soit déjà souvent utilisée comme police sans empattement par défaut, nous avons besoin de l’inclure dans la liste afin d’avoir un comportement prévisible en l’absence des autres polices. Pour garantir une expérience fiable aux utilisateurs entre les différentes plates-formes du mieux que nous le pouvons, nous avons décidé d’inclure les polices non libres dans la liste puisque de nombreux systèmes d’exploitation (tels que Windows, MacOS et iOS) n’ont aucune police libre/ouverte installée par défaut. En même temps, de nombreux systèmes d’exploitation vont utiliser une police libre/ouverte (telle que Nimbus Sans L) au lieu de « Helvetica ».

Il est particulièrement important de noter qu’en raison de la façon dont fonctionnent les paramètres CSS qui contrôlent la famille de polices, spécifier une police particulière ne crée pas une dépendance forte à cette police et n’entraîne pas le téléchargement de cette police. Cela signifie que les polices que nous définissons n’apparaissent que si l’utilisateur les a déjà et que le texte de Wikimédia continuera à apparaître, que vous ayez ou non une police donnée.

Pourquoi ne pas utiliser des polices web ?

Les polices web (webfonts) sont un système permettant de fournir une police aux utilisateurs qui ne l’ont pas installée. Ceci implique que le navigateur de l’utilisateur télécharge une police que nous fournissons, ce qui a pour conséquence le chargement de ressources supplémentaires et aurait un effet négatif sur les performances du site (c’est-à-dire la vitesse de chargement des pages). C’est particulièrement le cas pour les navigateurs anciens. À l’avenir, nous essaierons peut-être d’utiliser des polices web, mais pour l’instant cette mise à jour permet d’améliorer la lisibilité et la cohérence sans dégrader le temps de chargement des pages.

Pourquoi avons-nous changé la couleur du corps du texte ?

Les nouvelles valeurs (#252525 sur #FFFFFF) ont un niveau de contraste de 15.3:1, ce qui obtient la note AAA sur les WCAG 2.0 1.4.6. Utiliser du noir pur sur fond blanc à la fois pour le corps du texte et les titres n’est pas recommandé pour plusieurs raisons. Les utilisateurs dyslexiques sont sensibles à la juxtaposition de texte noir sur fond blanc en raison du contraste élevé. Ceci peut provoquer la sensation que les mots tourbillonnent ou se fondent entre eux. Pour les utilisateurs sans problèmes d’accessibilité, la dureté du contraste du noir pur sur blanc pur peut aussi augmenter l’effort visuel requis (par exemple, une rémanence rétinienne augmentée lors du défilement du texte, travail instable de l’iris pour la focalisation ou apparition sur certains écrans de franges colorées qui peuvent détourner l’attention ou freiner la lecture).

Comment ce changement s’est-il déroulé ?

La mise à jour de la typographie a d’abord été testée pendant quatre mois puis a été mise en service pour le web mobile pour tous les projets Wikimedia en octobre 2012. Elle incluait des définitions de polices à empattement pour les titres et sans empattement pour le corps du texte, ainsi qu’une augmentation de la taille du texte et des interlignes.

Ces modifications ont ensuite été amenées sur la version de bureau en tant que fonctionnalité bêta, à partir de novembre 2013. Cette fonctionnalité bêta a passé trois évolutions majeures basées sur les avis de la communauté.

Comment avons-nous obtenu les avis ?

Nombre des changements typographiques ont d’abord été testés en octobre 2012. La plupart des enseignements ont été intégrés à la fonctionnalité bêta « Actualisation de la typographie » pour les ordinateurs de bureau. Celle-ci a été lancée en octobre 2013 et a connu trois révisions majeures. Pendant cette période, la fonctionnalité bêta a été utilisée par plus de 14 000 utilisateurs des 10 plus grandes versions de Wikipédia et plus de 100 fils de discussion ont été créés sur la page de discussion de la fonctionnalité.

Est-ce que je peux choisir de revenir aux polices par défaut ?

Oui. Les utilisateurs des sites Wikimedia connectés grâce à leur compte utilisateur peuvent personnaliser leur feuille de style CSS personnelle (c'est-à-dire Special:MyPage/vector.css sur chaque wiki) pour passer outre tout ou partie des changements. Vous pouvez copier User:Ekips39/typographyrefreshoverride.css dans votre style CSS personnel pour annuler les changements si vous ne souhaitez pas écrire le CSS vous-même. Vous pouvez bien sûr également choisir une autre apparence, dans vos préférences, sous l’onglet Apparence. Enfin, vous pouvez aussi définir la police par défaut que votre navigateur web utilise pour afficher les polices avec empattement (« serif ») et sans empattement (« sans-serif »). Si votre système ne dispose pas des polices spécifiées, les préférences du navigateur seront utilisées à la place.

L’avons-nous testé sur un panel de navigateurs et de systèmes d’exploitation ?

Oui. Le nouvel ensemble de polices a été testé sur les systèmes d’exploitations suivants : Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 et 7, Android et Chrome OS. Le rendu des polices en matière de taille, de graisse et de glyphes ont été testées sur Windows, Ubuntu Linux, Mac OS 10.8, Android et Chrome OS.

Comment les projets non anglophones vont-ils s’adapter à ces changements ?

Par défaut, la mise à jour de la typographie sera appliquée à tous les projets (comme composante de l’habillage Vector). Il est possible que dans certaines langues, il soit nécessaire de redéfinir certains styles pour s’adapter à des écritures particulièrrs. Par exemple, certaines écritures auront peut-être besoin d’un interligne plus grand ou d’une police plus grande. Chaque wiki peut redéfinir ces styles en modifiant la page MediaWiki:Vector.css. Nous encourageons les projets à vérifier les changements apportés par la mise à jour et à redéfinir le CSS seulement lorsque c’est nécessaire pour l’écriture qu’ils utilisent.

Voir aussi les problèmes déjà connus concernant d’autres éditions linguistiques.

Qu’en est-il des écritures non latines ?

La taille de police précédente pour les écritures non latines était de 0,8 em (12,8 px). Ceci écrasait significativement les glyphes et les exposants, tandis que le rendu était trop petit pour la lecture. Les écritures qui ont été examinés sont l’ourdou, le marathe, le malais, le chinois, le coréen et le navajo. L’augmentation de la taille de corps améliorera la lisibilité pour la plupart des écritures. Pour le cas particulier du navajo, le style sera modifié car les paires de caractères ont un rendu étrange avec Helvetica.

Des conseils sur le CSS peuvent être fournis pour être sûr que les versions linguistiques redéfinissent les styles au cas par cas en fonction des besoins. Merci d’utiliser la page de discussion si vous utilisez principalement une écriture non latine et que vous rencontrez des problèmes importants.

Avez vous réalisé quelques expériences contrôlées, par exemple des tests de comparaison A/B ou en double aveugle, pour mesurer l’impact de la la nouvelle typographie ?

Non.

Souvent, nous publions d’abord les nouvelles caractéristiques dans des expériences contrôlées, pour mesurer objectivement leur performance et tester les hypothèses d’impact positif qu’elles pourraient avoir. Dans la version la plus commune (en test A/B ou test en double aveugle), nous sélectionnons aléatoirement un échantillon de lecteurs ou de rédacteurs, nous donnons à une moitié la nouvelle version et nous laissons à l’autre moitié l’ancienne version. Dans ce cas précis, les chercheurs de la Fondation ont recommandé de ne pas réaliser un test A/B ou tout autre type de test contrôlé. Il est peu probable que les changements typographiques mineurs puissent à eux seuls avoir un impact important sur les métriques liées à lecture, telles que le temps passé sur le site, le nombre de pages vues par visiteur, etc., qui sont des données que nous pouvons significativement et précisément mesurer.

Les objectifs liés, comme l’amélioration de la confiance envers les sites de Wikimedia ou de la compréhension lors de la lecture, ne sont pas le type de données que nous pouvons le mieux mesurer de manière quantitative ou que nous pouvons voir largement affectées par des facteurs non liés, comme le contenu de la page et le sujet, le type de page lu (pages de discussion ou articles, par exemple), etc.

Utiliser ces nouvelles polices peut-il ralentir ma navigation sur Wikipédia ?

Non. Nous mesurons l’impact des changements que nous apportons sur les performances, principalement en ce qui concerne la durée de chargement des pages. Si elle s’accroît, nous n’ajoutons rien à la liste des ressources qu’un utilisateur doit télécharger pour visualiser une page, donc les variations de performances seront négligeables.

Références

Liens vers le code

Variables de style en LESS pour l’habillage « Vector » :

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• Ainsi que les fichiers locaux du wiki tels que en:MediaWiki:Vector.css et en:MediaWiki:Common.css

Voir aussi

• https://blog.wikimedia.org/2014/03/27/typography-refresh/