Teknik CSS Modern Untuk Meningkatkan Keterbacaan

Kita dapat membaca dengan banyak cara, dan ada banyak tipe pembaca yang berbeda, masing-masing dengan kebutuhan, keterampilan, bahasa, dan, di atas segalanya, kebiasaan mereka sendiri. Membaca novel di rumah berbeda dengan membaca di kereta, sama seperti membaca koran berbeda dengan browsing versi online. Membaca, seperti aktivitas lainnya, membutuhkan latihan agar seseorang menjadi cepat dan efisien. Pada dasarnya, kita membaca lebih baik hal-hal yang paling sering kita baca.

Aspek apa yang harus kita pertimbangkan ketika merancang dan mengembangkan untuk membaca? Bagaimana kita bisa menciptakan pengalaman yang dapat diakses, nyaman, inklusif untuk semua pembaca, termasuk yang paling tertantang dan mereka yang terkena disleksia?

Spasi, Kata, Kalimat, dan Paragraf

Satuan

Pada sebuah halaman web, tersedia banyak unit untuk kita menyesuaikan ukuran font teks. Memahami unit mana yang akan digunakan sangat penting untuk menetapkan struktur seluruh bagian bacaan. Sifat web yang dapat mengalir kembali mengharuskan kami untuk mempertimbangkan beberapa aspek, seperti ukuran area pandang dan preferensi membaca pengguna.

Untuk alasan ini, pilihan yang paling cocok umumnya adalah em dan rem, yang merupakan unit khusus font. Misalnya, mengatur margin antar paragraf menggunakan em membantu mempertahankan ritme vertikal saat ukuran teks berubah. Namun, ini bisa menjadi masalah ketika font serif diganti dengan sans-serif dalam suatu bagian. Bahkan, pada ukuran font yang sama, font dapat terlihat sangat berbeda secara optik. Secara tradisional, tinggi karakter "x" huruf kecil (tinggi x) adalah referensi untuk menentukan ukuran karakter yang tampak.

Dengan menggunakan aturan font-size-adjust, kita dapat merender font secara optik dengan ukuran yang sama, karena properti akan cocok dengan ketinggian huruf kecil. Sayangnya, properti ini saat ini hanya tersedia di Firefox dan di Chrome dan Edge di belakang bendera, tetapi dapat digunakan sebagai peningkatan progresif menggunakan pemeriksaan @support:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

Ini juga membantu dengan swap dari font fallback ke yang dimuat dari jarak jauh (misalnya, menggunakan Google Font).

Tinggi Garis Optimal

Menurut kami tipografi itu hitam putih. Tipografi benar-benar putih [...] Ini adalah ruang antara kulit hitam yang benar-benar membuatnya.

— Massimo Vignelli, Helvetica, 2007

Karena tipografi lebih merupakan masalah "putih" daripada "kulit hitam", ketika kita menerapkan gagasan ini ke desain situs web atau aplikasi web, kita harus mempertimbangkan fitur-fitur khusus seperti tinggi garis, margin antar paragraf, dan jeda baris.

Mengatur ukuran font dengan mengandalkan x-height membantu mengoptimalkan tinggi garis. Tinggi baris default di browser adalah 1,2 (nilai tanpa unit relatif terhadap ukuran font), yang merupakan nilai optimal untuk Times New Roman tetapi tidak untuk font lain. Kita juga harus mempertimbangkan bahwa spasi baris tidak tumbuh secara linier dengan ukuran font dan itu tergantung pada berbagai faktor seperti jenis teks. Dengan menguji beberapa font umum untuk membaca bentuk panjang, dikombinasikan dengan ukuran dari 8 hingga 14 poin, kami dapat menyimpulkan bahwa, di atas kertas, rasio antara tinggi-x dan spasi baris optimal adalah 37,6.

Dibandingkan dengan membaca di atas kertas, membaca layar umumnya membutuhkan lebih banyak jarak antar baris. Oleh karena itu, kita harus menyesuaikan rasio ke 32 untuk lingkungan digital. Dalam CSS, nilai empiris ini dapat diterjemahkan ke dalam aturan berikut:

 p { line-height: calc(1ex / 0.32); }

Dalam konteks membaca yang benar, aturan ini menetapkan ketinggian garis yang optimal untuk font serif dan sans-serif, bahkan saat alat tipografi tidak tersedia atau saat pengguna telah menyetel font yang menimpa font yang dipilih oleh desainer.

Tentukan Skala

