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.

Dahulu, kami mencoba-coba dengan beberapa fon alternatif yang berlisensi bebas, di antaranya: Arimo, Liberation Sans, dan lain-lain. Pada akhirnya, fon-fon ini antara tidak sering dipasang oleh pengguna (tidak berpengaruh) atau digambar dengan jelek di sistem yang tua atau tanpa smoothing/hinting fon.

Mengapa kita memasukkan fon tidak bebas ke dalam daftar fon?
Daftarnya berisi beragam fon dari Helvetica Neue hingga Arial yang tersedia di seluruh platform utama. Meskipun Arial sering digunakan sebagai fon baku, kami perlu menetapkannya agar perubahan CSS-nya teratur. Untuk memastikan pengalaman yang teratur bagi pengguna di berbagai platform sebaik yang kami bisa, kami memutuskan untuk memasukkan fon tidak bebas ke dalam daftar karena banyak sistem operasi (seperti Windows, MacOS, dan iOS) tidak memasang fon FOSS secara bawaan. Sementara itu banyak sistem operasi akan menggunakan fon FOSS (seperti Nimbus Sans L) sebagai pengganti "Helvetica".

Penting untuk diperhatikan bahwa, dikarenakan cara kerja pengaturan keluarga fon CSS, menetapkan fon tertentu tidak berarti akan terjadi ketergantungan pada fon itu, serta tidak membuat pengguna harus mengunduh fon itu. Penetapan fon berarti fon yang kita tetapkan hanya akan muncul apabila pengguna sudah memilikinya, dan teks Wikimedia akan tetap muncul tidak peduli Anda punya fon tertentu atau tidak.

Bagaimana dengan menggunakan fon web?
Fon web adalah sistem untuk memberikan fon kepada pengguna yang belum memasangnya. Ini di antaranya terdiri dari pengunduhan fon yang kami sediakan oleh peramban pengguna, yang menyebabkan dimuatnya sumber daya tambahan dan akan memberi dampak negatif kepada performa situs (seberapa cepat halaman dimuat). Ini terjadi terutama di peramban yang tua. Di masa yang akan datang kami mungkin akan mempertimbangkan menggunakan fon web, tetapi untuk sekarang pembaruan ini menyediakan keterbacaan dan konsistensi yang lebih tinggi tanpa memperburuk waktu pemuatan halaman.

Mengapa warna teks tubuhnya diubah?
Niali yang baru ( di atas  ) memiliki rasio kontras 15.3:1, yang merupakan rating AAA menurut WCAG 2.0 1.4.6. Warna hitam murni untuk salinan tubuh dan penjelas gambar tidak disarankan di letakkan di atas putih dikarenakan berapa alasan. Pengguna disleksia sensitif terhadap peletakan teks hitam murni di atas latar belakang putih murni dikarenakan kontrasnya yang tinggi. Ini menyebabkan kata-kata menjadi melingkar dan kabur. Untuk menghindari ini, gunakan warna yang tidak terlalu putih untuk latar belakang Anda, misalnya abu-abu muda, atau kurangi kontras antara latar depan (teks) dan latar belakang. Untuk pengguna tanpa masalah aksesibilitas, kontras yang tinggi antara hitam murni dan putih murni juga bisa menyebabkan mata lelah.

Bagaimana perubahan ini dilaksanakan?
Pembaruan tipografi ini pertama diuji selama empat bulan, dan kemudian dirilis di web mobile untuk semua proyek Wikimedia pada Oktober 2012. Pembaruan ini di antaranya terdiri dari deklarasi daftar fon untuk judul serif dan salinan tubuh sans serif, serta pembesaran ukuran huruf dan judul untuk salinan tubuh dan caption.

Perubahan ini kemudian dibawa ke desktop sebagai fitur beta, mulai November 2013. Fitur beta ini kemudian melalui tiga iterasi utama berdasarkan umpan balik komunitas.

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