Panduan praktis untuk tipografi yang mudah dibaca di web modern

Mengapa sebagian besar situs web lebih sulit dibaca daripada seharusnya

Rata-rata situs web pada 2026 hadir dengan keluarga font kustom, warna merek yang dipilih dengan cermat, dan sistem desain yang menentukan spasi hingga tingkat piksel. Namun teks isi—hal yang sebenarnya paling sering datang untuk dibaca pengunjung—sering kali masih berada di 14px dengan abu-abu berkontras rendah, menggunakan typeface yang dioptimalkan untuk judul, bukan paragraf.

Ini bukan keluhan terhadap desainer. Ini adalah pengingat bahwa keterbacaan adalah disiplin yang berbeda dari desain visual, dan keduanya tidak selalu sejalan. Typeface yang terlihat tajam di hero section bisa melelahkan pada panjang paragraf. Palet warna yang tampak bagus dalam foto bisa gagal dalam pemeriksaan kontras. Tata letak yang berfungsi di monitor 27 inci bisa runtuh menjadi kolom sempit di perangkat mobile.

Kabar baiknya: tipografi yang mudah dibaca tidak membutuhkan gelar tipografi. Yang dibutuhkan adalah perhatian pada beberapa variabel yang dampaknya tidak proporsional besar.

Ukuran font: lebih besar dari yang Anda kira

Kesalahan keterbacaan paling umum di web adalah teks isi yang terlalu kecil. Desainer sering menetapkan body copy pada 14px atau 15px karena "terlihat bersih" pada skala desktop, lalu lupa bahwa sebagian besar pembaca menggunakan ponsel, sering kali dalam pencahayaan yang kurang ideal.

Baseline praktis untuk teks isi pada 2026:

• Desktop: minimum 18px, disarankan 20px
• Mobile: minimum 16px, disarankan 18px

Angka-angka ini terasa besar jika Anda terbiasa dengan huruf yang lebih kecil, tetapi angka tersebut mencerminkan cara orang benar-benar membaca di layar. Teks yang lebih besar mengurangi ketegangan mata, meningkatkan pemahaman, dan membuat konten Anda dapat diakses oleh pembaca dengan gangguan penglihatan ringan yang belum menyesuaikan pengaturan browser mereka.

Jika sistem desain Anda mewajibkan huruf yang lebih kecil, uji di ponsel di bawah sinar matahari. Jika Anda harus menyipitkan mata, ukurannya terlalu kecil.

Tinggi baris: beri ruang agar teks bernapas

Tinggi baris (leading) adalah ruang vertikal di antara baris teks. Terlalu rapat, baris-baris akan tampak menyatu. Terlalu renggang, mata kehilangan alur dari satu baris ke baris berikutnya.

Untuk teks isi, tinggi baris 1.5 hingga 1.7 berfungsi untuk sebagian besar typeface. Judul bisa lebih rapat (1.1 hingga 1.3), tetapi body copy membutuhkan ruang bernapas.

CSS-nya:

body {
  font-size: 18px;
  line-height: 1.6;
}

Ini adalah salah satu peningkatan keterbacaan termudah. Jika teks isi Anda saat ini berada di line-height: 1.2 atau menggunakan nilai piksel tetap, ubah hari ini.

Panjang baris: lebih pendek dari yang Anda kira

Panjang baris optimal untuk teks isi adalah 45 hingga 75 karakter per baris, kira-kira 8 hingga 12 kata. Baris yang lebih panjang dari 90 karakter membuat mata sulit melacak kembali ke awal baris berikutnya. Baris yang lebih pendek dari 40 karakter menciptakan pengalaman membaca yang patah-patah dan terfragmentasi.

Sebagian besar situs web keliru di sini dengan membiarkan teks membentang selebar viewport, terutama di desktop. Monitor selebar 1920px dapat memuat 150+ karakter per baris, yang melelahkan untuk dibaca.

Solusinya adalah max-width pada kontainer teks Anda:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Unit ch kurang dimanfaatkan, padahal sempurna untuk ini: ia diskalakan mengikuti ukuran font dan kira-kira sesuai dengan lebar karakter.

Kontras: tidak sesederhana hitam di atas putih

WCAG 2.1 menetapkan rasio kontras minimum 4.5:1 untuk teks isi (level AA) dan 7:1 untuk aksesibilitas yang ditingkatkan (level AAA). Sebagian besar situs web memenuhi ini di atas kertas tetapi gagal dalam praktik karena menggunakan teks abu-abu muda di atas latar putih.

Pelanggar umum:

