Typografie-Update

(oben) altes Schriftbild auf OSX
(unten) erneuertes Schriftbild auf OSX

Alte (oben) und aktualisierte (unten) Typografie auf Ubuntu/Firefox

Dieses Dokument beschreibt das Update für das Anzeigebild des Standard-'Vector'-Skins für Wikimedia-Projekte und die MediaWiki-Software im Jahr 2014.

Überblick über die Änderungen

Wir haben diese Aktualisierung an die Standardanzeige von Wikimedia angenähert, um folgende Anforderungen zu berücksichtigen:

Lesbarkeit: Schriften müssen in allen Größen deutlich lesbar sein. Schrift als Gestaltungselement muss helfen, zwischen Benutzeroberfläche und Artikelinhalt zu unterscheiden. Konsistenz: Eine einheitliche visuelle Erfahrung für Desktop-PC und Mobilgeräte.

1. Verfügbarkeit: Alle Schrifttypen, die wir verwenden, müssen bereits auf allen Plattformen, auf denen Wikimedia-Projekte betrieben werden, verfügbar sein oder dafür verfügbar gemacht werden. Jede Auswahl muss auf allen Geräten und Plattformen (Mac OS X, Windows, Linux und mobile Betriebssysteme wie Android oder iOS) brauchbar sein.
2. Zugänglichkeit: Inhalte von Wikimedia müssen für jeden uneingeschränkt zugänglich sein, auch für Personen mit Behinderungen.

In diesem Zusammenhang haben wir folgende Verbesserungen eingeführt:

Neue Schriftart Vorgaben

Als Basis haben wir die folgenden Schriftfamilien ausgesucht: Überschriften sind gesetzt in Linux Libertine, Georgia (Schriftart) oder Times (Schriftart). Textkörper (der Hauptteil der Seiten) waren ursprünglich gesetzt in Helvetica Neue, Helvetica (Schriftart) oder Arial. Aufgrund von Problemen damit in der Transliteration nicht-lateinischer Schriftsprachen wurde nur noch das serifenlose Arial zugelassen. Das ist der Stand der Dinge, bis eine bessere Lösung gefunden wird.

Bitte beachte, dass diese Vorgaben nicht bedeuten, dass Du alle diese Schriftarten gleichzeitig vorfinden wirst. Es ist eher so, dass dein Browser und dein Betriebssystem sich nach der ersten Schriftart in dieser Liste richten, die bei Dir installiert ist, und eben diese benutzen wird.

Neue Abstände und Größen für Überschriften, Fließtext und Zeilenabstand

Bei der aktuellen Textbreite müssen sich Überschriften deutlich abheben und der Zeilenabstand (Leerraum zwischen den Zeilen) muss ausreichend sein, um die Lesbarkeit zu ermöglichen, ohne die Augen zu ermüden. Überschriften werden nun wie folgt eingestellt: H1 (Seitentitel) wird 1,3/1,8em sein, H2 (Hauptabschnittsüberschriften) wird 1,3/1,4em sein. H3 wird 1,6/1,17em sein, H4 1,6/1em, H5 1,6/1em. Der Textkörper wurde auf 0,875 em erhöht (von 0,8 em). Je nach Browser und Betriebssystem führt dies zu leicht unterschiedlichen Pixelwerten, aber insgesamt zu einer etwas größeren Schriftgröße. Die hochgestellten (sup) und tiefgestellten (sub) Zeilenhöhen sind jetzt auf 1 gesetzt, um ein seit langem bestehendes Problem mit Einzelnachweisnummern zu beheben, die sich auf den Zeilenabstand auswirken.

Neue Fließtextfarbe

In Hex-Tripeln wird die Fließtextfarbe jetzt von #000000 auf #FFFFFF auf #252525 auf #FFFFFF gesetzt. Weniger technisch ausgedrückt bedeutet dies, dass sich die Farbe von rein schwarzem Text auf rein weißem Hintergrund zu sehr dunkelgrauem Text auf rein weißem Hintergrund geändert hat. (Farben für Links, Überschriften und andere Elemente haben sich nicht geändert.)

