Typography refresh/id

Dokumen ini menjelaskan pembaruan tipografi pada 2014 untuk kulit 'Vector" yang baku di proyek-proyek Wikimedia dan paket perangkat lunak MediaWiki.

Ringkasan perubahan
Kami mendekati pembaruan tipografi baku Wikimedia ini dengan memperhatikan persyaratan-persyaratan berikut:

Dalam konteks itu, kami telah membuat perubahan-perubahan berikut:
 * 1) Keterbacaan: Jenis huruf harus mudah dibaca dan enak dilihat dalam ukuran apa saja. Jenis sebagai elemen harus membantu membedakan antarmuka (seperti navigasi situs) dengan konten artikel.
 * Konsistensi: Pengalaman visual yang konsisten baik di peranti desktop maupun peranti bergerak.
 * Ketersediaan: Semua jenis huruf yang kita gunakan harus sudah bisa digunakan (atau disediakan) di semua platform di mana proyek Wikimedia ada. Pilihan apapun harus menyesuaikan diri dengan mulus apa pun peranti dan platformnya (Mac OS X, Windows, Linux, dan sistem operasi peranti bergerak).
 * Aksesibilitas: Konten Wikimedia harus sangat mudah diakses bagi semua orang, termasuk orang yang memiliki cacat.


 * Spesifikasi fon baru: Kami telah menetapkan keluarga fon berikut: gaya judul ditetapkan menjadi "Linux Libertine, Georgia, Times, serif". Salinan tubuh (teks utama halaman) awalnya ditetapkan menjadi "Helvetica Neue, Helvetica, Arial, sans-serif", tetapi karena masalah di wiki yang non-Latin, telah dikembalikan ke "sans-serif" hingga solusi yang lebih baik ditemukan.


 * Perhatikan bahwa daftar ini tidak berarti Anda akan melihat semua atau salah satu dari fon ini. Melainkan, peramban dan sistem operasi Anda akan mencari fon pertama dalam daftar yang Anda telah pasang (atau yang mana yang memiliki aturan "matching"), dan menampilkan itu.


 * Ukuran huruf dan spasi baru untuk judul, salinan tubuh, dan pemisah: Dengan lebar teks yang sekarang, judul harus sangat mencolok dan pemisah (ruang antarbaris) perlu cukup besar untuk mencapai keterbacaan yang baik tanpa menyebabkan mata lelah. Judul sekarang diatur sebagai berikut: H1 (judul halaman) diatur menjadi 1.3/1.8em, H2 (judul bagian utama) diatur menjadi 1.3/1.4em. H3 diatur menjadi 1.6/1.17em, H4 1.6/1em, H5 1.6/1em. Salinan tubuh telah dibesarkan menjadi 0.875em (dari 0.8em). Bergantung pada peramban dan sistem operasi Anda, ini akan diterjemahkan menjadi nilai piksel yang sedikit berbeda-beda, tetapi pada umumnya menghasilkan ukuran fon tubuh yang lebih besar. Tinggi baris superskrip (sup) dan subskrip (sub) sekarang diatur menjadi bernilai 1, untuk memperbaiki masalah lama mengenai nomor referensi mempengaruhi pemisah.


 * Warna fon tubuh baru: Dalam triplet hex, warna salinan tubuh sekarang dijadikan  di atas , dari   di atas  . Dalam istilah yang lebih sedikit teknis, ini berarti warna diubah dari teks hitam murni di atas latar belakang putih murni, menjadi teks abu-abu sangat gelap di atas latar belakang putih murni. (Warna untuk pranala, judul, dan elemen lainnya tidak diubah.)

Pertanyaan yang sering diajukan
Berikut ini adalah jawaban bagi beberapa pertanyaan penting mengenai perubahan ini.

Siapa yang akan melihat perubahan ini?
Semua pengguna situs MediaWiki 1.23 yang menggunakan kulit Vector baku, termasuk pembaca dan penyunting. Ini dirancang utamanya bagi pembaca Wikimedia, tetapi perubahan ini sangat sedikit yang menonjol. Pengguna yang menggunakan preferensi mereka atau cara lain untuk menggunakan kulit alternatif, seperti Monobook atau Cologne Blue, tidak akan melihat perubahan.

