Typography refresh/de



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  auf   auf   auf   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?
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.

Why did we specify Linux Libertine, Georgia, and Times as the 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.

Warum haben wir die neue sans-serif Schriftart ausgewählt?
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.

Why did we include non-free fonts in the font stack?
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.

Kann man webbasierte Schriftarten nehmen?
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.

Warum haben wir die Textkörperfarbe verändert?
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.

Wie war der Verlauf dieser Schriftart-Auffrischungs-Aktion?
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.

Wie bekamen wir Feedback?
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.

Kann man Opt-out wählen?
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.

Did we test this on a variety of browsers and operating systems?
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.

How will non-English language projects adapt to these changes?
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.

What about 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.

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

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.

Code-Links

 * 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

Siehe auch

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