Häufig gestellte Fragen

Im folgenden sind Antworten zu häufig gestellten Fragen über diese Änderung.

Wer sieht die Änderungen?

Alle Benutzer von Seiten mit MediaWiki 1.23, welche den Standardskin Vector nutzen, sehen die Änderungen, darunter Leser und Autoren. Dies erfolgte ursprünglich hauptsächlich für Wikimedia-Leser, ist jedoch nur sehr stilistisch. Benutzer die einen alternativen Skin wie Monobook oder Kölnisch Blau gewählt haben, werden keine Änderungen feststellen.

Bitte beachte, dass Benutzer, die ihr CSS-Stylesheet ihrem persönlichen Geschmack angepasst haben oder in Arbeitsumgebungen browsen, wo System-Administratoren einheitliche CSS vorgeben, Abweichungen von unseren Schriftart-Vorgaben erleben. Bitte prüfe diese Zusammenfassung und die FAQ daraufhin, ob ein besonderes Gestaltungselement eine Verbesserung darstellen würde und gib Feedback.

Worin besteht das Problem mit unserer Schriftgestaltung?

Text ist unser zentrales visuelles Element der Wikimedia-Projekte, egal ob es sich um eine Enzyklopädie (wie Wikipedia) oder ein kleineres Projekt wie Wikisource oder Wikibooks handelt. Wir möchten, dass unsere Benutzer Genauigkeit, Zuverlässigkeit und Klarheit in unserem Design spüren, genau wie in den Inhalten, die sie lesen. Vor diesem Typografie-Update hatten wir allein auf dem Desktop mehr als 20 willkürlich definierte Schriftgrößen, die unseren Benutzern uneinheitlich erschienen. Die Schriftgröße war für viele Leser zu klein, und die Zeilenhöhe konnte das Lesen langer Inhalte erschweren. Überschriften sollten als Einstiegspunkte in lange Textseiten dienen und wurden entsprechend gestaltet, um die Lesbarkeit zu verbessern. Wir haben versucht, eine bessere Ausgewogenheit und Kohärenz zu erreichen, damit Benutzer die Seite effizient überfliegen oder sich ausführlich mit dem Lesen beschäftigen können.

Die funktionalen Probleme mit unseren älteren Stilen wurden zuerst durch Verbesserungen an unserer mobilen Typografie behoben. Das gab uns die Möglichkeit, eine größere Schriftgröße, einen größeren Zeilenabstand und Serifenüberschriften zu testen. Jetzt ist es an der Zeit, sich mit der Lesbarkeit und Zugänglichkeit in allen Sprachen/Projekten zu befassen und eine Konsistenz in der Designsprache über Desktop, mobile Webseiten und Apps hinweg zu schaffen.

Gibt es eine Schriftart, die alle Anforderungen perfekt erfüllt? Ist es genau diese?

Nein, es gibt keine Allzweck-Schriftart, die das leisten könnte.

1. Verbreitung: d.h. Verfügbarkeit auf allen gängigen Desktop- und mobilen Betriebssystemen.
2. Korrekte Darstellung von Glyphen und diakritischen Zeichen: für Hunderte von nicht-lateinischen Schriften sowie gutes Kerning für Zeichenpaare, sodass Benutzer nicht die Augen zusammenkneifen müssen, um Zeichen zu lesen.
3. Ausreichende x-Höhe: So ist die Schrift in kleinen Größen für Dinge wie die linke Navigationsleiste, Bildunterschriften, Nutzungsbedingungen oder sekundäre Informationen lesbar.
4. Deutlichkeit: Vermeidung von Zeichenunschärfe bei kleinen Größen, insbesondere auf Windows.

Wir müssen eine praktische Entscheidung treffen, die darauf basiert, was all diesen Anforderungen innerhalb unserer Grenzen am nächsten kommt. Jeden Tag lesen Millionen von Benutzern Wikipedia auf verschiedenen Geräten. Die aktuelle Auswahl an Schriftarten wird die Lesbarkeit und Konsistenz auf allen Plattformen verbessern, auch wenn sie nicht perfekt ist.

