Typography refresh/fr

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

Résumé des changements
Nous avons conçu cette mise à jour de la typographie par défaut de Wikimedia avec les exigences suivantes :

Dans ce contexte, nous avons effectué les changements suivants :
 * 1) Lisibilité : les polices d’écriture doivent être lisibles et belles à toutes les tailles. En tant qu’élément, les caractères doivent aider à faire la différence entre interface et contenu.
 * 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 plates-formes 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 Wikimédia doit être accessible à tous, y compris aux personnes handicapées.


 * 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 a été défini à « Arimo, Liberation Sans, Helvetica Neue, Helvetica, Arial, sans-serif ».


 * Notez que cela ne signifie pas que votre navigateur devra télécharger toutes les polices de ces listes, mais qu'il sélectionnera la première police déjà installée dans chaque liste.


 * 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 : 2em/1.8em pour H1 (le titre de la page), 1.6/1.4em pour H2 (les titres de section), 1.4/1.2em pour H3, 1.2/1em pour H4, 1/1em pour H5. Pour le corps du texte, la taille a été augmentée de 0.8em à 0.875em et l'espace entre les lignes de 1.5em à 1.6em. 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'attribut line-height des textes en exposant (sup) est maintenant égal à 0 afin que la présence de numéros de références ne modifie pas l'espace entre les lignes, un problème qui avait été signalé il y a longtemps.


 * Nouvelle couleur du texte : En triplets hexadécimaux, la couleur du texte est désormais définie à  sur fond , contre   sur fond   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 couleurs des liens, des titres et des autres éléments reste inchangée.)

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

Qui verra ce changement ?
Tous les utilisateurs des sites Wikimédia qui utilisent l'habillage par défaut Vector, les lecteurs comme les éditeurs. Les utilisateurs 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 inattendu. Merci de lire ce résumé et de parcourir la présente foire aux questions pour voir si un élément de design particulier peut être attribué à ce changement de typographie.

Quel était le problème avec notre typographie pour commencer ?
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. 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é la chance d'essayer une plus grande taille de police, des interlignes plus grands et des titres avec une police serif. Désormais, il est temps de s'attaquer aux problèmes de lisibilité et d'accessibilité dans toutes les langues et tous les projets, ainsi que de rendre l'apparence cohérence 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 tous les alphabets ? Que pensons-nous qu'elle soit ?
Non, il n'y a aucune police idéale qui allie... Nous devons prendre une décision pragmatique permettant de satisfaire au mieux ces exigences, dans la limite du possible. 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.
 * 1) l'ubiquité, c'est-à-dire la disponibilité dans tous les systèmes d'exploitation courants (bureau ou mobiles).
 * 2) un rendu correct des glyphes, des diacritiques et des centaines de caractères non-latins, ainsi qu'un bon crénage entre deux caractères, afin que les utilisateurs n'aient pas à plisser les yeux pour les lire.
 * 3) une hauteur d'x convenable, 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.
 * hinting : des caractères nets pour les petites tailles de police, en particulier sous Windows.

Pourquoi augmenter la taille de la police et les interlignes ?
This is a small, conservative change. The previous type size was unreadable to many users. We found through user feedback that text zooming was used extensively to make the text more readable for those with even basic vision issues or impairments. Since we endeavor to make the information accessible to all users, this change felt like a basic requirement for any improvement in this area. Along with the type size the leading has also been increased to 21px leading, following typographic standards for leading i.e 120% of the type size. This helps readers who go past the introduction and read long paragraphs.

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 scripts non latins. 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 serif pour les titres ?
Pour un meilleur constraste et une meilleure distinction entre le corps du texte et les titres. Les titres agissent comme un point d'entrée lorsque les utilisateurs parcourent une page. Les titres ajoutent de la diversité visuelle à nos polices. Les titres et les images ont un rôle essentiel, ils cassent la monotonie de la page. Combiner des polices serif et sans serif n'est pas une idée inhabituelle ni originale.

Pourquoi avons-nous choisi les polices serif Linux Libertine, Georgia et Times ?
Les titres de section sont le point d'entrée dans l'article. Une police serif permet une distinction visuelle avec le corps du texte, ce qui aide l'utilisateur à parcourir la page. Serif are also well-known for conveying a traditional demeanor that is in keeping with our design goals.

Linux Libertine is not widely available, but is a well-designed and free/open serif font that is also used in the Wikipedia logo. This makes it a ubiquitous part of the Wikimedia design language, as well as being appropriate for use in headings. Georgia is a font optimized for browsers and screens. It is also widely available on our most popular platforms, including for users of Windows, Mac OSX, and iOS. Linux Libertine and Georgia act as good complementary fonts, and pair well with Helvetica and Arial. Times is set specifically to ensure that users on Linux systems have a good serif by default – Linux systems do not by default include Linux Libertine, nor Georgia. By setting Times, most Linux users will see Nimbus Roman No9 L.

Languages and scripts for which problems have been reported with Georgia or Times include Russian/Cyrillic, Hebrew, Arab, Polish, Chinese, Japanese and Korean.

Pourquoi avons-nous défini de nouvelles polices sans serif ?
The previous state of our body content is that only "sans-serif" was specified, leaving it up to the browser to use its default sans-serif. With the exception of Helvetica, Arial and Nimbus Sans L, the fonts that most browsers use in this condition do not account for proper rendering of glyphs, pairs, and diacritical marks at small sizes. There is no free/open font that addresses this need and is ubiquitously available (see table).

