Langsung ke kesimpulan: artikel yang enak dibaca bukanlah artikel yang diberi font keren. Artikel yang enak dibaca adalah artikel yang begitu dibuka langsung jelas isinya, bisa dilanjutkan lagi kalau perhatian sempat buyar, tidak berantakan walau hurufnya diperbesar, dan terbaca natural dalam bahasa apa pun. Pembaca tidak datang untuk menaklukkan artikelmu. Artikellah yang harus menunjukkan jalan.
Ringkasan dalam 3 baris:
- Titik awal praktis yang mudah dipakai: teks isi sekitar 17-18px, spasi baris 1,7-1,9, dan lebar baris yang tidak terlalu panjang. Ini bukan hukum yang berlaku untuk semua kasus.
- Pada WCAG 2.2 (standar internasional aksesibilitas web), yang penting adalah tidak merusak kontras, pembesaran teks 200%, reflow di 320 CSS px (tata letak menyesuaikan lebar layar), penimpaan spasi teks, dan penggunaan keyboard. [R1-R8]
- Untuk 12 bahasa, jangan menempel CSS yang sama 12 kali. Buat fondasi aksesibilitas bersama, lalu sesuaikan untuk tiap sistem tulisan. [R10-R13]
1. Keterbacaan bukan soal selera, tapi desain 3 lapis
Keterbacaan punya setidaknya tiga lapis: huruf terlihat, tulisan bisa diikuti, dan halaman bisa dioperasikan. Huruf 18px pun melelahkan kalau tulisannya berupa tembok. Tulisan sesederhana apa pun melelahkan kalau tombolnya terlalu kecil. Jadi "cukup perbaiki ukuran font lalu selesai" itu seperti menggosok papan nama rumah sampai kinclong sambil membongkar tangganya.
2. Pembaca tidak membaca semuanya dari awal, jadi buat artikel yang bisa dibaca dalam 4 tingkat
Di web, membaca sekilas itu hal biasa. Maka buatlah artikel yang bisa dibaca dalam empat tingkat: 5 detik = judul dan pembuka, 30 detik = judul H2 dan teks tebal, 3 menit = poin-poin penting, baca mendalam = seluruh isi. Ini bukan berarti hanya boleh menulis yang pendek. Artinya, tulisan panjang pun harus punya banyak perhentian di tengah jalan.
Kalau H2 saja sudah membentuk alur cerita, tiap bagian dibuka dengan kesimpulan kecil, dan tabel serta poin-poin memudahkan perbandingan, maka "orang yang membaca semuanya" dan "orang yang hanya butuh jawabannya" bisa berbagi satu halaman.
3. Mulai dari teks isi sekitar 17-18px
Tidak ada ukuran terbaik yang mutlak untuk teks isi web. Namun huruf yang terlalu kecil menurunkan keterlihatan, dan dalam penelitian pelacakan mata pada halaman web sungguhan, ukuran font yang lebih besar berkaitan dengan waktu fiksasi yang lebih singkat. [R14] Dalam praktik, mulailah dari 17-18px untuk teks isi dan susun dengan satuan yang mudah diperbesar seperti rem.
Yang penting: "sudah 18px" bukan berarti "sudah aksesibel". Kriteria Resize Text pada WCAG 2.2 AA menuntut isi dan fungsi tidak hilang sampai pembesaran 200%. [R3] Kalau menu lenyap begitu pembaca memperbesar tampilan, layar pertama 18px yang cantik itu hanyalah foto kenangan.
4. Spasi baris, jarak antarparagraf, dan lebar baris mengurangi "kemacetan huruf"
Spasi baris sekitar 1,7-1,9 sebagai nilai awal memberi ruang napas pada artikel web yang panjang. Beri juga jarak yang jelas antarparagraf. Prinsip dasarnya satu paragraf satu topik; hindari blok raksasa tanpa jeda sama sekali. [R9]
Untuk huruf Latin, ada penelitian yang menunjukkan panjang baris menengah sekitar 55 karakter efektif, dan dalam praktik 55-70 karakter adalah titik awal yang mudah dipakai. [R15] Kriteria Visual Presentation WCAG AAA menyebut 80 karakter atau kurang, dan 40 karakter atau kurang untuk CJK (Tionghoa, Jepang, Korea). [R8] Lagi-lagi, 55 bukan kebenaran semesta. Sesuaikan dengan layar, bahasa, dan ukuran huruf.
Teks rata kiri-kanan (justify) cenderung membuat jarak antarkata tidak karuan. Di web, rata kiri biasanya sudah cukup. [R8]
5. Font bukan tongkat sihir. Pakai yang terbaca normal dan cepat tampil
Antara serif dan sans-serif tidak ada pemenang mutlak. Dalam eksperimen terkontrol, efek serif terhadap kecepatan membaca tidak besar. [R16] Lebih jauh lagi, meta-analisis 2026 tidak menemukan bukti konsisten bahwa "font khusus disleksia" seperti OpenDyslexic meningkatkan kinerja membaca dibanding font standar. [R17]
Jadi, mendukung penyandang disabilitas tidak sama dengan memaksakan font khusus. Fondasinya adalah ukuran yang cukup, ruang kosong, bentuk huruf yang natural, cakupan karakter yang benar, dan pengguna bisa memperbesar. Kalau kamu mengutamakan font sistem perangkat atau font umum tiap bahasa, kamu tidak perlu memuat font web yang besar.
6. Warna latar dan kontras: teks abu-abu pucat punya "pajak gaya" yang mahal
WCAG 2.2 AA menetapkan kontras 4,5:1 untuk teks biasa dan 3:1 atau lebih untuk teks besar. [R2] Tidak perlu menaruh abu-abu muda di atas putih hanya karena "kelihatan mewah", lalu memberi debuff pada mata pembaca.
Beberapa penelitian menunjukkan bahwa teks gelap di atas latar terang (polaritas positif) lebih menguntungkan untuk proofreading dan membaca huruf kecil. [R18] Karena itu, untuk pembaca umum, tema terang adalah pilihan awal yang aman. Tapi ada juga yang suka mode gelap, jadi pilihan itu tetap perlu ada. Tidak ada bukti cukup kuat untuk menyatakan bahwa putih gading selalu lebih sehat daripada putih murni.
7. H1, H2, dan H3 bukan hiasan, melainkan rambu jalan artikel
H1 adalah topik halaman. H2 adalah poin besar. H3 adalah rinciannya. Jangan pura-pura membuat judul hanya dengan menebalkan teks; beri makna lewat struktur heading HTML. Pengguna pembaca layar berpindah di dalam halaman lewat heading, jadi heading adalah desain visual sekaligus navigasi. [R7][R9]
Tesnya mudah: kalau hanya H2 yang diambil, apakah alur artikel masih bisa dipahami? Kalau tidak, besar kemungkinan judulmu tergolong pabrik orang tersesat seperti "Bab 2", "Lanjutan", atau "Selengkapnya".
8. Teks tebal, poin-poin, tabel, dan kotak kesimpulan dipakai sebagai "rambu informasi"
Teks tebal untuk istilah penting. Poin-poin untuk informasi yang sejajar. Tabel untuk perbandingan. Kotak kesimpulan sebagai tempat pendaratan keputusan. Beri peran pada masing-masing. Kalau seluruh teks ditebalkan, itu sama saja dengan menyalakan 100 lampu peringatan sekaligus, dan akhirnya tak satu pun yang menonjol.
Jangan membedakan tautan hanya dengan warna; beri petunjuk lain seperti garis bawah. Informasi penting pun jangan berhenti di "merah berarti bahaya"; tunjukkan maknanya juga lewat tulisan atau ikon.
9. Anggap saja pembacanya dalam mode "otak dopamin", tapi jangan percaya mitos rentang perhatian manusia 8 detik
"Otak dopamin" di sini bukan istilah medis. Ini sebutan bercanda untuk kondisi web modern yang serba buyar: notifikasi → video pendek → tab lain → kembali → "tadi baca sampai mana ya?" Ini bukan kata untuk mengolok-olok satu generasi atau penyandang disabilitas sekaligus.
Solusinya bukan mengubah seluruh artikel menjadi video pendek. Solusinya adalah paragraf pendek, judul yang spesifik, kesimpulan kecil di tiap bagian, daftar isi bila perlu, dan nama diri yang membantu pembaca memulihkan konteks saat kembali. Putar otomatis, carousel yang tidak relevan, dan pop-up yang menutupi layar di tengah bacaan itu ibarat melempar kursi ke arah konsentrasi pembaca, jadi kurangi. [R9]
10. Aksesibilitas bagi penyandang disabilitas adalah perlengkapan standar, bukan "mode khusus"
Fondasinya adalah menargetkan WCAG 2.2 AA. Contoh umumnya: pembesaran teks 200%, reflow setara 320 CSS px tanpa gulir menyamping, kontras 4,5:1, target penunjuk minimal 24×24 CSS px atau jarak yang cukup, operasi dengan keyboard, fokus yang terlihat, dan cara untuk melewati bagian yang berulang. [R1-R7]
Nilai Text Spacing ("spasi baris 1,5, jarak setelah paragraf 2, spasi antarhuruf 0,12em, spasi antarkata 0,16em") bukan perintah untuk menjadikan nilai itu CSS awalmu. Persyaratan AA-nya adalah: ketika pengguna menimpa spasi dengan nilai-nilai itu, teks tidak saling menimpa atau hilang dan fungsi tidak rusak. [R5]
Dalam praktik, tombol utama dengan ukuran sekitar 44px lebih mudah ditekan, tetapi standar minimum WCAG 2.2 AA sendiri adalah 24×24 CSS px dengan pengecualian. [R6]
11. 12 bahasa berbagi satu sistem desain yang sama, tetapi tidak dipaksa memakai tata huruf yang sama
Yang dibagi bersama adalah fondasi: kontras, hierarki judul, pembesaran, reflow, jarak, kemudahan operasi, dan nama yang aksesibel. Yang diubah per bahasa adalah bagian yang bergantung pada sistem tulisan: font, pemenggalan baris, tanda hubung, tanda baca, dan tinggi baris. [R10-R13]
Atribut lang juga penting. Jangan seenaknya membulatkan zh-Hans, zh-Hant, atau pt-BR menjadi zh atau pt. Itu petunjuk bagi browser, pembacaan suara, pemenggalan kata, dan pemilihan font.
12. Nilai awal praktis per bahasa
| Kelompok | Cara memandang nilai awal |
|---|---|
| Jepang | Mulai dari 17-18px, spasi baris sekitar 1,8, dan sekitar 30-40 karakter per baris. Jangan memaksakan spasi antarhuruf tambahan. Hormati tata huruf Jepang. [R10] |
| Tionghoa sederhana dan tradisional | Pisahkan font CJK, dan jangan merusak aturan pemenggalan baris serta tanda baca. Pisahkan zh-Hans dan zh-Hant. [R11] |
| Korea | Pakai font untuk Hangul dan jangan menyisipkan spasi antarhuruf yang tidak wajar. Periksa pemenggalan baris bahasa Korea. [R12] |
| Thai | Jangan merusak pembentukan huruf yang benar dan pemenggalan di batas kata. Tinggi baris yang sedikit lebih longgar lebih aman. Jangan sembarangan memakai word-break: break-all. [R13] |
| Vietnam | Pakai font yang memuat tanda diakritik secara lengkap, dan jangan memotong bagian atas dan bawah huruf dengan tinggi tetap. |
| en/es/pt-BR/id/fr/de | Mulai dari sekitar 55-70 karakter per baris, dan pertimbangkan lang yang benar serta hyphens:auto. Periksa luapan, terutama pada kata majemuk panjang bahasa Jerman. |
13. Di ponsel, bukan hanya "terbaca", tetapi juga harus "cepat muncul"
Kalau kamu menumpuk font web raksasa untuk 12 bahasa, pembaca sudah pergi sebelum hurufnya muncul. web.dev menjelaskan bahwa font web dapat menunda FCP/LCP (seberapa cepat konten pertama dan utama muncul) dan pertukaran font bisa menyebabkan CLS (pergeseran tata letak). [R19] Pendekatan yang kokoh adalah mengutamakan font sistem untuk teks isi dan memakai font merek hanya di bagian yang perlu.
Target "baik" Core Web Vitals saat ini, pada persentil ke-75, adalah LCP 2,5 detik atau kurang, INP 200ms atau kurang, dan CLS 0,1 atau kurang. [R20] Situs yang paragrafnya tiba-tiba melorot ke bawah gara-gara iklan atau font saat kamu sedang membaca itu seperti "menahan buku dengan jari, lalu pelayan menggeser mejanya".
14. Artikel yang terus dibaca selalu punya hal yang sama di tempat yang sama
Fondasi untuk meningkatkan kunjungan ulang bukan efek yang mencolok, melainkan keterdugaan. Kalau tampilan judul, tampilan tautan, daftar isi, lebar artikel, pengalih bahasa, hasil pencarian, dan posisi artikel terkait hampir selalu sama, pembaca belajar cara memakainya.
Kalau kamu menyediakan pengaturan "Aa" untuk mengubah ukuran huruf, spasi baris, dan tema, menyimpan pilihan itu juga baik. Aksesibilitas bukan soal meminta orang "tolong aktifkan mode disabilitas" setiap kali, melainkan bentuk yang sejak kondisi awal tidak mudah rusak dan hanya disesuaikan oleh orang yang membutuhkan.
15. "Uji ketahanan pembaca" yang tidak boleh dilakukan
Contoh khas yang perlu dihindari: teks isi setara 12px, abu-abu pucat, baris lebih dari 100 karakter, teks rata kiri-kanan, paragraf yang memenuhi satu layar, hierarki judul yang melompat, semua teks tebal, antarmuka yang menyampaikan makna hanya lewat warna, putar otomatis, pop-up yang sulit ditutup, teks isi berupa gambar, neraka gulir horizontal saat diperbesar, font web raksasa, dan animasi tanpa makna.
Pembaca tidak datang untuk menempuh ujian apakah mereka punya kecerdasan dan ketajaman mata untuk menamatkan situsmu.
16. Kalau ragu, mulailah dari nilai acuan ini
| Item | Nilai awal praktis | Catatan |
|---|---|---|
| Teks isi | 17-18px | Bukan nilai mutlak. Buat agar bisa diperbesar |
| Spasi baris teks isi | 1,7-1,9 | Sesuaikan dengan bahasa dan font |
| Baris huruf Latin | Sekitar 55-70 karakter | Titik awal penelitian dan praktik. Hindari yang terlalu panjang [R15] |
| Baris CJK | Sekitar 30-40 karakter | 40 juga sesuai pedoman WCAG AAA Visual Presentation [R8] |
| H1 | Sekitar 32-40px | Bedakan dengan jelas dari teks isi |
| H2 | Sekitar 25-30px | H2 saja sudah cukup untuk memahami alur |
| H3 | Sekitar 21-24px | Sisakan perbedaan dari H2 |
| Kontras teks biasa | 4,5:1 atau lebih | WCAG 2.2 AA [R2] |
| Teks besar | 3:1 atau lebih | WCAG 2.2 AA [R2] |
| Target penunjuk | Patokannya minimal 24×24 CSS px | Ada pengecualian. Dalam praktik, pertimbangkan juga sekitar 44px [R6] |
| Pembesaran teks | 200% | Isi dan fungsi tidak hilang [R3] |
| Reflow | 320 CSS px | Pada prinsipnya tidak perlu gulir dua arah [R4] |
17. Buat gerbang kualitas. "Kami akan hati-hati" bukan jaminan mutu
Kalau kamu punya pabrik artikel atau CMS (sistem pengelola konten), jangan serahkan keterbacaan hanya pada ingatan manusia. Gunakan pemeriksaan statis untuk lang, H1, urutan heading, alt gambar, nama aksesibel, dan CSS terlarang, lalu gunakan pemeriksaan di browser sungguhan untuk 320px, pembesaran 200%, penimpaan Text Spacing, keyboard, fokus, dan gulir horizontal.
Hal yang aman diperbaiki boleh diperbaiki otomatis, misalnya lang yang hilang atau penerapan CSS bersama. Tetapi perbaikan yang mengubah makna, seperti arti kalimat, terjemahan, atau isi alt, jangan pernah dikarang sendiri. Kalau tidak bisa diperbaiki, tandai FAIL dan serahkan ke manusia. Gerbang kualitas bukan "guru yang marah-marah", melainkan palang pintu yang tidak meloloskan barang rusak.
18. Penutup: artikel yang baik tidak menguji pembacanya
Inti artikel yang enak dibaca bukanlah huruf yang dibesarkan raksasa, bukan pula ruang kosong yang bergaya. Pembaca tahu harus membaca di mana, bisa kembali di tengah jalan, bisa memperbesar, bisa menekan, bisa dibacakan, terasa natural di tiap bahasa, dan cepat. Semua itu dijadikan satu sistem desain.
Terasa natural bagi orang dewasa pada umumnya, dan tidak mudah rusak bagi orang yang mudah teralihkan, berpenglihatan lemah, kesulitan membaca, atau memakai keyboard dan teknologi bantu. Itulah yang paling kuat. Daripada membuat "versi aksesibel" di ruangan terpisah, lebih baik sejak awal lebarkan saja pintu depannya.