Warum werden Schriftgröße und Zeilenabstand vergrößert?

Dies ist eine kleine, konservative Änderung. Die bisherige Schriftgröße war für viele Benutzer nicht lesbar. Wir haben durch Rückmeldungen von Benutzern festgestellt, dass das Textzoomen ausgiebig verwendet wurde, um den Text für Personen mit leichten Sehproblemen oder -behinderungen besser lesbar zu machen. Da wir uns bemühen, die Informationen allen Benutzern zugänglich zu machen, erschien uns diese Änderung als Grundvoraussetzung für jede Verbesserung in diesem Bereich. Zusammen mit der Schriftgröße wurde auch der Zeilenabstand auf 21 Pixel erhöht, was den typografischen Standards für den Zeilenabstand entspricht, d.h. 120 % der Schriftgröße. Dies hilft Lesern, die über die Einleitung hinausgehen und lange Absätze lesen.

Der Fließtext steht im Mittelpunkt der Seiten der Wikimedia-Projekte. Bei den meisten Sprachprojekten ist die Textgröße mit unserem aktuellen Maß klein und dicht. Der Mangel an Freiraum verleiht etwas Effizienz, führt aber bei längerem Lesen zu einer Ermüdung der Augen. Außerdem werden weniger als 14 Pixel für nicht-lateinische Schriften nicht empfohlen. Wörter tragen hochgestellte Zeichen und Glyphen, die dazu neigen, gestaucht zu werden, und können nicht ohne Schielen entziffert werden.

Warum nutzen wir eine Serifenschrift für die Überschrift?

Die Kombination von Serifenschriften und serifenlosen Schriften ist keine ungewöhnliche oder originelle Idee. Wir tun dies in diesem Fall, um einen besseren Kontrast und eine bessere Unterscheidung zwischen Hauptteil und Überschriften zu ermöglichen. Überschriften fungieren als Einstiegspunkte, wenn Benutzer eine Seite überfliegen und nach Informationen suchen. Sowohl Überschriften als auch Bilder spielen eine wichtige Rolle beim Aufbrechen der visuellen Monotonie der Seite, was von entscheidender Bedeutung ist, wenn man bedenkt, dass viele Wikimedia-Inhalte (Inhaltsseiten, Diskussionsseiten, Hilfetexte, Richtlinien, etc.) ziemlich lang sind und viele Abschnitte haben.

Warum haben wir Linux Libertine, Georgia und Times als Serifenschriften ausgewählt?

Abschnittstitel sind Einstiegspunkte in den Artikel. Eine Serifenschrift bietet im Vergleich zum Haupttext eine visuelle Differenzierung und Charakter, was einem Benutzer hilft, die Seite zu überfliegen. Serifen sind auch dafür bekannt, ein traditionelles Auftreten zu vermitteln, das unseren Designzielen entspricht.

Linux Libertine ist nicht weit verbreitet, aber eine gut gestaltete und freie/offene Serifenschrift, die auch im Wikipedia-Logo verwendet wird. Dies macht sie zu einem allgegenwärtigen Bestandteil der Wikimedia-Designsprache und daher eignet sie sich auch für die Verwendung in Überschriften. Georgia ist eine für Browser und Bildschirme optimierte Schriftart. Sie ist auch auf unseren beliebtesten Plattformen weit verbreitet, darunter Windows, Mac OSX und iOS. Linux Libertine und Georgia fungieren als gute komplementäre Schriftarten und passen gut zu Helvetica und Arial. Times wurde extra ausgewählt, um sicherzustellen, dass Benutzer auf Linux-Systemen standardmäßig eine gute Serife verwenden – Linux-Systeme enthalten standardmäßig weder Linux Libertine noch Georgia. Durch die Auswahl von Times sehen die meisten Linux-Benutzer Nimbus Roman No9 L.

Zu den Sprachen und Schriften, für die Probleme mit Georgia oder Times gemeldet wurden, gehören Russisch/Kyrillisch, Hebräisch, Arabisch, Polnisch, Chinesisch, Japanisch und Koreanisch.

