Typografie verversen

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

(top) Oude typografie op OSX
(bottom) Ververste typografie op OSX

(top) Oude en (bottom) Ververste typografie, op Ubuntu/Firefox

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 op non-Latin wiki's is dat 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) zijn nu gezet op 1, dit 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 #252525 op #FFFFFF, van #000000 op #FFFFFF. 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 gewijzigd.)

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?

Het combineren van serif en sans-serif is niet ongebruikelijk. We doen dit om een beter verschil tussen tekst en koppen weer te geven. Koppen zijn blikvangers als lezers snel een tekst doornemen, op zoek naar informatie. Zowel koppen als afbeeldingen spelen een belangrijke rol in het doorbreken van een lange lap tekst, wat belangrijk is omdat veel inhoud op Wikimedia lang is (inhoudelijke pagina's, discussie pagina's. helpteksten, beleid, enz.) en veel secties kan bevatten.

Waarom zijn Linux Libertine, Georgia en Times gespecificeerd als de 'serif fonts'?

Een titel van een sectie is een entrypoint in een artikel. Een serif lettertype geeft visueel verschil en karakter vergeleken met de tekst zelf, waardoor een gebruiker snel de pagina kan doornemen. Serif zijn ook goed bekend vanwege het overdragen van het traditionele gedrag dat bij onze ontwerpdoelen past.

Linux Libertine is niet overal beschikbaar, het is een goed ontworpen en vrij/open serif lettertype dat ook gebruikt wordt in het Wikipedia logo. Het is daarmee dus een deel van de Wikimedia ontwerptaal, het is ook geschikt voor gebruik in koppen. Georgia is een lettertype dat geoptimaliseerd is voor browsers en schermen. Het is ook volop beschikbaar op de meeste populaire platforms, en op Windows, Mac OSX en iOS. Linux Libertine en Georgia zijn complementaire lettertypes, en zijn dan tegenhangers van het duo Helvetica en Arial. Times is wordt specifiek ingesteld om zeker te zijn dat gebruikers op Linux een goed serif hebben als standaard – Linux systemen bevatten niet standaard Linux Libertine of Georgia. Door het instellen van Times, zien de meeste Linux-gebruikers Nimbus Roman No9 L.

Talen en scripts waarbij problemen zijn gemeld met Georgia of Times zijn Russisch/Cyrillisch, Hebreeuws, Arabisch, Pools, Chinees, Japans en Koreaans.

Waarom zijn er nieuwe sans-serif fonts gespecificeerd?

Voor de wijziging was het lettertype van de eigenlijke tekst "sans-serif", waarna de browser kon bepalen of het de standaard sans-serif gebruikte. Met uitzondering van Helvetica, Arial en Nimbus Sans L gebruiken de meeste browsers dan de lettertypes die geen rekening houden met het goed opbouwen van de weergave van grafische symbolen en diakrieten bij kleine groottes. Er is geen vrij/open lettertype die alles aankan en overal beschikbaar is. (Evaluatie lettertypes).

Wij specificeren Neue Helvetica voor Mac gebruikers, dit is een iets wat betere versie van Helvetica wat betreft interpunctie, de x-hoogte is wat meer consistent en in enkele gevallen zijn de bodems en hoeken wat ronder. Het is een wat geoptimaliseerde versie van Helvetica, al hoeft het niet in alle scrips ideaal te zijn.

De lettertypes worden beide gespecificeerd om consistentie tussen de platforms en de apparaten te bereiken en om een betere leesbaarheid te krijgen bij opgebouwde teksten met kleine groottes voor zowel Latin als non-Latin scripts te krijgen. De gebruikers kunnen, als zij dat willen, zelf vrije/open lettertypes (fonts) downloaden die getest zijn en contact met ons opnemen bij problemen, waardoor wij problemen meer gestructureerd kunnen oppakken.

In het verleden hebben wij meerde andere lettertypes uitgeprobeerd, zoals: Arimo, Liberation Sans en andere. Normaal zijn veel daarvan normaal niet geïnstalleerd bij gebruikers (dan heeft het geen zin) of de opbouw van teksten valt op bijvoorbeeld oudere systemen toch tegen of die zonder font smoothing / hinting.

Waarom zijn er non-free fonts in de font declaratie opgenomen?

Het bereik van lettertypes loopt van Helvetica Neue naar Arial die op alle gebruikelijke platforms beschikbaar. Ook al wordt Arial veel als standaard gebruikt, het moet door ons gespecificeerd worden zodat het de CSS degradatie voorspelbaar is. Om zeker te zijn van een betrouwbare ervaring van de gebruikers op alle platformen lijkt dan het beste wat we kunnen doen. We hebben besloten om ook non-free lettertypes in de 'stack' op te nemen omdat veel besturingssystemen (Windows, MacOS en iOS) standaard geen FOSS lettertypes hebben. Ondertussen gebruiken veel besturingssystemen een FOSS lettertype (bijvoorbeeld Nimbus Sans L) in plaats van "Helvetica".

Omdat de manier waarop CSS font-family instellingen werken zorgt het specificeren van een bepaald lettertype niet voor een afhankelijkheid van dat lettertype, de gebruiker hoeft het ook niet te downloaden of te installeren. De gespecificeerde lettertypes worden alleen getoond als ze al op de computer van de gebruikers aanwezig zijn, Wikimedia kan de teksten tonen ongeacht of een bepaald lettertype aanwezig is.

