[Desain & Tipografi Web] Vertical Rhythm

02Feb08
pola.jpg

Hari ini saya persembahkan anda semua, rekan-rekan desainer web, dengan artikel ini yang menggambarkan penggunaan vertical rhythm, alias pola vertikal, untuk memperjelas suatu halaman web sehingga menjadi jauh lebih muda dibaca.

Topik pembicaraan: desain web berbasis (X)HTML dan CSS. Saya sendiri akan menggunakan XHTML strict, tapi ini bebas untuk doctype anda masing-masing.

Teori di balik Pola Vertikal

Tipografi berantakan sudah menjadi trademark dunia web. Tulisan tidak rapih berceceran di mana-mana, sampai tipografi yang indahpun menjadi buyar dan tak tampak di manapun. Sekarang saya akan persembahkan anda dengan sebuah teknik yang biasa disebut “vertical rhythm”, seperti yang telah saya terapkan dalam gambar di atas.

Inti dari vertical rhythm, atau istilah bahasa Indonesia (yang saya ciptakan sendiri hehe), “pola vertikal“, adalah memastikan bahwa setiap elemen dari HTML kita memiliki tinggi dengan kelipatan suatu konstanta yang berlaku di seluruh halaman tersebut. Atau bisa juga saya sebut sebagai “penyusunan unsur halaman sehingga setiap baris teks menempati suatu tinggi yang sama, atau kelipatannya.”

Hmm, kalau itu sulit dimengerti, mungkin gambar akan berguna lagi. Gambar di bawah serupa dengan yang di atas, namun saya memberi, di latar belakang, pola abu-abu dan putih dengan tinggi tetap sebesar 27 pixel. 27 inilah yang saya maksud sebagai konstanta ketinggian dalam halaman kita.

pola-detail.jpg

Perhatikan bahwa setiap baris teks dalam paragraf menempati tepat satu baris abu-abu atau putih (dengan kata lain, tinggi setiap baris adalah tepat 27 pixel). Sedangkan margin antar-paragraf juga tepat 27 pixel. Sedangkan header, yang memang harus berukuran besar, menempati 2 x 27 pixel, setara 2 baris teks. Inilah inti dari Pola Vertikal.

Asalkan anda menjaga agar setiap unsur halaman anda memiliki ketinggian yang berkesinambungan seperti ini, maka anda telah mengikuti hukum vertical rhythm. Saya pribadi mengambil contoh 27 pixel untuk gambar-gambar di atas, tapi anda bebas memilih angka berapapun.

Misalkan, saya biasanya menggunakan ketinggian teks (line-height) paragraf sebesar 30 pixel dengan ukuran teks (font-size) 13 pixel. Saya (dan begitu pula anda) tidak perlu mengkhawatirkan 13 pixel ini, karena sungguh tidak relevan. Yang perlu anda amati adalah 30 pixel itu. Sedangkan header saya memiliki tinggi 40 pixel dan margin antar paragraf saya sebesar 20 pixel. Seperti yang bisa anda lihat, saya menggunakan konstanta emas 10 pixel dan kelipatannya dalam kasus ini.

Kok bisa?

Dalam membaca, mata kita akan berusaha membagi-bagi halaman ke dalam potongan yang bisa kita baca. Jika anda menerapkan pola vertikal, maka mata anda akan melihat keseragaman dalam komposisi halaman anda.

Selain itu, asalkan setiap unsur mengikuti aturan ini, maka halaman anda akan tampak rapih hingga paling bawah. Mata anda akan mudah loncat dari baris ke baris karena memiliki pola yang jelas. Sekaligus dengan itu, proses scanning menjadi lebih santai bagi mata anda dan otak bisa lebih diarahkan menuju kata-kata yang benar-benar terbaca (tidak terganggu layout teks), dan walhasil teks anda menjadi lebih efektif.

Pasitkan pula bahwa aturan ini diterapkan ke seluruh elemen dalam halaman anda – termasuk margin, padding, dan border. Misalkan, bila saya kembali menggunakan konstata 10 pixel dan kelipatannya, maka jika ada paragraf yang ingin saya berikan garis pembatas di atasnya, maka saya perlu memastikan bahwa total margin, padding dan border sesuai dengan angka saya (10). Jadi saya bisa memberikan margin atas 5 pixel, border 1 pixel, kemudian padding 4 pixel. Dengan demikian kesinambungan tetap terjaga.

Untuk memastikan bahwa halaman anda telah rapih, anda bisa memberikan background belang-belang seperti yang saya terapkan di contoh di atas.

Caranya??

Yang terpenting dari teknik ini adalah bahwa anda memahami konsepnya, sehingga dapat anda terapkan dengan sendirinya. Ini disebabkan bahwa pemasangan hal-hal sederhana sekalipun dapat memecahkan pola ini. Misalnya, anda tiba-tiba memutuskan, “saya ingin elemen header teratas saya (h1) memiliki border di bawahnya dengan ketebalan 1 pixel.” Anda tidak bisa langsung memasangkan “border-bottom: 1px solid #ccc”, melainkan anda juga perlu mengotak-atik margin-bottom untuk menyesuaikan. Jika tadinya margin-bottom adalah 20px, sekarang perlu dijadikan 19px, agar total bawah tetap 20px. Belum lagi termasuk bila anda ingin memberi padding antara teks dan border.