We specify Neue Helvetica for Mac users, as it is a slightly more developed version of Helvetica where punctuation has been improved, the x-height is slightly more consistent, and in some cases it has more rounded bowls and counters. Overall it is an optimization of Helvetica, though it may not be as ideal in all scripts.

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 scripts latins et non latins. 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 rapporter 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.

In the past, we experimented with several alternative fonts that were freely-licensed, including: Arimo, Liberation Sans, and others. Ultimately these fonts are either not commonly installed by users (creating no effect) or they render poorly on older systems or those without font smoothing/hinting.

Pourquoi avons-nous inclus des polices non libres dans la liste des polices ?
The stack specified a range of fonts from Helvetica Neue to Arial that are available across all major platforms. Even though Arial is widely used as a default, we need to specify it so that the CSS degradation is predictable. To ensure a reliable experience to users across platforms as best as we can, we decided to include non-free fonts in the stack since many operating systems (such as Windows, MacOS, and iOS) do not have any FOSS fonts installed by default. Meanwhile many operating systems will use a FOSS font (such as Nimbus Sans L) in place of "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épendence 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 Wikimedia continuera à apparaître, que vous ayez ou non une police donnée.

Pourquoi ne pas utiliser des webfonts ?
Les 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 webfonts, mais pour l'instant cette mise à jour permet d'améliorer la lisibilité et la cohérence sans faire augmenter le temps de chargement des pages.

Pourquoi avons-nous changé la couleur du corps du texte ?
The new values ( on  ) have a contrast ratio of 15.3:1, which is an AAA rating according to WCAG 2.0 1.4.6. Pure black for both body copy and captions is not recommended against white for several reasons. Dyslexic users are sensitive to the juxtaposition of pure black text on a pure white background due to its high contrast. This can cause the words to swirl or blur together. To avoid this, use a slightly off-white color for your background, like a light gray, or decrease the contrast between foreground (text) and background. For users without accessibility issues, the harsh contrast of pure black on pure white can increase eye strain as well.

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 serif pour les titres et sans serif pour le corps du texte, ainsi qu'une augmentation de la taille du texte et des interlignes.

Ces changements ont ensuite été ajoutés à la version standard comme fonctionnalité bêta en novembre 2013. Il y a eu trois révisions majeures de cette fonctionnalité bêta, basées sur les retours de la communauté.

Comment avons-nous obtenu des retours ?
Many of the typography changes were first tested on mobile in October 2012, much of the learning was integrated into the typography beta feature for desktop which was launched October 2013 and went through three major releases. During that time the beta feature was used by over 14,000 users across the top 10 Wikipedias, and more than 100 discussion threads were created on the feature's Talk page.

Est-ce que je peux choisir de revenir aux polices par défaut ?
Yes. It is possible for logged-in users of Wikimedia sites to customize their personal CSS (i.e. Special:MyPage/vector.css on each wiki) to override some or all of the changes. You can copy User:Cathfolant/typographyrefreshoverride.css into your personal CSS if you don't want to learn CSS in order to opt out of the changes. You may also of course choose to switch to another skin entirely, in your Preferences under the Appearance tab. Last but not least, you can define the default font your browser uses to display “serif” and “sans-serif” fonts, if your system does not have any of these specified fonts this browser preference will be used instead.

L'avons-nous testé sur un panel de navigateurs et de systèmes d'exploitation ?
Yes. The new font stack was tested on the following operating systems: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 and 7, Android, and Chrome OS. Size, leading, glyphs, hinting and font renders were tested on Windows, Ubuntu Linux, Mac OS X 10.8, Android, and Chrome OS.

Comment les projets non-anglophones s'adapteront à 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 scripts particuliers. Par exemple, certains scripts auront peut-être besoin d'un interligne plus grand ou d'une police plus grande. Chaque wiki peut redéfinir ces styles en éditant 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 le script qu'ils utilisent.

À voir aussi : problèmes connus concernant les autres versions linguistiques.

Qu'en est-il des scripts non latins ?
The old type size in non-Latin scripts was 0.8em (12.8px). This squashes glyphs and superscripts significantly along with the type being too small to read. Scripts examined were Urdu, Marathi, Bahasa Melayu, Chinese, Korean, Navajo. The body copy type size increase will improve readability for most scripts. Specifically for Navajo, an override will be provided because character pairs render strangely in 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 un script non latin et que vous rencontrez des problèmes importants.

Did you run any controlled experiments e.g. A/B or split tests to measure impact of the new typography?
No.

We often first launch new features in controlled experiments, to objectively measure their performance and test hypotheses about positive impact they might have. In the most common version (an A/B or split test) we randomly select a sample of readers or editors, give half the new version, and give half no new experience. In this case, Foundation research scientists advised against running any A/B tests or other controlled experiments. It is unlikely that minor typography changes alone would make a large impact on reading-related metrics like time on site, number of page views per visitor etc., which could be measured with confidence.

Related goals, like enhanced trust in Wikimedia sites or comprehension in reading, are not the kind of data we can best learn about on a quantitative basis, or which are also largely impacted by unrelated factors like the page content and subject, what type of page is being read (Talk versus articles, for example), and more.

Can using these new fonts cause Wikipedia to be slower for me?
No. We typically measure the site performance impact of a new feature, meaning whether it makes pages take longer to load. In this case, we are not adding to the list of resources that a user must download to view a page, so any change in performance will be negligible.

Liens vers le code

 * Vector style variables in LESS:
 * Plus local wiki files such as en:MediaWiki:Vector.css and en:MediaWiki:Common.css
 * Plus local wiki files such as en:MediaWiki:Vector.css and en:MediaWiki:Common.css
 * Plus local wiki files such as en:MediaWiki:Vector.css and en:MediaWiki:Common.css