Is er iets te melden over webfonts?

Webfonts is een systeem voor het leveren van een lettertype aan gebruikers die dat lettertype niet geïnstalleerd hebben. Dat betekent een webbrowser van de gebruiker om een door ons aangeboden lettertype te download, dus extra bronnen die een negatieve impact hebben op de performance van de website (bijv. hoe lang het laden van een pagina duurt). Dit vooral bij oudere webbrowsers. Mogelijk dat we in de toekomst webfonts gaan gebruiken, maar onze wijziging zorgt voor een betere leesbaarheid en consistentie zonde invloed op de laadtijd van pagina's.

Waarom is de tekstkleur in de body gewijzigd?

De nieuwe waarden (#252525 en #FFFFFF) hebben een contrastverhouding van 15.3:1, wat een AAA rating is volgens de WCAG 2.0 1.4.6. Puur zwart voor zowel tekst als titels op wit wordt niet aanbevolen om meerdere redenen. Dyslectische lezers zijn gevoelig voor dit hoge contrast. Daarom wordt de achtergrond niet puur wit, een soort lichtgrijs, of verminderen we het contrast tussen tekst en achtergrond. Voor mensen die moeite met de benaderbaarheid het harde contrast ook pijn doen aan de ogen.

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.

Deze wijzigingen waren in november 2013 als betafunctie beschikbaar voor desktop. Deze betafunctie is gedurende drie hoofdversies via feedback van de gemeenschap beoordeeld.

Hoe hebben we feedback gekregen?

De meeste wijzigingen zijn eerst in oktober 2012 op mobiele apparaten getest, de ervaringen zijn verwerkt in een nieuwe versie in oktober 2013 voor desktop. De betafunctie is drie hoofdreleases gebruikt door meer dan 14,000 gebruikers in de top 10 Wikipedia's, en er zijn meer dan 100 discussies over gevoerd via overlegpagina's.

Kan ik de wijzigingen van de standaardlettertypes negeren?

Ja, het is mogelijk voor ingelogde gebruikers op Wikimedia websites om hun eigen CSS te wijzigen (bijvoorbeeld. Special:MyPage/vector.css per wiki) om deze wijzigingen (deels of allemaal) uit te schakelen (override). U kunt User:Ekips39/typographyrefreshoverride.css in uw eigen CSS zetten als u geen CSS wilt leren hoe u de wijzigingen per stuk kunt uitschakelen. U kunt ook een ander skin / vormgeving gaan gebruiken, bij uw voorkeuren op de tab Uiterlijk. Ten slotte kunt u ook een standaardlettertype definiëren van uw browser om "serif" en "sans-serif" lettertypes te gebruiken, als op uw systeem de gespecificeerde lettertypes ontbreken.

Is dit op meerdere webbrowsers en besturingssystemen getest?

Ja, de nieuwe 'font stack' is getest op de besturingssystemen: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 en 7, Android en Chrome OS. Grootte, regelafstand, grafische symbolen, 'hinting' en opbouw en weergave lettertype zijn getest op Windows, Ubuntu Linux, Mac OS X 10.8, Android en Chrome OS.

Hoe passen niet Engelse taalprojecten deze wijzigingen toe?

Standaard wordt de typografische wijziging toegepast op alle projecten (als deel van de Vector skin). Er kunnen talen zijn waarbij enkele stijlen 'override' moeten worden om bepaalde scripts te ondersteunen. Voorbeeld: een script kan een kleinere regelhoogte of een hogere fontgrootte nodig hebben. Dit kan per wiki worden gedaan met een wijziging op de MediaWiki:Vector.css pagina. We raden andere projecten aan om deze wijzigingen bij de update te auditten en het wijzigen van de eigen CSS later alleen te doen als het voor het eigen script echt noodzakelijk is.

Bekijk ook de zaken die ons al bekend zijn vanuit andere taalprojecten.

Is er iets te zeggen over non-Latin scripts?

De oude typegrootte in non-Latin scripts was 0.8em (12.8px). Hierdoor werden grafische symbolen en superscripts merkbaar ingedrukt waardoor de leesbaarheid minder werd. Bekeken scripts zijn Urdu, Marathi, Bahasa Melayu, Chinese, Korean en Navajo. De grotere tekstgrootte zal de leesbaarheid in de meeste scripts verbeteren. Speciaal voor Navajo, een 'override' zal aangeboden worden omdat tekenparen in Helvetica wat apart worden opgebouwd en weergegeven.

Inline CSS besturing kan worden aangeboden om zeker te zijn dat talen 'overrides' maken per geval waar dat nodig is. Meld a.u.b op de overlegpagina's als u echte problemen ondervindt en hoofdzakelijk een non-Latin script gebruikt.

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.

Verwante doelen, zoals vertrouwen in Wikimedia websites of inzicht bij het lezen kunnen we hier niet beoordelen, daarvoor is veel meer data voor nodig of moet de impact van de wijziging veel groter zijn dan die nu is. Al zijn er altijd andere invloeden zoals de kwaliteit van het artikel, het onderwerp, het type pagina (overleg, artikel) enz.

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.

Referenties

Code links

Vector stijl variabelen in LESS

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• 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/