Sekarang kita telah menyesuaikan ukuran font dan menggunakan unit ex untuk menghitung tinggi garis, kita perlu menentukan skala tipografi untuk mengatur jarak antar paragraf dengan benar dan untuk memberikan ritme yang baik pada pembacaan. Seperti yang dikatakan sebelumnya, spasi baris tidak tumbuh secara linier tetapi bervariasi sesuai dengan jenis teks. Untuk judul dengan ukuran font yang besar, misalnya, kita harus mempertimbangkan rasio tinggi baris yang lebih tinggi.

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

Spasi Huruf Dan Kata

Saat mengerjakan keterbacaan, kita juga harus mempertimbangkan pembaca yang tertantang, seperti mereka yang menderita disleksia dan ketidakmampuan belajar. Disleksia perkembangan mempengaruhi membaca, dan diskusi serta penelitian mengenai penyebabnya masih berlangsung. Penting untuk menggunakan studi ilmiah untuk memahami efek yang dimiliki variabel visual dan tipografi terhadap membaca.

Misalnya, dalam sebuah penelitian yang diikuti oleh perusahaan saya ("Menguji Keterbacaan Teks dari Font yang Ramah Disleksia"), ada bukti jelas bahwa bentuk mesin terbang dari font dengan keterbacaan tinggi tidak benar-benar membantu membaca, tetapi jarak antar karakter yang lebih lebar (pelacakan) melakukan. Temuan ini dikonfirmasi oleh penelitian lain tentang keefektifan peningkatan jarak (“Bagaimana Aspek Visual Dapat Menjadi Penting dalam Akuisisi Membaca: Kasus Kerumunan yang Menarik dan Disleksia Perkembangan”).

Studi ini menyarankan bahwa kita harus memanfaatkan dinamisme dan daya tanggap halaman web dengan menawarkan alat yang lebih efektif, seperti kontrol untuk menangani spasi. Teknik umum saat memperbesar ukuran karakter adalah menyesuaikan spasi antara huruf dan kata melalui properti CSS seperti letter-spacing word-spacing .

Masalah dengan ini adalah bahwa letter-spacing bertindak tanpa syarat dan menghentikan pelacakan font, menyebabkan halaman merender ruang yang tidak optimal.

Atau, kita dapat menggunakan font variabel untuk mendapatkan kontrol lebih besar atas rendering font. Desainer font dapat membuat parameter spasi dengan cara variabel dan non-linear , dan dapat menentukan bagaimana berat dan bentuk glyph dapat beradaptasi dengan lebih baik dengan kebiasaan pembaca. Dalam contoh berikut, dengan menggunakan font Amstelvar, kami dapat meningkatkan ukuran optik serta spasi dan kontras, seperti yang dimaksudkan oleh perancang.

Artikel Web.dev “Pengantar Font Variabel di Web” memiliki lebih banyak detail tentang apa itu font variabel dan bagaimana menggunakannya. Dan periksa alat Variable Fonts untuk melihat cara kerjanya.

Lebar Dan Alignment

Untuk mengoptimalkan alur membaca, kita juga harus mengerjakan lebar paragraf, yaitu jumlah karakter dan spasi pada satu baris. Saat membaca, mata kita berfokus pada sekitar delapan huruf dalam satu foveatio (yaitu operasi yang diaktifkan ketika kita melihat suatu objek), dan hanya mampu menangani beberapa pengulangan berurutan . Oleh karena itu, jeda baris sangat penting: Momen memindahkan fokus seseorang dari akhir baris ke awal baris berikutnya adalah salah satu operasi yang paling kompleks dalam membaca dan harus difasilitasi dengan menjaga jumlah karakter yang tepat per jenis teks. Untuk paragraf dasar, panjang umumnya sekitar 60 hingga 70 karakter per baris. Nilai ini dapat dengan mudah diatur dengan unit ch dengan menetapkan lebar ke paragraf:

 p { width: 60ch; max-width: 100%; }

Pembenaran juga memainkan peran penting dalam membaca lintas baris. Dukungan tanda hubung untuk bahasa tidak selalu optimal di berbagai browser; oleh karena itu, harus diperiksa. Bagaimanapun, hindari teks yang dibenarkan tanpa adanya tanda hubung karena spasi horizontal yang akan dibuat akan menjadi hambatan untuk membaca.

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

Tanda hubung manual dapat digunakan untuk bahasa yang tidak memiliki dukungan asli. Ada beberapa algoritme (baik sisi server maupun sisi klien) yang dapat menyuntikkan ‐ entitas dalam kata-kata, untuk menginstruksikan browser di mana token dapat rusak. Karakter ini tidak akan terlihat, kecuali jika terletak di akhir baris, di mana ia akan dirender sebagai tanda hubung. Untuk mengaktifkan perilaku ini, kita perlu mengatur hyphens: manual CSS .

