Belum lama ini saya membaca artikel mengenai Webfonts. Pada postingan tersebut terdapat kalimat dibawah ini.

Typography is not about aesthetics, it’s about serving the text. If even a small percentage of people don’t consume your content due to a use of webfonts, your typography is failing.

Kalimat tersebut langsung membuat saya cek ulang typography blog ini dan mengubah font-nya lebih kecil agar lebih mudah dibaca. Terkait typography, saya pernah membahas mengenai 5 prinsip dasar tipografi, bagus untuk menjadi landasan membuat typography yang baik.

Selain itu belakangan saya menemukan CSS berukuran 50 bytes dan 100 bytes dimana membuat teks lebih enak dibaca terhadap website manapun tanpa perlu tambahan CSS yang lain.

50 Bytes CSS

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

max-width: 38rem

Default font pada broser pada umumnya adalah 16px, sehingga 38 x 16 = 608px. Tulisan yang kepanjangan akan otomatis kebawah.

padding: 2rem

Supaya tidak mepet layar jika diakses lewat gadget atau layar ukuran kecil.

margin: auto

Supaya konten berada pada tengah layar.

100 Bytes CSS

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

Mirip dengan 50 bytes CSS, bedanya ada line-height dan font-size.

max-width: 70ch

“Readable range” biasanya 60-80 karakter. 70ch merupakan angka yang pas untuk memenuhi “Readable range”. ch adalah ukuran berdasarkan lebar angka nol “0”.

padding: 3em 1em

Mirip dengan padding 50 bytes CSS, agar tidak mepet di layar kecil.

margin: auto

Supaya konten berada pada tengah layar.

line-height: 1.75

Jarak antar teks atas dan bawah agar mudah dibaca. Ada alasan kenapa line-height dibuat tanpa unit, yaitu agar tidak terpengaruh saat zoom-in atau zoom-out.

font-size: 1.5em

Mengikuti tren dimana belakangan menggunakan font berukuran besar.