Isi
Memilih jenis huruf yang indah tidak berguna jika terlihat jelek di layar Anda. Untuk menghindari teks yang mengerikan - atau lebih buruk - tidak terbaca, Anda harus selalu menguji apakah font berfungsi dengan baik pada perangkat yang digunakan pengunjung Anda. Anda mungkin terkejut; sebagian besar pengunjung Anda mungkin tidak menggunakan perangkat yang sama yang Anda gunakan untuk merancang dan mengembangkan. Faktanya, sebagian besar orang yang menjelajahi internet menggunakan mesin Android dan Windows.
Cara terbaik untuk menguji bagaimana font berperilaku adalah dengan menetapkan contoh teks di font dan mencobanya di semua perangkat yang Anda targetkan. Rendering yang buruk terutama terlihat pada bobot yang tipis.
Misalnya, font yang ditampilkan dengan baik di macOS mungkin tampak rapuh di Windows (lihat gambar di bawah). Penting untuk menggunakan perangkat nyata, karena alat pengujian browser online dan mesin virtual sering kali tidak akurat (lebih lanjut nanti).
Jika Anda belum memiliki konten situs Anda (tsk!), Coba Spesimen Font Web Tim Brown. Ini mengatur konten pada beberapa ukuran teks dan dengan warna latar belakang yang berbeda. Ini bukan pengganti konten nyata, tetapi akan berhasil dalam keadaan darurat.
Terkadang Anda beruntung, dan font yang telah Anda pilih didesain secara eksplisit untuk layar: ScreenSmart Hoefler & Co, eText Monotype, dan Tepi Membaca Biro Font adalah contoh koleksi yang dirancang khusus dengan mempertimbangkan layar dan akan terlihat indah di mana-mana. Tentu saja, ada baiknya untuk memeriksa ulang rendering teks, terlepas dari asal fontnya.
Tapi mengapa teks terlihat berbeda dari satu browser ke browser lainnya? Untuk menjawab pertanyaan itu, kita harus mengambil jalan memutar cepat ke detail detail rendering teks.
Rasterizing dan antialiasing
Proses mengubah garis besar font menjadi piksel disebut rasterisasi. Mesin rendering teks sistem operasi menempatkan garis besar (yaitu bentuk) setiap karakter pada ukuran font yang diinginkan pada kisi piksel. Selanjutnya, itu mewarnai semua piksel yang pusatnya ada di dalam garis besar (lihat gambar di bawah).
Dalam contoh ini, piksel aktif atau tidak aktif, tidak peduli berapa banyak garis luar yang ada dalam piksel. Perkiraan garis besar yang sempurna secara matematis ini disebut aliasing; antialiasing mencoba untuk mengurangi tampilan kasar seperti tangga yang disebabkan oleh resolusi layar yang terbatas.
Ide di balik antialiasing adalah untuk mencari tahu berapa banyak garis tepi yang ada di setiap piksel dan merepresentasikannya dengan nilai skala abu-abu. Dengan kata lain, jika garis luar mencakup 50 persen piksel, itu menggunakan 50 persen hitam untuk mewarnai piksel itu. Jika piksel seluruhnya berada di dalam garis tepi, 100 persen hitam digunakan, dan seterusnya. Ini mengarah ke rendering antialiased yang mengurangi aliasing (lihat gambar di bawah). Anda akan sering melihat istilah 'antialiasing abu-abu' digunakan untuk menjelaskan efek ini.
Sementara antialiasing meningkatkan kualitas rendering teks, dimungkinkan untuk meningkatkan hasil lebih lanjut dengan menggunakan antialiasing subpiksel. Antialiasing subpiksel memanfaatkan karakteristik layar untuk meningkatkan resolusi teks raster. Setiap piksel dalam tampilan terdiri dari tiga subpiksel lonjong: merah, hijau, dan biru (ada konfigurasi lain, tetapi prinsip yang sama berlaku). Sistem operasi dapat mengontrol subpiksel ini satu per satu; subpiksel antialiasing mengeksploitasi itu dengan menerapkan perhitungan cakupan untuk setiap subpiksel (lihat gambar di bawah).
Perbedaan antara opsi rendering teks ini menjadi jelas saat Anda mulai bekerja pada ukuran teks yang lebih kecil. Tanpa antialiasing, karakter dengan cepat kehilangan garis besarnya.Antialiasing abu-abu membuat karakter menjadi buram, tetapi bentuknya tetap dipertahankan. Antialiasing subpiksel membuat karakter tajam tetapi juga memperkenalkan beberapa warna pinggiran di sekitar tepi karakter.
Kiat antipaliasing
Anda dapat mengubah pengaturan antialiasing melalui non-standar -webkit-font-smoothing dan -moz-osx-font-smoothing Properti CSS. Sayangnya, banyak framework dan library CSS yang menggunakan ekstensi antialiased dan grayscale nilai untuk membuat teks tampak lebih terang di macOS. Namun, sebagian besar pengembang dan perancang tidak menyadari bahwa ini menonaktifkan antialiasing subpiksel dan membuat teks tampak lebih buram, sehingga merusak keterbacaan.
Mengubah rendering teks pilihan orang lain menjadi kurang terbaca sangatlah tidak bijaksana. Jika Anda harus memiliki teks yang lebih ringan, gunakan bobot yang lebih ringan daripada menonaktifkan rendering subpiksel.
Mesin rendering teks
Sebagian besar sistem operasi menggunakan mesin rendering teks miliknya sendiri, sementara yang lain menggunakan mesin open-source yang sama (meskipun tidak harus dengan konfigurasi yang sama). Namun, semuanya mendukung antialiasing dan subpixel antialiasing tetapi sedikit berbeda dalam implementasinya. Di banyak sistem operasi, pilihan metode antialiasing dapat dipilih oleh pengguna. Pada Windows, misalnya, subpiksel antialiasing disebut ClearType; di macOS, ini disebut LCD Font Smoothing.
Saat ini ada empat mesin rendering teks utama: Antarmuka Perangkat Grafik (juga dikenal sebagai GDI) dan DirectWrite di Windows; Grafik Inti di macOS dan iOS; dan FreeType sumber terbuka di Linux, Chrome OS, dan Android.
Secara umum, browser akan menggunakan mesin rendering teks yang asli dari sistem operasi yang menjalankannya. Chrome, misalnya, menggunakan DirectWrite di Windows, Core Graphics di macOS, dan FreeType di Android. Windows unik karena menawarkan dua mesin rendering teks: GDI dan DirectWrite yang lebih baru.
Semua browser modern menggunakan DirectWrite, jadi Anda tidak perlu khawatir tentang GDI kecuali satu pengecualian: beberapa browser menggunakan rendering GDI yang lebih rendah jika mesin tidak memiliki perangkat keras grafis khusus. Alat pengujian browser online dan mesin virtual sering kali tidak memiliki perangkat keras grafis khusus, sehingga rendering teks pada alat ini tidak akurat.
Idealnya, semua teks dirender menggunakan subpiksel antialiasing karena membuat teks yang paling terbaca. Sayangnya, hal itu tidak selalu memungkinkan - misalnya, subpiksel antialiasing sering dinonaktifkan di perangkat yang dapat dirotasi, seperti tablet dan ponsel. Saat Anda memutar layar perangkat ini, subpiksel tidak lagi diatur dalam pola yang diharapkan oleh rasterizer dan akan menyebabkan antialiasing subpiksel terlihat jelek.
Browser juga menonaktifkan antialiasing subpiksel dalam situasi serupa, misalnya saat teks diputar atau dianimasikan. Dalam kasus ini, teks raster tidak lagi sesuai dengan tata letak subpiksel dari posisi asli teks dan perlu diraster lagi. Ini mahal, terutama untuk animasi, jadi sebagian besar browser menggunakan antialiasing abu-abu, yang tidak mengalami masalah yang sama dan berfungsi dalam orientasi apa pun.
Beberapa browser - Chrome di macOS, misalnya - juga menonaktifkan subpiksel antialiasing pada layar resolusi tinggi untuk memberikan pengalaman pengguna yang lebih konsisten. Browser lain hanya mengaktifkan antialiasing subpiksel pada teks kecil, karena perubahan kecil dalam rendering teks kurang terlihat pada ukuran yang lebih besar.
Ada beberapa kasus lain di mana browser menonaktifkan antialiasing subpiksel. Aturan yang digunakan browser untuk memilih metode antialiasing terus diperbarui saat kasus sudut baru, dan masalah, ditemukan. Perubahan yang sering terjadi ini membuat sangat sulit untuk melacak apa yang terjadi dengan rendering teks Anda. Apa yang pernah digunakan antialiasing subpiksel dapat kembali ke skala abu-abu dengan pembaruan browser berikutnya. Satu-satunya cara untuk mengetahui dengan pasti bagaimana teks Anda dirender adalah dengan mengujinya pada perangkat yang sebenarnya.
Anda mungkin terbiasa menguji situs Anda di beberapa browser. Pengujian rendering teks meningkatkan jumlah pengujian yang perlu Anda lakukan manifold. Anda tidak hanya perlu memeriksa semua kombinasi sistem operasi dan browser, tetapi juga semua pengaturan rendering teks yang umum.
Beberapa perangkat mungkin telah dikonfigurasi untuk menggunakan antialiasing abu-abu sementara yang lain menggunakan campuran antialiasing abu-abu dan subpiksel. Untuk membuatnya lebih sulit, tidak mungkin menggunakan alat pengujian browser online atau mesin virtual, karena rendering teks sering berbeda dari perangkat sebenarnya.
Saat menguji, selalu gunakan sampel yang mewakili konten Anda. Pustaka pola cocok untuk pengujian rendering jenis karena mencakup banyak sampel konten Anda: header, teks isi, label, warna latar belakang, dan animasi. Memiliki contoh konten Anda di satu halaman memungkinkan Anda memeriksa semua kombinasi gaya dan warna latar belakang dengan cepat.
Waspadai teks yang tidak terbaca atau tampak tipis di beberapa sistem operasi. Jika Anda menemukan masalah, ubah bobot yang berbeda dalam jenis font yang sama, buat teks lebih gelap, atau pilih jenis huruf yang berbeda. Semoga berhasil.
Artikel ini awalnya diterbitkan dalam net terbitan 301, majalah terlaris di dunia untuk perancang dan pengembang web. Beli edisi 301 atau berlangganan net.
