Typography
- Categories:
- notes
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
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
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.
- Tags:
- #css
- #typography
Recent Posts
How to Defend Against Brute-Force and DoS Attacks with Fail2ban, Nginx limit_req, and iptables
In this tutorial, I’ll explain how to protect your public-facing Linux server and Nginx web server from common threats, including brute-force and DoS attacks.
Is Getting AWS Solutions Architect Associate Certification Worth It?
If you are a full-time Software Engineer, there's no strong need to pursue this certification.
DevSecOps
My Notes about DevSecOps
AWS Secrets Manager
Explanation about AWS Secrets Manager with example code.
Envelope Encryption
Envelope encryption is the practice of encrypting plaintext data with a data key, and then encrypting the data key under another key.