Cải tiến cách trình bày

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

(top) Old typography on OSX
(bottom) Refreshed typography on OSX

(top) Old and (bottom) Refreshed typography, on Ubuntu/Firefox

Kiểu trình bày cũ xem trên hệ điều hành OSX (trên)
Kiểu trình bày mới xem trên hệ điều hành OSX (dưới)

Kiểu trình bày cũ xem trên hệ điều hành Windows (trên)
Kiểu trình bày mới xem trên hệ điều hành Windows đã cài đặt các font chữ miễn phí (sử dụng font Linux Libertine và Arimo) (dưới)

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:

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.

Trong phạm vi như vậy, chúng tôi đã thực hiện những thay đổi sau:

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

Lưu ý rằng những danh sách này không có nghĩa là bạn sẽ thấy tất cả hoặc bất kỳ phông chữ nào trong số này. Đúng hơn, trình duyệt và hệ điều hành của bạn sẽ tìm phông chữ đầu tiên trong danh sách mà bạn đã cài đặt (hoặc phông chữ mà chúng có quy tắc "khớp") và sẽ hiển thị phông chữ đó.

Giãn cách và kích thước mới cho tiêu đề, nội dung và phần đầu

Với chiều rộng văn bản hiện tại, các tiêu đề cần nổi bật rõ ràng và phần đầu (khoảng trắng giữa các dòng) cần đủ để có thể đọc dễ dàng mà không gây mỏi mắt. Các tiêu đề bây giờ sẽ được đặt như sau: H1 (tiêu đề trang) sẽ là 1,3/1,8em, H2 (tiêu đề phần chính) sẽ là 1,3/1,4em. H3 sẽ là 1,6/1,17em, H4 1,6/1em, H5 1,6/1em. Bản sao nội dung đã được tăng lên 0,875em (từ 0,8em). Tùy thuộc vào trình duyệt và hệ điều hành của bạn, điều này sẽ chuyển thành các giá trị pixel hơi khác nhau nhưng nhìn chung sẽ dẫn đến kích thước phông chữ nội dung lớn hơn một chút. Chiều cao của dòng chỉ số trên (sup) và chỉ số dưới (phụ) hiện được đặt thành 1, để khắc phục sự cố tồn tại lâu dài với các số tham chiếu ảnh hưởng đến phần đầu.

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 #252525 trên nền #FFFFFF, so với #000000 trên nền #FFFFFF 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.)

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

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.

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.

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

Vì sao các bạn dùng Linux Libertine, Georgia, và Times làm các font serif?

Tên đề mục là những điểm khởi đầu đưa người đọc đến với bài viết. Font serif sẽ giúp họ phân biệt một cách trực quan giữa phần văn bản chính (thân trang) và đề mục, khiến việc lướt qua nội dung trang trở nên dễ dàng hơn. Các font Serif cũng được biết đến với tác dụng truyền tải một phong cách truyền thống phù hợp với các mục tiêu thiết kế của chúng tôi.

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.

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

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 (#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.

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

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/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?

Không.

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.

Tham khảo

Code links

Vector style variables in LESS

• (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

Xem thêm

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