排版更新

(上方) OSX上旧版显示效果
(下方) OSX上新版显示效果

(上方) Ubuntu/Firefox旧版显示效果
(下方) Ubuntu/Firefox新版显示效果

這個文件說明了2014年的維基媒體計劃的“Vector”皮膚和MediaWiki軟件包做出的更新。

变化摘要

我們發佈這項維基媒體更新并通知以下注意事項：

1. 可讀性：不論大小，所有字體必須清晰易讀。頁面上的文字元素須突出條目內容與介面之差別。
2. 一致性：桌上電腦及手提電話一致的視覺體驗。
3. 可用性：所有使用的字型必須為已经在Wikimedia各项目中已经使用（或已可以使用）。任何选出的字体必須能跨平台完美展示（OS X、Windows、Linux和）。
4. 无障碍：Wikimedia内容必须可以被所有人方便的访问，包括残疾人。

在这方面，我们做了以下更改：

新字體規範

我们已经设置如下字体：标题字体被设置为 "Linux Libertine, Georgia, Times, serif". 正文字体被设置为 "Helvetica Neue, Helvetica, Arial, sans-serif"，但是这套字体在非拉丁语维基上有问题，我们决定暂时恢复使用"sans-serif"（无衬线）。

请注意，这些列表并不意味着您将收到所有的这些字体。您的浏览器和操作系统将查找在列表中的第一个安装了的字体并启用它。

New spacing and sizing for headings, body copy, and leading

With the current text width, headings need to clearly stand out and the leading (whitespace between lines) needs to be sufficient to enable readability without creating eye fatigue. Headings will now be set to the following: H1 (page titles) will be 1.3/1.8em, H2 (main section headings) will be 1.3/1.4em. H3 will be 1.6/1.17em, H4 1.6/1em, H5 1.6/1em. The body copy has been increased to 0.875em (from 0.8em). Depending on your browser and operating system, this will translate to slightly different pixel values, but overall results in a slightly larger body font size. The superscript (sup) and subscript (sub) line-heights are now set to 1, to fix a long-standing problem with reference numbers affecting the leading.

新的配色

用16位RGB表示, 从 #000000 的字、#FFFFFF 的背景改为 #252525 的字、#FFFFFF 的背景。通俗的讲，这意味着颜色已经从纯黑色文字配纯白色的背景改为暗黑色文字配纯白色的背景（链接、标题和其他元素的颜色并没有改变。）

常见问题

以下是关于此次更新的一些关键问题。

此次更新將適用於什麼人？

所有版本为MediaWiki 1.23维基媒体基金会站点默认的Vector皮肤的用户。它主要被设计用于维基媒体读者，但在文体上改变是很低的。如果用户使用其他皮肤（如克隆蓝或Monobook）的话将看不见任何改变。

請記住自定義了個人CSS及處於被本地管理員改變過站點範圍CSS的站點的用戶可能會發現新默認值有所異常。請查看本簡介和FAQ以找出具體是哪一項設計於此有關。

我們原來的排版設計有什麼問題？

Text is our core visual element of Wikimedia projects, whether it's an encyclopedia (like Wikipedia) or a smaller project like Wikisource and Wikibooks. We want our users to sense accuracy, reliability, and clarity from our design, just like the actual content they are reading. Prior to this typography update, we had more than 20 arbitrarily defined type sizes on desktop alone, which appeared inconsistent for our users. The type size was too small for many readers, and the line height could make reading long form content difficult. For headings, these should act as entry points in a long pages of text and were styled accordingly to aid readability. We sought to achieve better balance and cohesiveness for users to efficiently scan the page or engage in long form reading.

The functional problems with our older styles were first addressed via improvements to our mobile typography. That gave us a chance to test a larger type size, increased leading, and serif headings. Now, it is time to address readability and accessibility in all languages/projects, as well as create consistency in the design language across desktop, mobile web, and apps.

會否有一種完美字型可在所有語言均滿足我們的可讀性要求？現時的變更會不會就是答案？

沒有，不可能有一種能滿足所有需求的完全字型...

1. 普遍性：即在所有流行的桌面和移动操作系统上都可用。
2. 恰当地渲染字形和变音符号：正确渲染数百种非拉丁文本并提供良好的字间距，为了用户不必眯着眼睛阅读
3. 恰当的字母的基本高度：字符会更易读即使在左侧导航，标题，服务条款或次要信息这样的小字号文本上。
4. 微调：避免在小尺寸显示时字符的模糊，特别是在Windows上。

我们要根据接近满足所有这些要求的字体作出了决定。数以百万计的用户每天用不同设备阅读维基百科。当前字体的选择将提高跨平台可读性和一致性，即使他们不是完美的。

爲什麽字號和行距增加了？

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.

爲什麽我們在標題上使用襯線字體？

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.

为何我们指定 Linux Libertine, Georgia 和 Times 作为衬线体?

章节标题是文章的切入点。 与正文副本相比，衬线字体提供视觉差异和角色，这有助于用户扫描页面。 Serif也因传达符合我们设计目标的传统风范而闻名。

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.

格鲁吉亚文、俄文/斯拉夫文、希伯来文、阿拉伯文、波兰文、中文、日文和韩文已报告存在字符问题。

为何我们指定了新的衬线字体?

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.

為什們我們在字體庫中保留了非自由字體？

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.

网页字体会怎么样？

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.

为何我们会更改主题内容字体的颜色？

The new values (#252525 on #FFFFFF) 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.

过去这个变化如何发生？

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.

这些变化会从2013年11月作为一个测试版功能带入桌面版。 This beta feature then went through three major iterations based on community 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.

我可否不參與這次默認字體改變？

是的。對於維基媒體網站的登入使用者來說，可以透過自訂其個人CSS（意即每個wiki上的Special:MyPage/vector.css）以覆蓋部分或所有變更。您可以複製User:Ekips39/typographyrefreshoverride.css到您個人的CSS，还可以通过设置一个不同的皮肤）來撤銷變化。你也可以改變你的瀏覽器的默認字體以展示有襯線和無襯線字體，當你的系統中並沒有這些在列字體時，瀏覽器設定將生效。

我們是否在多種瀏覽器和操作系統上測試過了？

是的。新的字体变化在如下系统中被测试：Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6-7, Android和 Chrome OS. 大小，行距，字形，字形微调和字体渲染 在 Windows, Ubuntu Linux, Mac OS X 10.8, Android, 和 Chrome OS上被测试.

非英語計劃如何適應這些變化？

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.

另见 issues that we are already aware of regarding other language projects。

非拉丁字母会怎么样？

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.

你有没有运行任何质量控制实验如A / B实验，以衡量新排版的影响？

没有。

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.

用这些新的字体会导致我上维基百科变慢么?

不，我们通常注重衡量一个新功能的网站性能的影响，这意味着测试它是否会使页面需要更长的时间来加载。在这种情况下，我们不改变最低配置，用户可以看到的网页中，性能的变化将是微不足道的。

參考資料

代码链接

Vector 样式由 LESS生成

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• 增强本地wiki文件例如zh:MediaWiki:Vector.css和zh:MediaWiki:Common.css

参见

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