Di dua tulisan sebelumnya saya sudah membahas sedikit mengenai tipografi untuk halaman web: tiga jenis font dan konsep web-safe font. Sekarang masuk ke dalam tahap eksekusi: bagaimana prakteknya mengatur tipografi halaman web melalui CSS?

Deklarasi-deklarasi CSS untuk mengelola tipografi

Ada banyak deklarasi CSS yang dapat digunakan untuk mengelola tipografi sebuah halaman web. Berikut ini yang paling sering digunakan, saya kutip dari w3school:

  • font-family: menentukan set font yang akan digunakan
  • font-size: menentukan ukurang font
  • font-weight: menentukan “ketebalan” font
  • text-decoration: menentukan style dari font
  • text-transform: merubah teks menjadi lowercase, uppercase atau capitalize
  • text-indent: menetukan indentasi antar text
  • text-align: menentukan alignment dari teks (yang di-style secara block)
  • vertical-align: menentukan alignment vertikal dari teks
  • line-height: menentukan jarak antar baris text
  • letter-spacing: menentukan jarak antar huruf. set minus untuk merapatkan.
  • word-spacing: menentukan jarak antar kata
  • color: menentukan warna dari text

Yang diatas ini adalah deklarasi dasar yang sudah dikenal oleh browser-browser modern standar. Jika anda ingin melangkah selangkah lebih maju, ada deklarasi-deklarasi yang baru diperkenalkan pada CSS3 yang dapat anda mulai pelajari:

  • text-shadow: menentukan bayangan dari teks
  • text-overflow: menyembunyikan text yang melebihi container tertentu
  • multi-column layout: membuat teks menjadi terbagi kedalam beberapa kolom

Detail langkah-per-langkah deklarasi CSS ini tidak akan saya bahas disini karena sudah ada banyak situs yang membahas hal serupa. Saya akan berikan linknya saja 😉

Untuk detail mengenai deklarasi CSS untuk mengelola tipografi ini, saya sarankan untuk akses w3schools.com

Sedangkan untuk lebih detail mengenai CSS3, saya merekomendasikan css3.info yang membahas hampir semua informasi mengenai CSS3 yang anda butuhkan.

4 thoughts on “Deklarasi-deklarasi CSS untuk mengelola tipografi halaman web

  1. Bagaimana dengan word-wrap?

    Setahu saya masih ada juga CSS eksperimental untuk mengoptimasi legibilitas dan antialiasing

    1. wah, kalau saya jujur saja belum bereksperimen dengan word-wrap 🙂

  2. wah saya lagi nyari ini. dikasih dooong 😀
    terutamauntukkalimatyangcontohnyasepertiini
    saya bingung gimana menghadapinya 🙄

    1. wah, maksudnya “terutamauntukkalimatyangcontohnyasepertiini” itu bagaimana? 🙂

Share Your Thought