Typography refresh/vi

Tài liệu này trình bày về một bản cập nhật mới liên quan đến kiểu trình bày của giao diện 'Vector' mặc định trong các dự án Wikimedia và gói phần mềm MediaWiki. Ghi chú: thay đổi này vẫn chưa được áp dụng cho các tập tin gốc của MediaWiki, thời điểm thực hiện vẫn còn ở phía trước (tính đến ngày 2014-03-14).

Tóm tắt các thay đổi
Chúng tôi mang đến bản cập nhật này cho kiểu trình bày trang mặc định của Wikipedia, với những yêu cầu sau luôn được ưu tiên hàng đầu:

Trong phạm vi như vậy, chúng tôi đã thực hiện những thay đổi sau:
 * 1) Tính dễ đọc: Kiểu chữ luôn phải rõ ràng và đẹp dù hiển thị ở kích thước nào. Kiểu chữ phải giúp phân biệt các thành phần trên giao diện (ví dụ như thanh điều hướng của trang) với nội dung bài viết.
 * 2) Tính liên tục: Đảm bảo trải nghiệm đồng nhất giữa máy tính để bàn và các thiết bị di động.
 * 3) Tính khả dụng: Mọi kiểu chữ chúng tôi dùng đều phải sẵn có và sử dụng được (hoặc cài đặt được) trên mọi nền tảng mà các dự án Wikimedia có mặt. Những phương án được chúng tôi lựa chọn đều phải có tính thẩm mỹ cao trên mọi thiết bị và nền tảng (Mac OS X, Windows, Linux, và các hệ điều hành di động).
 * 4) Khả năng truy cập: Các nội dung của Wikimedia đều phải dễ tiếp cận với tất cả mọi người, kể cả những người bị khuyết tật.


 * Chọn font chữ mới: Chúng tôi đã chọn những "họ" font sau: đề mục sử dụng font "Linux Libertine, Georgia, Times, kiểu serif (có chân)". Thân trang (phần chữ chính của các trang) sử dụng font "Arimo, Liberation Sans, Helvetica Neue, Helvetica, Arial, kiểu sans-serif (không chân)".


 * Nên nhớ rằng danh sách này không có nghĩa rằng tất cả các font chữ được liệt kê trên đó sẽ đều được sử dụng trên máy của bạn. Thay vào đó, trình duyệt và hệ điều hành sẽ tìm font chữ đầu tiên trong danh sách trên mà đã được cài đặt sẵn trên máy của bạn, và dùng chúng.


 * Khoảng cách và kích thước mới cho đề mục, thân trang, và dãn dòng: Với bề ngang hiện tại của các ký tự, các đề mục cần phải rõ ràng và nổi bật hơn, và dãn dòng (khoảng cách trắng giữa các dòng) cần phải đủ lớn để giúp người dùng đọc dễ dàng hơn và hạn chế mỏi mắt. Các đề mục sẽ được thiết lập như sau: thẻ H1 (tiêu đề trang) sẽ có kích thước là 2em/1.8em, thẻ H2 (đề mục chính) sẽ có kích thước 1.6/1.4em. Thẻ H3 kích thước sẽ là 1.4/1.2em, thẻ H4 là 1.2/1em, thẻ H5 là 1/1em. Kích thước chữ ở thân trang được tăng lên 0.875em (so với 0.8em hiện nay) với khoảng cách giữa các dòng là 1.6em (so với 1.5em như hiện nay) để có thêm khoảng trống và làm nội dung trang thoáng hơn. Tuỳ theo trình duyệt và hệ điều hành bạn sử dụng, các thông số này sẽ có khác biệt đôi chút (về giá trị pixel quy đổi), nhưng nói chung bạn sẽ nhận thấy kích thước font chữ có hơi tăng. Độ cao dòng của chữ/số mũ (sup) sẽ được thiết lập thành 0, nhằm khắc phục một lỗi kinh niên là các chữ số của mục tham khảo làm hỏng kết cấu dãn dòng.


 * Màu chữ mới: Theo hệ mã màu hex, màu chữ thân trang mới sẽ được thiết lập thành  trên nền , so với    trên nền   hiện tại. Nói một cách dễ hiểu, điều này có nghĩa rằng thay vì sử dụng chữ đen hoàn toàn nên nền trắng hoàn toàn, chúng ta sẽ dùng chữ màu ghi xám đậm trên nền trắng. (Màu sắc của các liên kết, đề mục và các chi tiết khác không đổi.)


 * Nội dung được định dạng sẵn: Nội dung  dài sẽ có một thanh cuộn ngang, thay vì phải cuộn ngang toàn bộ trang.