Warum haben wir die neue serifenlose Schriftart ausgewählt?

Der vorherige Zustand unseres Body-Inhalts war, dass nur „serifenlos“ angegeben wurde, sodass es dem Browser überlassen bleibt, seine standardmäßige serifenlose Schrift zu verwenden. Mit Ausnahme von Helvetica, Arial und Nimbus Sans L berücksichtigen die Schriftarten, die die meisten Browser in diesem Zustand verwenden, nicht die korrekte Wiedergabe von Glyphen, Paaren und diakritischen Zeichen bei kleinen Größen. Es gibt keine freie/offene Schriftart, die diese Anforderung erfüllt und allgemein verfügbar ist (siehe Tabelle).

Wir wählen Neue Helvetica für Mac-Benutzer, da es sich um eine etwas weiterentwickelte Version von Helvetica handelt, bei der die Interpunktion verbessert wurde, die x-Höhe etwas einheitlicher ist und die in einigen Fällen rundere Schalen und Zähler hat. Insgesamt ist es eine Optimierung von Helvetica, obwohl es möglicherweise nicht in allen Skripten so ideal ist.

Wir wählen Schriftarten, um sowohl für geräte- und plattformübergreifende Konsistenz zu sorgen als auch um eine angemessene Lesbarkeit und Wiedergabe bei kleinen Größen für lateinische und nicht-lateinische Schriften zu gewährleisten. Wenn die Spezifikationen vorhanden sind, können interessierte Benutzer die getesteten freien/offenen Schriftarten herunterladen oder uns Probleme mit den Rückfallketten melden, damit wir Probleme systematischer angehen können.

In der Vergangenheit haben wir mit mehreren alternativen Schriftarten experimentiert, die frei lizenziert waren, darunter: Arimo, Liberation Sans und andere. Letztendlich werden diese Schriftarten entweder nicht häufig von Benutzern installiert (wodurch sie keinen Effekt haben) oder sie werden auf älteren Systemen oder solchen ohne Schriftglättung/Hinweise schlecht wiedergegeben.

Warum haben wir nicht-freie Schriftarten in die Schriftauswahl aufgenommen?

Die Auswahl spezifizierte eine Reihe von Schriftarten von Helvetica Neue bis Arial, die auf allen wichtigen Plattformen verfügbar sind. Obwohl Arial weithin als Standard verwendet wird, müssen wir es angeben, damit die CSS-Verschlechterung vorhersehbar ist. Um ein möglichst zuverlässiges Erlebnis für Benutzer auf allen Plattformen zu gewährleisten, haben wir uns entschieden, nicht-freie Schriftarten in die Auswahl aufzunehmen, da auf vielen Betriebssystemen (wie Windows, MacOS und iOS) standardmäßig keine FOSS-Schriftarten installiert sind. Inzwischen verwenden viele Betriebssysteme eine FOSS-Schriftart (wie Nimbus Sans L) anstelle von "Helvetica".

Es ist besonders wichtig zu beachten, dass aufgrund der Funktionsweise von CSS-Schriftfamilieneinstellungen die Angabe einer bestimmten Schriftart keine harte Abhängigkeit von dieser Schriftart erzeugt und den Benutzer auch nicht dazu veranlasst, diese Schriftart herunterzuladen. Das bedeutet, dass von uns angegebene Schriftarten nur angezeigt werden, wenn der Benutzer sie bereits hat, und Wikimedia-Text wird weiterhin angezeigt, unabhängig davon, ob du eine bestimmte Schriftart hast oder nicht.

Kann man webbasierte Schriftarten nehmen?

Webfonts ist ein System zur Bereitstellung einer Schriftart für Benutzer, die diese nicht installiert haben. Dies beinhaltet, dass der Browser eines Benutzers eine von uns bereitgestellte Schriftart herunterlädt, was das Laden zusätzlicher Ressourcen verursacht und sich negativ auf die Leistung der Webseite auswirken würde (z. B. wie schnell Seiten geladen werden). Dies gilt insbesondere für ältere Browser. In Zukunft werden wir möglicherweise die Verwendung von Webfonts untersuchen, aber im Moment bietet dieses Update eine bessere Lesbarkeit und Konsistenz, ohne die Ladezeiten der Seiten zu verschlechtern.

