Typography refresh/nl



Dit document beschrijft een wijziging in 2014 van de typografie voor de standaard skin 'Vector' voor Wikimedia projecten en het MediaWiki software package.

Samenvatting van wijzigingen
Wij stellen aan deze wijziging van de standaard typografie de volgende eisen:


 * 1) Leesbaarheid: Lettertypen moeten leesbaar en mooi zijn bij alle afmetingen. Type als een element moet zorgen voor het verschil tussen de interface (zoals website navigatie) en de inhoud van het artikel.
 * 2) Consistentie: Een stabiele visuele ervaring bij het bekijken via desktop en mobiele apparaten.
 * 3) Beschikbaarheid: Alle gebruikte lettertypes moeten al bruikbaar zijn (of al beschikbaar zijn gemaakt) op alle platforms waar Wikimedia projecten aanwezig zijn. Elke selectie voor het beperken moet vloeiend plaatsvinden over alle apparaten en platforms (Mac OS X, Windows, Linux, en mobiele besturingssystemen).
 * 4) Benaderbaarheid: De inhoud van Wikimedia moet overal prima voor iedereen benaderbaar zijn, ook voor mensen met een handicap.

In die context, zijn er de volgende aanpassingen gedaan:


 * Nieuw lettertype specificaties: Wij hebben de volgende font families: stijlen voor de kop gezet op "Linux Libertine, Georgia, Times, serif". Body copy (de eigenlijke tekst op de pagina's) was eerst gezet op "Helvetica Neue, Helvetica, Arial, sans-serif", maar in verband met problemen is dat nu non-Latin wiki's, zijn teruggezet naar "sans-serif" totdat er een betere oplossing is.


 * NB: deze lijsten betekenen niet dat u alle lettertypes ziet. Uw browser of besturingssysteem zal zoeken naar het eerste in de lijst dat is geïnstalleerd (of dat als vergelijkbaar wordt gezien), en zal die tonen.


 * Nieuwe spatiëring en grote van koppen, 'body copy' en 'leading': Met de huidige tekstbreedte moeten koppen duidelijk zijn en de 'leading' (witruimte tussen de regels) moet genoeg zijn om de leesbaarheid te waarborgen zonder de ogen te vermoeien. Koppen worden nu als volgt ingesteld: H1 (pagina titels) worden 1.3/1.8em, H2 (koppen hoofdsecties) worden 1.3/1.4em. H3 wordt 1.6/1.17em, H4 1.6/1em, H5 1.6/1em. De 'body copy' is vergroot naar 0.875em (was 0.8em). Afhankelijk van de browser en het besturingssysteem, wordt vertaald naar licht andere pixel waarden, maar in het geheel geeft het een licht grotere font voor de body. De regelhoogtes voor superscript (sup) en subscript (sub) zijnnu gezet op 1, die lost een allang bestaand probleem op met de referentienummers die de witruimte tussen de regels beïnvloeden.


 * Nieuwe body font kleur: In hex triplets, is de kleur van de body copy nu  op , van   op  . In normaal Nederlands, de kleur is gewijzigd van puur zwart op witte achtergrond naar erg donker grijs op een pure witte achtergrond. (Kleuren voor links, koppen en andere elementen zijn niet gewijzigs.)

Veelgestelde vragen
Het volgende zijn antwoorden op de belangrijkste vragen over deze wijziging.

Wie ziet deze wijziging?
Alle gebruikers van MediaWiki 1.23 websites die het standaard skin Vector gebruiken, inclusief lezers en bewerkers. Dit is ooit ontworpen voor de Wikimedia lezers, maar dat is een erg kleine groep. Gebruikers die via hun voorkeur of op een andere manier voor een andere skin kiezen, als Monobook of Cologne Blue, zien geen wijzigingen.

Als gebruikers hun persoonlijke CSS hebben gewijzigd, of als hun eigen beheerder dat op hun site heeft gedaan me de CSS van de eigen website, kunnen verschillen zien met de nieuwe standaarden. Bekijk dan deze samenvatting en de FAQ om te zien of er een bepaald element ook gewijzigd moet worden.

Wat was oorspronkelijk het probleem met de typografie?
Tekst is de kern van het visuele element in Wikimedia projecten, of het nu een encyclopedie (Wikipedia) of een kleiner project als Wikisource en Wikibooks is. Wij willen onze gebruikers in ons ontwerp accuraatheid, betrouwbaarheid en helderheid bieden, net als bij de inhoud die ze lezen. Voor deze typografische wijziging waren er meer dan 20 willekeurig gedefinieerde typegroottes alleen al voor desktop, wat voor veel lezers inconsistent overkomt. De typegrootte was te klein voor veel lezers en de regelhoogte kon het lezen van veel tekst bemoeilijken. Voor kopen moet het werken als entrypoints in lange pagina's met tekst, die zijn opgemaakt om de leesbaarheid te verhogen. We hebben naar een betere balans gezocht en verbondenheid voor gebruikers om efficiënt de pagina te kunnen scannen bij langere teksten.

De functionele problemen met oudere stylen zijn eerst opgepakt met het verbeteren van onze mobiele typografie. Dat bood ons de kans om een grotere typegrootte te testen, grotere regelafstand en serif koppen. Nu is het tijd om de leesbaarheid en de benaderbaarheid in alle talen/projecten op te pakken, als ook om te zorgen voor eenduidigheid in ontwerp tussen desktop, mobile web en apps.

Is er een perfect lettertype dat zorgt voor goede leesbaarheid in alle scripts?
Nee, er is geen font dat altijd en overal perfect is.


 * 1) 'Ubiquity': de beschikbaarheid op alle populaire desktop en mobiele besturingssystemen.
 * 2) Goed opbouwen van grafische symbolen en diakrieten: voor de non-Latin scripts, als ook voor de goede spatiëring van paren van tekens, zodat gebruikers niet hoeven te turen op tekens te lezen.
 * 3) Fatsoenlijke x-hoogte: zo dat het type leesbaar is voor kleine groottes bij navigeren, titels, zaken van aanvullende informatie.
 * 4) TIP: voorkom wazige tekens van kleine grootte, vooral op Windows.

