Deklarasi-deklarasi CSS untuk mengelola tipografi halaman web

Written by Fikri Rasyid

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.

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:

Categories

Post Info

4 Responses for This Thought

  1. ArdianZzZ

    22 September 2010

    Bagaimana dengan word-wrap?

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

    Reply
    • fikrirasyid

      28 September 2010

      wah, kalau saya jujur saja belum bereksperimen dengan word-wrap :)

      Reply
  2. AMYunus

    16 January 2011

    wah saya lagi nyari ini. dikasih dooong :D
    terutamauntukkalimatyangcontohnyasepertiini
    saya bingung gimana menghadapinya :roll:

    Reply
    • fikrirasyid

      17 January 2011

      wah, maksudnya “terutamauntukkalimatyangcontohnyasepertiini” itu bagaimana? :)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>