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 plate-formes où les projets Wikimedia sont présents. Toute sélection doit continuer de fonctionner correctement, quelle que soit la plate-forme (OS X, Windows, Linux, plate-formes 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.)


 * Contenu préformaté : Lorsqu'un long contenu  est présent, une barre de défilement horizontale sera affichée pour ce contenu plutôt que pour la page entière.

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 Vector par défaut, les lecteurs comme les éditeurs. Les utilisateurs qui ont personnalisé leurs préférences d'affichage ou utilisent un habillage alternatif 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 avant de vérifier qu'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 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. À propos des titres, ils 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... We have to make a practical decision based on what comes close to meeting all these requirements, within our constraints. Millions of users read Wikipedia on different devices every day. The current font selections will bring improved readability and consistency across platforms, even if they're not perfect.
 * 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.

The body copy is the focus of pages on Wikimedia projects. For most language projects the text size is small and dense with our current measure. The lack of airiness lends some efficiency but creates eye fatigue with extended reading. Also, under 14px is not recommended for non-Latin scripts. Words carry superscripts and glyphs which tend to get squashed and cannot be deciphered without squinting.

Pourquoi utilisons-nous des polices serif pour les titres ?
For better contrast and distinction between body and headings. Headings act as entry points when users are scanning a page. Headings add some visual diversity to our font stack. Both headings and images play the important role of breaking up the monotony of the page. Combining serif and sans-serif is not an unusual or original idea.

Pourquoi avons-nous choisi les polices serif Linux Libertine, Georgia et Times ?
Section titles are entry points into the article. A serif font provides visual differentiation and character compared to the body copy, which helps a user scan the 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 acts 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.

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, 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).

Of all the free/open options, the closely-related fonts of Liberation Sans and Arimo had the best display characteristics (strong x-height and works well for readability at all sizes). The letterforms closely resemble Helvetica and Arial so it provides for a consistent experience. Arimo had the best technical compliance (accurate rendering of obscure Unicode features), but is only installed by default in ChromeOS. Liberation Sans has a respectable amount of ubiquity and it is produced by Red Hat who can help us with addressing rendering issues. We specified 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.

We specify fonts both to achieve consistency across devices and platforms and to guarantee appropriate readability and rendering at small sizes for Latin and non-Latin scripts alike. With the specifications in place, users who are interested can download the free/open fonts that have been tested or report issues to us for the fallback cases, which will allow us to address issues in a more systematic manner.

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 there 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.

It is particularly important to note that, because of the way CSS font-family settings work, specifying a particular font does not create a hard dependency on that font, nor does it cause the user to download that font. This means that fonts we specify only appear if the user has them already, and Wikimedia text will continue to appear regardless of whether you have a particular font or not.

Pourquo ne pas utiliser des webfonts ?
Webfonts is a system to deliver a font to users who do not have it installed. This involves having a user's browser download a font we provide, which causes additional resources to load and would have a negative impact on site performance (i.e. how fast pages load). This is particularly true for older browsers. In the future we may explore using webfonts, but for now this update provides greater readability and consistency while not degrading page load times.

Pourquoi avons-nous changé la couleur du corps du texte ?
The new values ( on  ) have a contrast ratio of 15.3:1, which is a 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é ?
This typography update was first tested for four months, and then released on mobile web for all Wikimedia projects in October 2012. These included font stack declarations for serif headings and sans serif body copy, as well as increased type size and leading for body copy and captions.

These changes were later brought into desktop as a beta feature, starting in November 2013. This beta feature then went through three major iterations based on community feedback.

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 the time the beta feaure 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 ?
Oui. Les utilisateurs des sites Wikimédia connectés grâce à leur compte utilisateur peuvent personnaliser leur propre feuille de style CSS (c'est-à-dire Special:MyPage/common.css ou Special:MyPage/vector.css de chaque wiki) pour passer outre tout ou partie des changements. Vous pouvez aussi définir la police par défaut que votre navigateur internet utilise pour afficher les polices "serif" et "non-serif". Si votre système ne dispose pas de ces polices, 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 OSX 10.8, 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 s'adapteront à ces changements ?
By default, the typography update will be applied to all projects (as part of the Vector skin). There may be languages that need to override some of these styles to accommodate particular scripts. For example, some scripts may need a taller line height or larger font size. Each wiki can override these particular styles by editing their MediaWiki:Vector.css page. We encourage other projects to audit the changes introduced by the update, and override the CSS only where necessary based on their script.

Also see the issues that we are already aware of regarding other language projects.

Qu'en est-il des scripts non latins ?
The old type size in non-Latin scripts was 0.8em (12.8 px). 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.

Inline CSS guidance can be provided to ensure that languages make overrides on a case-by-case basis as needed. Please comment on the Talk page if you primarily use a non-Latin script and encounter significant problems.

Code links

 * Old/Current:
 * (mediawiki/core.git) / skins / vector / variables.less
 * (mediawiki/core.git) / skins / vector / components / common.less
 * Plus local wiki files such as en:MediaWiki:Vector.css and en:MediaWiki:Common.css


 * New/Typography refresh:
 * (mediawiki/extensions/VectorBeta.git) / less / variables-beta.less
 * (mediawiki/extensions/VectorBeta.git) / less / screen-beta.less
 * (mediawiki/extensions/VectorBeta.git) / less / styles.less
 * Plus local wiki files, as above.


 * (Note: Per the talkpage comment, the ToC/Blockquote/Thumbnail/ext-link-icon elements are being removed in the next few days, so ignore them.)