We moeten een beslissing maken over wat het beste aansluit op deze vereisten, binnen onze voorwaarden. Miljoenen lezers lezen dagelijks Wikipedia op talloze verschillende apparaten. De huidige geselecteerde lettertypes (fonts) zorgen voor een verbeterde leesbaarheid en eenduidigheid tussen platforms, ook als ze niet perfect zijn.

Waarom is de typegrootte en 'leading' verhoogd?
Dit is een kleine wijziging zonder veel impact. De vorige typegrootte was voor veel lezers minder goed leesbaar. Door de feedback hoorden we dat de zoom-functie vaak werd gebruikt om de tekst beter te kunnen lezen, ook voor de minder gehandicapten. Deze wijziging voelt als een noodzaak omdat we de tekst beter leesbaar willen maken voor alle lezers. Naast de typegrootte is ook de regelafstand verhoogd naar 21px, volgens de typografische standaarden, 120% van de typegrootte. Dit is gemakkelijk voor lezers die niet alleen de inleiding lezen maar ook de lange alinea's.

De focus bij pagina's van Wikimedia projecten ligt op het tekstgedeelte (body copy). Bij de meeste taalprojecten is de tekstgrootte klein en is dicht op onze huidige testresultaten. Het gebrek aan luchtigheid zorgt voor efficiëntie maar maakt de ogen moe als er veel tekst is. Ook, wordt onder de 14px niet aanbevolen bij non-Latin scripts. Woorden met liggende streepjes en grafische symbolen worden ineen geperst en moeten al loerend worden ontcijfert.

Waarom gebruiken we 'serif fonts' voor de koppen?
Combining serif and sans-serif is not an unusual or original idea. We do so in this case to provide better contrast and distinction between body and headings. Headings act as entry points when users are scanning a page, looking for information. Both headings and images play an important role in breaking up the visual monotony of the page, which is of critical importance considering that much of Wikimedia content (content pages, discussion pages, help text, policies, etc.) are quite lengthy and have many sections.

Waarom zijn Linux Libertine, Georgia en Times gespecificeerd als de 'serif fonts'?
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 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.

Waarom zijn er nieuwe sans-serif fonts gespecificeerd?
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.

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.

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.

Waarom zijn er non-free fonts in de font declaratie opgenomen?
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".

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.

Is er iets te melden over 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.

Waarom is de tekstkleur in de body gewijzigd?
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.

Hoe is deze wijziging gedaan?
Deze typografische wijziging is eerst vier maanden getest, daarna vrijgegeven voor het mobiele web voor alle Wikimedia projecten in oktober 2012. Dit inclusief de declaraties voor serif koppen en sans serif 'body copy', als ook de vergrootte typegrootte en regelafstand voor 'body copy' en titels.

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.

Hoe hebben we feedback gekregen?
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.

Kan ik de wijzigingen van de standaard fonts negeren?
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:Ekips39/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.

Is dit op meerdere webbrowsers en besturingssystemen getest?
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.

Hoe passen niet Engelse taalprojecten deze wijzigingen toe?
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.

Is er iets te zeggen over non-Latin scripts?
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, and 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.

Zijn er testen geweest als een A/B test of een splittest om de impact van de nieuwe typografie te meten?
Nee.

Meestal brengen we nieuwe functies in een gecontroleerd experiment, dit om objectief de performance te meten en hypotheses te testen over een mogelijke positieve impact. In de gewone versie (een A/B of splittest) kiezen we willekeurig een aantal lezers of bewerkers, en geven we de helft de nieuwe versie, en de andere helft dus niet. In die gevallen, Foundation onderzoekers hebben geadviseerd geen A/B testen uit voeren of andere gecontroleerde experimenten. Het is onwaarschijnlijk dat alleen kleine typografische wijzigingen een grote impact zullen hebben op het lezen, zoals tijd op de website, aantal bekeken pagina's per bezoeker, enz., die met enige meting met vertrouwen kan worden bepaald.

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.

Kan Wikipedia nu langzamer werken door het gebruik van nieuwe fonts?
Nee. Wij meten meestal de impact van een nieuwe functie op de performance van de website, wij kijken dan of het laden van pagina's langer duurt. In dit geval wordt het niet toegevoegd aan de lijst met bronnen die een gebruiker moet laden om een pagina te kunnen bekijken, de verschillen in performance zullen verwaarloosbaar zijn.

Code links

 * Vector stijl variabelen in LESS:
 * En lokale wiki bestanden zoals en:MediaWiki:Vector.css en en:MediaWiki:Common.css
 * En lokale wiki bestanden zoals en:MediaWiki:Vector.css en en:MediaWiki:Common.css
 * En lokale wiki bestanden zoals en:MediaWiki:Vector.css en en:MediaWiki:Common.css

Zie ook

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