Những câu hỏi thường gặp
Đưới dây là phần trả lời các câu hỏi thường gặp về lần sửa đổi này.

Những ai sẽ bị tác động bởi những thay đổi này?
Tất cả người dùng trên các trang của Wikimedia sử dụng giao diện Vector mặc định, trong đó có cả người đọc và biên tập viên. Những người dùng đã thay đổi thiết lập cá nhân hoặc sử dụng một phương pháp nào đó để cài đặt giao diện khác, như Monobook hay Cologne Blue, sẽ không bị tác động.

Cũng xin lưu ý thêm rằng những người dùng đã tuỳ biến tập tin CSS cá nhân của riêng họ, hoặc người dùng những trang cục bộ đã bị các bảo quản viên thay đổi giao diện CSS toàn hệ thống, có thể sẽ thấy sự không thống nhất giữa giao diện của họ và giao diện mặc định mới. Vui lòng đối chiếu với phần tóm tắt trên và phần những câu hỏi thường gặp để biết những thành phần thiết kế cụ thể nào đã bị thay đổi trong lần chỉnh sửa này.

What was the problem with our typography to begin with?
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.

Is there a perfect font that meets our readability needs in all scripts? Do we think this is it?
No, there is no one perfect font which embodies... We have to make a practical decision based on what comes close to meeting all these requirements, within our constraints. Millions of users read Wikipedia on different devices every day. The current font selections will bring improved readability and consistency across platforms, even if they're not perfect.
 * 1) Ubiquity: i.e availability on all popular desktop and mobile operating systems.
 * 2) Proper rendering of glyphs and diacritics: for hundreds of non-Latin scripts, as well as good kerning for character pairs, so users do not have to squint to read characters.
 * 3) Respectable x-height: so type is legible at small sizes for things like left navigation, captions, terms of service or secondary information.
 * 4) Hinting: avoiding blurriness of characters at small sizes, particularly on Windows.

Why is the type size and leading increased?
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.

Why are we using serif fonts for the headings?
For better contrast and distinction between body and headings. Headings act as entry points when users are scanning a page. Headings add some visual diversity to our font stack. Both headings and images play the important role of breaking up the monotony of the page. Combining serif and sans-serif is not an unusual or original idea.

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 acts 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.

Why did we specify new sans-serif fonts?
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, 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).

Of all the free/open options, the closely-related fonts of Liberation Sans and Arimo had the best display characteristics (strong x-height and works well for readability at all sizes). The letterforms closely resemble Helvetica and Arial so it provides for a consistent experience. Arimo had the best technical compliance (accurate rendering of obscure Unicode features), but is only installed by default in ChromeOS. Liberation Sans has a respectable amount of ubiquity and it is produced by Red Hat who can help us with addressing rendering issues. We specified 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.

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 there 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.

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.

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

Why did we change the body text color?
The new values ( on  ) have a contrast ratio of 15.3:1, which is a 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.

How did this change happen?
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.

How did we get 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 the time the beta feaure 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.

Can I opt out of changes to the default fonts?
Yes. It is possible for logged-in users of Wikimedia sites to customize their personal CSS (i.e. Special:MyPage/common.css or Special:MyPage/vector.css on each wiki) to override some or all of the changes. You can also 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, and Windows 8, Ubuntu Linux, Mac OSX 10.8, iOS 6 and 7, Android, and Chrome OS. Size, leading, glyphs, hinting and font renders were tested on Windows, Ubuntu Linux, Mac OS 10.8, Android, and ChromeOS.

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.8 px). This squashes glyphs and superscripts significantly along with the type being too small to read. Scripts examined were Urdu, Marathi, Bahasa Melayu, Chinese, Korean, 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.

Code links

 * Old/Current:
 * (mediawiki/core.git) / skins / vector / variables.less
 * (mediawiki/core.git) / skins / vector / components / common.less
 * Plus local wiki files such as en:MediaWiki:Vector.css and en:MediaWiki:Common.css


 * New/Typography refresh:
 * (mediawiki/extensions/VectorBeta.git) / less / variables-beta.less
 * (mediawiki/extensions/VectorBeta.git) / less / screen-beta.less
 * (mediawiki/extensions/VectorBeta.git) / less / styles.less
 * Plus local wiki files, as above.


 * (Note: Per the talkpage comment, the ToC/Blockquote/Thumbnail/ext-link-icon elements are being removed in the next few days, so ignore them.)