Gunakan Ukuran Font yang Mudah Dibaca

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa teks pada laman tidak terbaca karena terlalu kecil.

Ikhtisar

Ukuran font web dapat ditentukan melalui empat unit umum: piksel (px), poin (pt), EM (em), dan persen (%).

  • Piksel adalah “piksel CSS” dan bervariasi berdasarkan kepadatan serta ukuran perangkat.
  • Poin ditetapkan dalam kaitannya dengan piksel. Satu piksel sama dengan 0,75 poin*.
  • EM dan persen adalah unit “relatif”: Keduanya ditetapkan berdasarkan ukuran dan properti font bawaan yang digunakan. 1 EM setara dengan 100%.

* Lihat catatan tambahan.

Selain itu, area pandang memengaruhi cara font diskalakan pada perangkat seluler. Laman dengan area pandang yang tidak dikonfigurasikan dengan sesuai diperkecil pada perangkat seluler, dan seringkali menyebabkan teks pada laman menjadi tidak terbaca karena ukurannya yang kecil.

Saran

Pertama-tama, konfigurasikan area pandang untuk memastikan font diskalakan sesuai yang diharapkan pada berbagai macam perangkat. Setelah Anda mengonfigurasi area pandang, terapkan saran tambahan di bawah.

  1. Gunakan ukuran font dasar 16 piksel CSS. Sesuaikan ukuran seperti yang dibutuhkan berdasarkan properti font yang digunakan.
  2. Gunakan ukuran yang sesuai dengan ukuran dasar untuk menentukan skala tipografi.
  3. Teks membutuhkan spasi vertikal antar-karakternya dan mungkin perlu disesuaikan untuk setiap font. Saran umumnya adalah dengan menggunakan tinggi baris default browser 1,2 em.
  4. Batasi jumlah font yang digunakan dan skala tipografi: terlalu banyak font dan ukuran font menyebabkan tata letak laman yang terlalu kompleks dan berantakan.

Misalnya, cuplikan CSS berikut menentukan ukuran font garis dasar 16 piksel CSS, dengan kelas CSS 'kecil' yang memiliki ukuran font 75% dari font garis dasar (12 piksel CSS), dan kelas CSS 'besar' yang memiliki ukuran font 125% dari font garis dasar (20 piksel CSS):

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Untuk saran font tambahan yang berlaku bagi perangkat seluler, lihat Pedoman tipografi Android.

Informasi tambahan

Spesifikasi CSS 2.1 perlu dibaca dengan cermat agar dapat memahami cara ditentukannya unit panjang. Spesifikasi ini berisi unit lebih lanjut yang tidak disebutkan di sini: inci, sentimeter, milimeter, dan pika. Yang mudah terlewat adalah inci CSS tidak selalu sama dengan inci fisik.

Semua unit mutlak ditetapkan berhubungan dengan satu sama lain. 1 piksel adalah .75 poin; 1 poin adalah 1/72 inci; 1 inci adalah 2,54 sentimeter; dst. Akan tetapi, cara "menambatkan" unit ini ditentukan oleh perangkat. Contoh, saat mencetak pada kertas, 1 inci ditambatkan pada 1 inci fisik, dan semua unit lain harus disesuaikan dengan inci fisik. Namun saat ditampilkan pada ponsel, perangkat tertambat pada apa yang dikenal dengan "piksel referensi". 1 piksel CSS ditetapkan sesuai piksel referensi ini, dan semua unit lain - inci, sentimeter, dst - disesuaikan dengan piksel CSS. Oleh karena itu, pada ponsel, 1 inci CSS umumnya ditampilkan dalam ukuran yang lebih kecil daripada 1 inci fisik yang sebenarnya.

Sebaiknya tetapkan ukuran font Anda menggunakan piksel untuk alasan ini. Beberapa perancang dan pengembang mungkin salah memahami saat melihat inci atau poin yang digunakan — yang merupakan dimensi fisik namun tidak selalu sesuai ukurannya di dunia nyata. Satu piksel selalu dapat berubah ukuran, tergantung perangkat yang digunakan untuk menampilkan.

Terakhir, setiap font juga memiliki karakteristiknya masing-masing: ukuran, spasi, dan lainnya. Secara default, browser akan menampilkan setiap font dalam 16 px (piksel CSS). Ini merupakan default yang bagus dalam kebanyakan kasus, namun mungkin perlu disesuaikan pada font khusus - misalnya ukuran default dapat disetel lebih rendah atau tinggi guna mengakomodasi properti font yang berbeda. Kemudian, setelah ukuran default disetel, font yang lebih kecil atau besar sebaiknya ditetapkan sesuai ukuran default menggunakan piksel. Hal ini kemudian dapat digunakan untuk menyesuaikan ukuran teks utama, sekunder, dan jenis konten lain di laman.

Beberapa browser seluler mungkin berusaha menskalakan font untuk laman tanpa area pandang yang dikonfigurasi dengan benar. Perilaku pengubahan ukuran ini bervariasi antar-browser dan sebaiknya tidak diandalkan untuk menyajikan font yang terbaca pada perangkat seluler. PageSpeed Insights menampilkan teks di laman Anda tanpa menerapkan skala font khusus browser.