Warum haben wir die Textkörperfarbe verändert?

Die neuen Werte (#252525 auf #FFFFFF) haben ein Kontrastverhältnis von 15,3:1, was eine AAA-Bewertung gemäß WCAG 2.0 1.4.6 ist. Reines Schwarz für Fließtext und Bildunterschriften wird aus mehreren Gründen nicht gegenüber Weiß empfohlen. Benutzer mit Legasthenie reagieren aufgrund des hohen Kontrasts empfindlich auf die Gegenüberstellung von rein schwarzem Text auf einem rein weißen Hintergrund. Dies kann dazu führen, dass die Wörter miteinander verwirbeln oder verschwimmen. Um dies zu vermeiden, verwende für deinen Hintergrund eine leicht cremefarbene Farbe, wie ein helles Grau, oder verringere den Kontrast zwischen Vordergrund (Text) und Hintergrund. Für Benutzer ohne Zugänglichkeitsprobleme kann der harte Kontrast von reinem Schwarz auf reinem Weiß auch die Belastung der Augen erhöhen.

Wie war der Verlauf dieser Schriftart-Auffrischungs-Aktion?

Dieses Typografie-Update wurde zunächst vier Monate lang getestet und dann im Oktober 2012 für alle Wikimedia-Projekte in der mobilen Ansicht veröffentlicht. Dazu gehörten Angaben der Schriftartenauswahl für Serifenüberschriften und serifenlosen Fließtext sowie eine erhöhte Schriftgröße und ein größerer Zeilenabstand für Fließtext und Bildunterschriften.

Diese Änderungen wurden später ab November 2013 als Beta-Funktion für den Desktop übernommen. Diese Beta-Funktion durchlief dann drei große Iterationen basierend auf den Rückmeldungen der Gemeinschaft.

Wie bekamen wir Feedback?

Viele der Typografie-Änderungen wurden erstmals im Oktober 2012 auf Mobilgeräten getestet, ein Großteil des Lernens wurde in die Typografie-Beta-Funktion für Desktop integriert, die im Oktober 2013 eingeführt wurde und drei Hauptversionen durchlaufen hat. Während dieser Zeit wurde die Beta-Funktion von über 14.000 Benutzern in den Top-10-Wikipedien verwendet und mehr als 100 Diskussionsabschnitte wurden auf der Diskussionsseite der Funktion erstellt.

Kann man Opt-out wählen?

Ja. Es ist für angemeldete Benutzer von Wikimedia-Seiten möglich, ihr persönliches CSS (d.h. Special:MyPage/vector.css in jedem Wiki) anzupassen, um einige oder alle Änderungen zu überschreiben. Du kannst User:Ekips39/typographyrefreshoverride.css in deine persönliche CSS kopieren, wenn du kein CSS lernen möchtest, um die Änderungen abzulehnen. Du kannst dich natürlich auch dafür entscheiden, in deinen Einstellungen im Reiter Aussehen zu einem anderen Skin zu wechseln. Zu guter Letzt kannst du die Standardschrift festlegen, die dein Browser verwendet, um Schriftarten "mit Serifen" und "ohne Serifen" anzuzeigen. Wenn dein System keine dieser ausgewählten Schriftarten hat, wird stattdessen diese Browsereinstellung verwendet.

Haben wir dies auf verschiedenen Browsern und Betriebssystemen getestet?

Ja. Die neue Schriftartenauswahl wurde auf folgenden Betriebssystemen getestet: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 und 7, Android und Chrome OS. Größe, Zeilenabstand, Glyphen, Hinweise und Schriftartdarstellung wurden unter Windows, Ubuntu Linux, Mac OS X 10.8, Android und Chrome OS getestet.

Wie werden nicht-englischsprachige Projekte diese Veränderungen übernehmen?

Standardmäßig wird das Typografie-Update auf alle Projekte angewendet (als Teil des Vector-Skins). Es kann Sprachen geben, die einige dieser Stile überschreiben müssen, um bestimmte Schriften zu berücksichtigen. Beispielsweise benötigen einige Schriften möglicherweise eine höhere Zeilenhöhe oder eine größere Schriftgröße. Jedes Wiki kann diese besonderen Stile überschreiben, indem es seine Seite MediaWiki:Vector.css bearbeitet. Wir bitten andere Projekte, die durch das Update eingeführten Änderungen zu prüfen und das CSS nur dann zu überschreiben, wenn dies auf der Grundlage ihrer Schrift erforderlich ist.

Siehe auch die Probleme, die uns bereits in Bezug auf anderssprachige Projekte bekannt sind.

Was ist mit nicht-lateinischen Schriften?

Die alte Schriftgröße in nicht-lateinischen Schriften war 0,8em (12,8px). Dadurch werden Glyphen und hochgestellte Zeichen erheblich gestaucht, und das Zeichen ist zu klein, um gelesen zu werden. Untersuchte Schriften waren Urdu, Marathi, Bahasa Melayu, Chinesisch, Koreanisch und Navajo. Die Erhöhung der Größe der Zeichen des Fließtextes verbessert die Lesbarkeit der meisten Schriften. Speziell für Navajo wird eine Überschreibung bereitgestellt, da Zeichenpaare in Helvetica seltsam dargestellt werden.

Es kann eine Inline-CSS-Anleitung bereitgestellt werden, um sicherzustellen, dass Sprachen bei Bedarf von Fall zu Fall Überschreibungen vornehmen. Bitte kommentiere auf der Diskussionsseite, wenn du hauptsächlich eine nicht-lateinische Schrift verwendest und auf erhebliche Probleme stößt.

Habt ihr kontrollierte Experimente durchgeführt, z.B. A/B- oder Gruppen-Tests, um die Wirkung der neuen Typografie zu messen?

Nein.

Wir führen neue Funktionen oft zuerst in kontrollierten Experimenten ein, um ihre Leistung objektiv zu messen und Hypothesen über positive Auswirkungen zu testen, die sie haben könnten. In der gängigsten Version (einem A/B-Test) wählen wir zufällig eine Stichprobe von Lesern oder Autoren aus, geben der Hälfte die neue Version und der anderen Hälfte keine neuen Erfahrungen. In diesem Fall rieten die Forscher der Stiftung davon ab, A/B-Tests oder andere kontrollierte Experimente durchzuführen. Es ist unwahrscheinlich, dass geringfügige typografische Änderungen allein einen großen Einfluss auf lesebezogene Metriken wie die Verweildauer auf der Webseite, die Anzahl der Seitenaufrufe pro Besucher, etc. haben würden, die mit Sicherheit gemessen werden könnten.

Verwandte Ziele, wie erhöhtes Vertrauen in Wikimedia-Webseiten oder Leseverständnis, sind nicht die Art von Daten, über die wir am besten auf quantitativer Basis lernen können, oder sie werden auch stark von unabhängigen Faktoren wie Seiteninhalt, Thema und Art der Seite beeinflusst (zum Beispiel Diskussionsseite oder Artikel).

Kann die Verwendung dieser neuen Schriftarten dazu führen, dass Wikipedia für mich langsamer wird?

Nein. Normalerweise messen wir die Auswirkung einer neuen Funktion auf die Leistung der Webseite, also ob das Laden von Seiten dadurch länger dauert. In diesem Fall fügen wir die Liste der Ressourcen, die ein Benutzer herunterladen muss, um eine Seite anzuzeigen, nichts hinzu, sodass Leistungsänderungen vernachlässigbar sind.

Einzelnachweise

Code-Links

Vector-Style-Variablen, die in LESS verfügbar sind

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• Zusätzlich lokale Wiki-Dateien wie de:MediaWiki:Vector.css und de:MediaWiki:Common.css

Siehe auch

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