Tolong perhatikan bahwa pengguna yang telah mengubahsuaikan CSS pribadi mereka, atau yang berada di situs di mana pengurus lokalnya telah mengubah CSS situs, mungkin melihat perbedaan dengan tipografi baku yang sekarang. Tolong periksa ringaksan dan FAQ ini untuk melihat apabila suatu elemen desain tertentu bisa dinilai sebagai penyebab perubahan ini.

Memang apa masalahnya dengan tipografi yang lama?
Teks adalah elemen visual inti dari proyek Wikimedia, baik proyek ensiklopedia (seperti Wikipedia) maupun proyek yang lebih kecil seperti Wikisource dan Wikibooks. Kami ingin pengguna kami merasakan akurasi, keandalan, dan kejelasan dari desain kami, tidak hanya dari konten yang mereka baca. Sebelum pembaruan tipografi ini, kami punya lebih dari 20 jenis ukuran yang ditetapkan secara sembarang untuk desktop, yang kelihatan tidak konsisten bagi para pengguna. Ukuran huruf terlalu kecil bagi banyak pembaca, dan tinggi baris bisa membuat pembaca konten yang panjang sulit. Untuk judul, mereka harus bertingkah sebagai titik masuk ke dalam teks yang panjang dan diatur sedemikian untuk membantu keterbacaan. Kami ingin mencapai keseimbangan dan kepaduan bagi para pengguna agar dapat membaca halaman secara efektif atau melakukan pembacaan teks yang panjang.

Masalah fungsional dengan gaya yang lama pertama-tama diatasi dengan cara memperbaiki tipografi mobile kami. Ini memberi kami kesempatan untuk menguji ukuran huruf yang lebih besar, pemisah yang lebih besar, dan judul serif. Sekarang, waktunya untuk mengatasi masalah keterbacaan dan aksesibilitas di semua bahasa/proyek, serta menciptakan konsistensi dalam bahasa desain di seluruh desktop, web mobile, dan aplikasi.

Apa ada fon ideal yang memenuhi kebutuhan keterbacaan kita dalam semua skrip? Apa kita sudah mencapainya?
Tidak, tidak ada satu pun fon sempurna yang memenuhi... Kami harus membuat keputusan yang praktis berdasarkan apa yang cukup mendekati persyaratan ini, di dalam batasan kami. Jutaan pengguna membaca Wikipedia di gawai yang berbeda setiap hari. Pemilihan fon yang sekarang akan membawa peningkatan keterbacaan dan konsistensi di berbagai platform, meskipun belum sempurna.
 * 1) Ada di mana-mana: artinya tersedia di semua sistem operasi desktop dan mobile yang populer.
 * 2) Dengan benar menggambarkan glif dan diaktirik: untuk ratusan skrip non_Latin, serta ruang antar sepasang karakter yang baik, agar pengguna tidak harus menyipitkan mata untuk membaca karakternya.
 * x-height yang bagus: agar hurufnya bisa dibaca pada ukuran kecil untuk hal-hal seperti navigasi, penjelas gambar, persyaratan layanan atau informasi sekunder.
 * 1) Hinting: menghindari karakter menjadi kabur saat ukurannya kecil, khususnya di Windows.

Mengapa ukuran huruf dan judulnya ditingkatkan?
Ini merupakan perubahan kecil dan konservatif. Ukuran huruf yang sebelumnya sulit dibaca oleh banyak pengguna. Kami menemukan melalui umpan balik pengguna bahwa pembesaran teks sering digunakan untuk membuat teksnya mudah dibaca oleh orang-orang dengan masalah penglihatan kecil. Karena kami ingin membuat informasi bisa diakses oleh semua pengguna, perubahan ini dianggap sebagai persyaratan dasar untuk semua perubahan dalam bidang ini. Selain itu ukuran huruf judul telah diperbesar menjadi judul 21px, mengikuti standar tipografi untuk judul, yaitu 120% ukuran huruf lainnya. Ini membantu pembaca yang sudah selesai membaca pengantar dan mulai membaca paragraf panjang.

