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.

Kiểu trình bày cũ có nhược điểm gì mà lại cần phải thay đổi?
Văn bản (ký tự) là thành phần trực quan cốt lõi của tất cả các dự án Wikimedia, dù cho đó là một bách khoa toàn thư (như Wikipedia) hay những dự án nhỏ hơn như Wikisource và Wikibooks. Chúng tôi mong muốn người dùng của mình cảm nhận được sự chính xác, rõ ràng, tin cậy từ thiết kế của mình, giống như chính nội dung họ đang đọc. Trước lần cập nhật kiểu trình bày này, chúng tôi đã từng có hơn 20 kiểu cỡ chữ khác nhau thiết kế tuỳ tiện (chỉ tính riêng với phiên bản web dùng trên máy tính), gây ra sự thiếu ổn định về kết cấu cho người đọc. Với nhiều người kích thước chữ vẫn còn quá nhỏ, và khoảng cách dòng khiến việc đọc các đoạn văn bản dài trở nên khó khăn hơn. Với các đề mục, chúng cần phải đóng vai trò là điểm khởi đầu cho một trang văn bản dài và phải được thiết kế hợp lý cho dễ đọc hơn. Chúng tôi cố gắng đạt được sự cân bằng và thống nhất cao nhất để giúp người đọc duyệt qua nội dung một cách hiệu quả hoặc cảm thấy thoải mái khi đọc những văn bản dài.

Lần đầu tiên chúng tôi tìm cách giải quyết các vấn đề về chức năng trong kiểu trình bày cũ này là thông qua những lần cải tiến trên phiên bản di động. Chúng mang tới cho chúng tôi cơ hội thử nghiệm một font chữ to hơn, dãn dòng lớn hơn, và các đề mục kiểu serif (có chân). Và bây giờ, đã đến lúc làm cho nội dung trên mọi dự án và ngôn ngữ trở nên dễ đọc và dễ tiếp cận hơn, cũng như tạo ra sự thống nhất về thiết kế giữa các phiên bản dành cho máy tính, web di động và các ứng dụng di động.

Có font chữ hoàn hảo nào đáp ứng được mọi yêu cầu về tính rõ ràng trong mọi kiểu dáng? Các bạn có cho rằng font chữ được đề xuất này chính là font chữ cần tìm đó không?
Không, không có font chữ hoàn hảo nào bao hàm cả... Chúng tôi phải đưa ra lựa chọn hợp lý dựa trên việc font chữ nào đáp ứng được sát nhất các yêu cầu trên, mà vẫn đảm bảo tính linh hoạt. Hàng triệu người dùng đọc Wikipedia trên nhiều dòng thiết bị khác nhau mỗi ngày. Các font chữ sắp tới được chọn sẽ giúp người dùng dễ đọc các văn bản hơn, đồng thời đảm bảo tính đồng nhất giữa các nền tảng thiết bị, dù cho chúng không phải là font chữ hoàn hảo tuyệt đối.
 * 1) Tính sẵn có: ví dụ như có mặt trên mọi hệ điều hành máy tính và di động thông dụng hiện nay.
 * 2) Khả năng kết xuất chính xác mọi đường nét và dấu (huyền, sắc...): đáp ứng hàng trăm mẫu tự không phải Latin khác nhau, cũng như dấu nối giữa các ký tự cùng đôi, giúp người dùng không phải liếc mắt quá nhiều để đọc ký tự.
 * 3) Chiều cao-x đáng kể: để người dùng vẫn đọc được cho dù ở kích thước nhỏ như văn bản ở thanh điều hướng bên trái, các chú thích, điều khoản dịch vụ hay những thông tin thứ cấp.
 * 4) Ngoài ra: tránh các ký tự có kích thước nhỏ khi hiển thị bị mờ, đặc biệt là trên hệ điều hành Windows.

Vì sao cần tăng font chữ và khoảng cách giữa các dòng?
Đây là một thay đổi nhỏ nhưng rất thận trọng. Vời nhiều người dùng, kích thước font trước đây khá khó đọc. Thông qua phản hồi từ họ, chúng tôi biết rằng họ thường xuyên phải phóng to văn bản để đọc dễ hơn kể cả với những người gặp vấn đề hay bị các khuyết tật về mắt. Và bởi mục tiêu của chúng tôi là luôn nỗ lực đưa thông tin tới tất cả mọi người, thay đổi này dường như là yêu cầu cơ bản nhất. Cùng với kích cỡ font, khoảng cách giữa các dòng cũng được tăng lên 21px, để phù hợp với tiêu chuẩn trình bày là khoảng cách dòng bằng 120% kích thước chữ. Điều này giúp người dùng dễ dàng lướt qua các đoạn giới thiệu và đọc các văn bản dài.

Thân trang là phần được chú ý nhiều nhất trong tất cả các trang của dự án Wikimedia. Với hầu hết các dự án ngôn ngữ khác, kích thước chữ hiện nay quá nhỏ và dày so với tiêu chuẩn của chúng tôi. Việc thiếu khoảng trống trong trang có thể giúp tăng lượng thông tin truyền tải nhưng sẽ gây mỏi mắt khi đọc sâu. Ngoài ra, người ta không khuyến khích dùng kích thước font dưới 14px đối với các ngôn ngữ không sử dụng ký tự Latin. Các từ có chữ/số mũ và dấu nối dễ bị chen chúc lẫn nhau và rất khó phân biệt nếu không đảo mắt liên tục.

Vì sao chúng ta sử dụng các font serif (có chân) cho đề mục?
Để có sự tương phản và khác biệt rõ ràng hơn giữa văn bản chính và đề mục. Đề mục đóng vai trò như những điểm khởi đầu cho người dùng khi họ đọc trang. Đề mục mang tới sự đa dạng trực quan cho văn bản của chúng ta. Cả đề mục và hình ảnh đều có vai trò quan trọng làm giảm bớt sự nhàm chán và đơn điệu của văn bản thuần. Việc kết hợp giữa kiểu font serif (có chân) và sans-serif (không chân) thật ra không phải ý tưởng gì mới mẻ.

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