• #666666 pada #FFFFFF (4.54:1, nyaris lolos)
• #777777 pada #FFFFFF (4.47:1, gagal)
• Nuansa apa pun yang lebih terang dari #767676 pada putih (gagal)

Jika sistem desain Anda menetapkan "text-secondary" sebagai abu-abu muda, uji. WebAIM contrast checker adalah cara tercepat untuk memverifikasi.

Dark mode membuat ini makin rumit. Teks putih murni di atas hitam murni menciptakan halasi (efek berpendar) yang lebih sulit dibaca dibanding putih agak redup di atas abu-abu gelap. Pendekatan yang lebih baik:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Pilihan typeface: font default lebih baik dari yang Anda kira

Font web kustom ada di mana-mana, tetapi ada komprominya. Font tersebut menambah latensi, meningkatkan berat halaman, dan dapat memblokir rendering jika tidak dimuat dengan cermat. Untuk teks isi, font sistem sering kali merupakan pilihan yang lebih baik.

Stack font sistem yang kuat pada 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Ini memberi Anda San Francisco di macOS/iOS, Segoe UI di Windows, dan Roboto di Android—semuanya typeface yang sangat mudah dibaca, dirancang secara profesional, dan dimuat seketika.

Jika Anda memang menggunakan font kustom untuk teks isi, pilih yang dirancang untuk bacaan panjang, bukan display. Hindari:

• Bobot ultra-light atau ultra-bold untuk body copy
• Varian condensed atau extended
• Font dengan x-height rendah (tinggi huruf kecil)

Uji typeface pilihan Anda pada panjang paragraf sebelum berkomitmen.

Tipografi responsif: skala huruf fluid

Ukuran font tetap tidak berskala dengan baik di berbagai perangkat. Font isi 20px yang nyaman di desktop bisa terasa terlalu besar di mobile.

Tipografi fluid menggunakan clamp() untuk menskalakan ukuran font secara mulus antara minimum dan maksimum:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Ini menskalakan dari 16px di layar kecil hingga 20px di layar besar, dengan interpolasi mulus di antaranya. Ini lebih canggih daripada breakpoint media query dan beradaptasi dengan lebar viewport apa pun.

Untuk skala huruf lengkap (heading, body, teks kecil), alat seperti Utopia menghasilkan skala fluid berdasarkan batasan Anda.

Spasi paragraf dan perataan teks

Dua detail kecil yang penting:

1. Spasi paragraf: Tambahkan ruang di antara paragraf (margin-block-end: 1em) atau gunakan inden baris pertama (text-indent: 1.5em), tetapi jangan keduanya. Sebagian besar konten web menggunakan spasi.

1. Perataan teks: Rata kiri (atau rata kanan untuk bahasa RTL) hampir selalu lebih mudah dibaca daripada teks rata kiri-kanan, yang menciptakan spasi kata tidak merata kecuali pemenggalan kata diaktifkan. Teks isi rata tengah sulit dibaca dan sebaiknya disimpan untuk bagian yang pendek.

Menguji keterbacaan dalam praktik

Keterbacaan tidak sepenuhnya objektif, tetapi Anda dapat mengujinya:

• Baca konten Anda sendiri di ponsel dalam berbagai kondisi pencahayaan
• Jalankan audit aksesibilitas Lighthouse untuk menangkap masalah kontras dan ukuran font (lihat cara membaca laporan Lighthouse tanpa panik untuk panduan)
• Minta seseorang berusia di atas 50 tahun membaca sebuah halaman tanpa menyesuaikan pengaturannya
• Periksa analytics Anda untuk bounce rate pada halaman yang padat teks—jika orang cepat pergi, keterbacaan mungkin menjadi salah satu faktor

Jika konten Anda sulit dibaca, orang tidak akan membacanya. Sesederhana itu.

Seperti apa ini dalam praktik

Gaya teks isi yang mudah dibaca pada 2026 mungkin terlihat seperti:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Ini mencakup ukuran font, tinggi baris, panjang baris, kontras, dan penskalaan responsif dalam sekitar selusin baris CSS. Tidak menarik, tetapi berhasil.

Kapan melanggar aturan

Pedoman ini berlaku untuk teks isi—paragraf yang dibaca orang untuk mendapatkan informasi. Judul, caption, label UI, dan copy pemasaran memiliki batasan berbeda dan dapat membengkokkan aturan ini.

Namun jika seseorang datang ke situs Anda untuk membaca artikel, halaman dokumentasi, atau deskripsi produk, tipografi yang mudah dibaca bukanlah pilihan. Itu adalah ekspektasi dasar.