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.

Bagaimana cara kita memperoleh umpan balik?
Kebanyakan perubahan tipografi pertama-tama diuji di mobile pada Oktober 2012, kebanyakan dari hal yang dipelajari dimasukkan ke dalam fitur beta tipografi untuk desktop yang diluncurkan pada Oktober 2013 dan melalui tiga rilis utama. Selama periode itu, fitur beta ini digunakan oleh lebih dari 14.000 pengguna di 10 Wikipedia teratas, dan lebih dari 100 diskusi dibuat di halaman Pembicaraan fitur ini.

Bisakah saya tidak mengikuti perubahan fon bawaan?
Ya. Pengguna situ Wikimedia yang masuk log bisa mengubahsuaikan CSS pribadi mereka (yaitu Special:MyPage/vector.css di setiap wiki) untuk menimpa beberapa atau seluruh perubahan. Anda bisa menyalin User:Ekips39/typographyrefreshoverride.css ke dalam CSS pribadi Anda apabila Anda tidak mau belajar CSS untuk tidak mengikuti perubahan ini. Anda juga bisa memilih untuk berganti ke kulit lain, di Preferensi Anda di bawah tab Tampilan. Terakhir, Anda bisa menentukan fon baku yang peramban Anda gunakan untuk menampilkan fon "serif" dan "sans-serif", jika sistem Anda tidak punya fon yang sebelumnya disebutkan, preferensi peramban ini akan digunakan.

Apa ini diuji di beragam peramban dan sistem operasi?
Ya. Daftar fon yang baru diuji di sistem-sistem operasi berikut: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 dan 7, Android, dan Chrome OS. Ukuran, judul, glif, hinting dan penggambaran fon diuji di Windows, Ubuntu Linux, Mac OS X 10.8, Android, dan Chrome OS.

Bagaimana proyek bahasa non-Inggris akan menyesuaikan diri dengan perubahan ini?
Secara bawaan, pembaruan tipografi akan diterapkan ke semua proyek (sebagai bagian dari kulit Vector). Mungkin ada bahasa yang perlu mengesampingkan beberapa gaya di atas untuk mengakomodasi skrip-skrip tertentu. Sebagai contoh, beberapa skrip mungkin perlu tinggi baris yang lebih tinggi atau ukuran fon yang lebih besar. Setiap wiki bisa mengesampingkan gaya-gaya tertentu dengan menyunting halaman MediaWiki:Vector.css mereka. Kami menyarangkan proyek lain untuk memeriksa perubahan yang dibawa oleh pembaruan ini, dan hanya menimpa CSS ketika diperlukan oleh skrip mereka.

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