Kontras Latar Depan

Kontras karakter dan kata-kata dengan latar belakang sangat penting untuk keterbacaan. WCAG telah menetapkan pedoman dan batasan untuk standar yang berbeda (A, AA, AAA) yang mengatur kontras antara teks dan latar belakang. Kontras dapat dihitung dengan alat yang berbeda, baik untuk lingkungan desain dan pengembangan. Ingatlah bahwa validator otomatis adalah alat pendukung dan tidak menjamin kualitas yang sama dengan tes yang sebenarnya.

Dengan menggunakan variabel CSS dan pernyataan calc , kita dapat menghitung secara dinamis warna yang menawarkan kontras terbaik dengan latar belakang. Dengan cara ini, kami dapat menawarkan kepada pengguna berbagai jenis kontras (sepia, abu-abu muda, mode malam, dll.), dengan mengonversi seluruh tema sesuai dengan warna latar belakang.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

Selain itu, dengan pengenalan dan dukungan lintas-browser dari kueri media prefer-color-scheme , pengelolaan peralihan dari tema terang ke gelap menjadi lebih mudah, sesuai dengan preferensi pengguna.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

Maju

Merancang dan mengembangkan untuk membaca yang optimal membutuhkan banyak pengetahuan dan pekerjaan dari banyak profesional. Semakin banyak pengetahuan ini tersebar di seluruh tim, semakin baik pengguna nantinya. Di bawah ini adalah beberapa poin untuk membawa kita ke hasil yang baik.

Untuk Desainer

• Pertimbangkan struktur semantik sebagai bagian dari proyek, bukan detail teknis;
• Tata letak dokumen dan metrik font, terutama mengapa dan bagaimana pilihan Anda. Mereka akan membantu pengembang untuk mengimplementasikan desain dengan benar;
• Kurangi variabel tipografi sebanyak mungkin (lebih sedikit keluarga, gaya, dan varian).

Untuk Pengembang

• Pelajari prinsip-prinsip tipografi untuk memahami keputusan desain yang dibuat dan bagaimana menerapkannya;
• Gunakan unit relatif terhadap ukuran font untuk menerapkan tata letak responsif (padding, margin, gap) yang disesuaikan dengan preferensi pengguna;
• Hindari manipulasi metrik font yang tidak terkendali. Keterbacaan mungkin terganggu ketika batasan font tidak diperhatikan.

Untuk Tim

• Membaca dan memahami prinsip-prinsip WCAG;
• Pertimbangkan penyertaan dan aksesibilitas sebagai bagian dari proyek (bukan masalah terpisah).

Membaca adalah kegiatan yang kompleks. Meskipun banyak sumber daya tentang tipografi web dan makalah akademis yang mengidentifikasi area untuk perbaikan, tidak ada resep ajaib untuk mencapai keterbacaan yang baik. Jumlah variabel yang perlu dipertimbangkan mungkin tampak berlebihan, tetapi banyak dari variabel tersebut dapat dikelola.

Kita dapat mengatur tinggi baris paragraf yang optimal menggunakan unit ex , serta mengatur lebar paragraf menggunakan unit ch , untuk menghormati pengaturan browser pilihan pengguna untuk ukuran font dan keluarga. Kita dapat menggunakan font variabel untuk menyesuaikan jarak antara huruf dan kata, dan kita dapat memanipulasi goresan mesin terbang untuk meningkatkan kontras, membantu pembaca dengan gangguan penglihatan dan disleksia. Kami bahkan dapat secara otomatis menyesuaikan kontras teks menggunakan variabel CSS, memberi pengguna tema pilihan mereka.

Semua ini membantu kami membangun halaman web dinamis yang keterbacaannya dioptimalkan sesuai dengan kebutuhan dan preferensi pengguna. Terakhir, mengingat bahwa setiap implementasi kecil atau detail teknologi dapat membuat perbedaan besar, pengujian kinerja membaca pengguna tetap penting dilakukan menggunakan artefak akhir.

Sumber Daya Terkait

• “Menguji Keterbacaan Teks Font Ramah Disleksia,” Galliussi, Perondi, Chia, Gerbino, Bernardis (2020)
• “Bagaimana Aspek Visual Dapat Menjadi Sangat Penting Dalam Akuisisi Membaca: Kasus Menarik Dari Kerumunan Dan Disleksia Perkembangan,” Gori, Facoetti (2015)