Salinan tubuh adalah fokus dari halaman di proyek-proyek Wikimedia. Untuk kebanyakan proyek, bahasa ukuran hurufnya kecil dan sempit dengan ukuran yang sekarang. Kesempitan ini sedikit membantu efisiensi tetapi menyebabkan mata lemah apabila lama membaca. Juga, ukuran di bawah 14px tidak disarankan untuk skrip non-Latin. Kata-kata yang berisi superskrip dan glif sering terjepit dan tidak bisa dibaca tanpa menyipitkan mata.

Mengapa kita menggunakan fon serif untuk judul?
Menggabungkan serif dan sans-serif bukanlah ide yang tidak biasa ataupun orisinal. Kami melakukannya dalam kasus ini untuk memberikan kontras dan perbedaan yang lebih baik antara tubuh dan judul. Judul berperan sebagai titik masuk ketika pengguna membaca halaman, mencari informasi. Judul dan gambar memiliki peran penting dalam mewarnai visual halaman yang monoton. Ini penting sekali mengingat kebanyakan konten Wikimedia (halaman konten, halaman pembicaraan, teks bantuan, kebijakan, dll.) cukup panjang dan punya banyak bagian.

Mengapa kita menetapkan Linux Libertine, Georgia, dan Times sebagai fon serif?
Judul bagian merupakan titik masuk ke dalam artikel. Fon serif menyediakan pembeda dan karakter visual dibandingkan dengan salinan tubuh, yang membantu pengguna membaca halaman. Serif juga dikenal menyampaikan sikap tradisional yang sesuai dengan tujuan desain kami.

Linux Libertine tidak tersedia secara luas, tetapi merupakan fon serif bebas/terbuka yang berdesain baik yang juga digunakan di logo Wikipedia. Ini membuat fon ini sering ditemukan dalam bahasa desain Wikimedia, serta cocok untuk digunakan di judul. Georgia merupakan fon yang dioptimalkan untuk peramban dan layar. Fon ini juga tersedia secara luas di kebanyakan platform yang populer, termasuk bagi pengguna Windows, Mac OSX, dan iOS. Linux Libertine dan Georgia bersikap sebagai fon bagus yang saling melengkapi, dan bisa dipasangkan dengan Helvetica dan Arial. Times secara khusus ditetapkan untuk memastikan pengguna di sistem Linux memiliki serif yang bagus secara bawaan – sistem Linux secara bawaan tidak mengandung Linux Libertine, ataupun Georgia. Dengan menetapkan Times, kebanyakan pengguna Linux akan melihat Nimbus Roman No9 L.

Bahasa dan skrip yang dilaporkan punya masalah dengan Georgia atau Times di antaranya adalah Rusia/Kiril, Ibrani, Arab, Polandia, Cina, Jepang dan Korea.

Mengapa kita menentukan fon sans-serif baru?
Dahulunya konten tubuh kami hanya menetapkan "sans-serif" saja, membiarkan peramban menggunakan sans-serif bakunya. Dengan pengecualian Helvetica, Arial dan Nimbus Sans L, fon yang kebanyakan peramban gunakan dalam kondisi ini tidak mempertimbangkan penggambaran glif, pasangan, dan tanda diakritik yang benar pada ukuran kecil. Tidak ada fon bebas/terbuka yang menjawab kebutuhan ini dan tersedia di mana-mana (lihat tabel).

Kami menetapkan Neue Helvetica untuk pengguna Mac, karena merupakan versi yang lebih berkembang dari Helvetica di mana tanda bacanya telah diperbaiki, x-height-nya sedikit lebih konsisten, dan dalam beberapa kasus memiliki bowl dan counter yang lebih melengkung. Secara keseluruhan, fon ini merupakan optimisasi dari Helvetica, meskipun belum tentu ideal di semua skrip.

Kami menentukan fon untuk mencapai konsistensi di berbagai gawai dan platform serta untuk memastikan keterbacaan dan penggambaran yang baik dalam ukuran yang kecil baik untuk skrip Latin maupun non-Latin. Dengan ketentuannya sudah dibuat, pengguna yang tertarik bisa mengunduh fon bebas/terbuka yang telah diuji atau melaporkan masalah kepada kami untuk kasus cadangan, yang akan memungkinkan kami menjawab masalah ini dalam cara yang lebih sistematis.

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

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

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