Penyegaran tipografi

(atas) Tipografi lama di OSX
(bawah) Tipografi segar di OSX

Tipografi Lama (atas) dan Segar (bottom), di Ubuntu/Firefox

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:

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.

Dalam konteks itu, kami telah membuat perubahan-perubahan berikut:

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 #252525 di atas #FFFFFF, dari #000000 di atas #FFFFFF. 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...

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.

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.

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 (#252525 di atas #FFFFFF) 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.

Lihat pula masalah yang kami sudah ketahui mengenai proyek bahasa lain.

Bagaimana dengan skrip non-Latin?

Ukuran huruf yang lama untuk skrip non-Latin adalah 0.8em (12.8px). Ini mempersempit grif dan superskrip serta membuat hurufnya terlalu kecil untuk dibaca. Skrip-skrip yang diamati adalah Urdu, Marathi, Bahasa Melayu, Cina, Korea, dan Navajo. Peningkatan ukuran huruf salinan tubuh akan memperbaiki keterbacaan untuk kebanyakan skrip. Khusus untuk Navajo, penimpaan akan dilakukan karena pasangan karakter digambarkan dengan aneh dalam Helvetica.

Panduan CSS inline bisa disediakan untuk memastikan bahasa melakukan penimpaan dalam basis kasus per kasus secara seperlunya. Tolong beri komentar di halaman Pembicaraan apabila Anda menggunakan skrip non-Latin dan menemui masalah yang signifikan.

Apa kalian menjalankan eksperimen terkendali seperti uji coba A/B atau terpisah untuk mengukur dampak tipografi yang baru?

Tidak.

Kami biasanya pertama-tama meluncurkan fitur baru dalam uji coba terkendali, untuk menilai secara objektif performa dan hipotesis uji cobanya mengenai dampak positif yang mereka berikan. Dalam versi yang paling umum (uji coba A/B atau terpisah) kami secara acak memilih sebuah sampel pembaca atau penyunting, memberikan sebagian versi yang baru, dan tidak memberikan pengalaman baru kepada sebagian yang lainnya. Dalam kasus ini, ilmuwan peneliti Foundation disarankan untuk tidak menjalankan uji coba A/B atau eksperimen terkendali apa pun. Rasanya kurang mungkin perubahan tipografi kecil bisa membuat dampak yang besar terhadap metrik yang berkaitan dengan membaca seperti waktu yang dihabiskan di situs, banyak tayangan halaman per pengunjung, dll., yang bisa diukur dengan yakin.

Tujuan terkait, seperti situs Wikimedia semakin dipercaya atau meningkatnya pemahaman dalam membaca, bukanlah jenis data yang sebaiknya dipelajari secara kuantitatif, atau juga dipengaruhi oleh faktor-faktor yang tidak terkait seperti konten dan subjek halaman, jenis halaman yang dibaca (Pembicaraan versus artikel, sebagai contoh), dan lebih banyak lagi.

Apakah menggunakan fon baru ini bisa membuat Wikipedia menjadi lebih lambat untuk saya?

Tidak. Kami biasanya mengukur dampak fitur baru terhadap performa situs, artinya apakah fitur membuat halaman lebih lama dimuat. Dalam kasus ini, kami tidak menambah sumber daya yang pengguna harus unduh untuk membaca halaman, jadi perubahan performa bisa diabaikan.

Referensi

Pranala kode

Variabel gaya Vector dalam LESS

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• Plus berkas wiki lokal seperti en:MediaWiki:Vector.css dan en:MediaWiki:Common.css

Lihat pula

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