Karena itu, saya hanya akan memberikan contoh pemformatan. Namun, sebelumnya anda perlu me-reset seluruh margin dan padding di CSS anda, melalui teknik CSS Reset. Berikut kode sederhananya:


* {
margin: 0;
padding: 0;
}

Selector CSS ini akan menerapkan margin dan padding sebesar 0 ke seluruh elemen HTML anda. Dengan demikian margin dan padding default telah dihilangkan. Ini perlu, karena pada dasarnya browser akan memberikan sedikit margin dan padding pada elemen anda agar lebih rapih. Tapi kali ini kita yang akan membuatnya rapih, jadi kita perlu menolak browser (halus-halus).

Sekarang kita bisa mulai. Ingat kuncinya: Jagalah agar line-height serta total margin+border+padding atas dan bawah semuanya merupakan kelipatan suatu angka sakti anda. Untuk contoh kode di bawah, angka yang akan saya gunakan adalah 10.


body{
font-family: Verdana;
}

h1{
line-height: 40px;
font-size: 26px;
margin: 10px 0;
}

h2 {
line-height: 40px;
font-size: 22px;
margin: 10px 0;
}

p{
line-height: 30px;
font-size: 13px;
margin: 10px 0 20px 0;
}

Ingat, kode ini hanya contoh. Saya sangat menyarankan kepada anda untuk menulis kode anda sendiri. Bila ada pertanyaan mengenai sintaks saya, silahkan komentar di bawah.

Enjoy.

Untuk contoh penerapan teknik ini secara luas, silahkan saja anda lihat contoh ini:



17 Responses to “[Desain & Tipografi Web] Vertical Rhythm”

  1. wah, keren juga nih… artikelnya sangat bagus…
    baru ngeh pas baca ini… lom pernah dapet hal-hal kayak gini sih…
    sip keren lah…

    btw, berarti besar font-nya ga harus dipikirkan ya?

    o, iya… biasanya saya kalo setting font-size, line-height itu pake satuan em. trus cara ngaturnya dengan border yang satu pixel gimana ya? hihi…

  2. Wah, keren! Hebat!!

    Kapan-kapan ajari lebih dalam ya!

    *komen standar indikasi nyampah*😆

  3. @bakazero: Font-size sendiri tidak perlu dipikirkan terlalu banyak untuk urusan pola vertikal, asalkan jangan terlalu kecil/besar aja ya. Saya pribadi sekarang banyak memakai pixel. Dulu em juga, tapi relatif membuat saya stress… Bisa juga kok dengan em, setahu saya. Hanya saja menjadi lebih susah mengira-ngiranya… Iya, itu masalahnya, kalau mau campur pixel dengan em.

    Ada artikel lain dari A List Apart, di sini. Konstanta mereka adalah 6. Yang ada di sini sekedar merupakan varian dan terjemahan saya, serta diotak-atik sedikit untuk kemudahan rekan-rekan.🙂

    @Gun: Ditunggu aja ya pelajaran selanjutnya!:mrgreen: Loh, kan tidak nyampah. Tidak ada sampah di dunia online ini.. Kecuali kita yakin bahwa itu memang sampah hahaha.

  4. Keunggulan komposisi teks FTW.😛

  5. Wess, mantap bener, Mas. Makasih banyak atas pelajarannya:mrgreen:

  6. Rizqi Zeldman?:mrgreen: bagus artikelnya, dirutinin supaya jadi a list apart lokal sepertinya bakal keren😀

  7. @Xaliber: Keunggulan yang dibawa pengaturan ini yang baik bisa bener-benar besar lho.:mrgreen:

    @Cynanthia: Sama sama!😀

    @Diki: Hahahahaha, kl saya ada gaya semi-perfectionis sendiri.😛 Iya, mungkin akan saya rutinkan… Tapi ujian akhir mengancam.👿

  8. OOT sebentar:
    *baru nyadar*

    Meskipun menggunakan tulisan sekecil tuyul lagi lari-lari kesenangan di padang pasir Antartika

    Baru tau saya ada tuyul di Antartika sana, apalagi ada padang pasir di Antartika😆

  9. 9 chubby

    waaa…
    keyeenn..
    anak smu uda bisa bikin tutorial keren begini.
    jadi malu nih. gyehehe. keep on writing, dude😉

  10. @Cynanthia: Oh, betul, ada di sana… Jangan salah. Antartika itu tempat terbaik untuk berburu tuyul.😛

    @chubby: Makasih!😀 Saya senang ada yang baca. Sebentar lagi saya mau bikin lagi deh…

  11. whuuuuiihhh…
    thanks infonya….
    boleh dicoba neh…🙂

  12. Sep, met bekerja:mrgreen:

  13. 13 tikabanget™

    baiklah…!!!

    **edit templet sendiri**

  14. Makasih mas amat membantu saya yang masih pemula?

  15. saya ga berhasil menerapkannya mohon pencerahan… saya harus edit dimana nih?

    style css bukan sih…

    tolong ya…thanks


  1. 1 Membuka Gerbang Langit « Deathlock
  2. 2 Seleb Blog? You Comment I Comment? « Deathlock

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


%d blogger menyukai ini: