Batamat al quran

Batamat Al Qur'an adalah sebuah tradisi agamis yang telah lama dipertahankan oleh masyarakat Banjar, Kalimantan Selatan. Suku Banjar, terkenal dengan masyarakatnya yang sangat agamis, sehingga seluruh sendi kehidupan mereka selalu berlandaskan keagamaan. Batamat Al Qura'an merupakan salah satu tradisi agamis yang dilaksanakan ketika seseorang telah mengkhatamkan membaca Al Qur’an.

Setiap daerah di Kalimantan Selatan memiliki cara-cara tersendiri dalam melaksanakan tradisi batamat Al Qur’an. Terdapat perbedaan pada waktu pelaksanaan, perangkat yang digunakan dan tata cara pelaksanaan. Sebagian masyarakat melaksanakan batamat Al Qur’an pada saat acara pernikahan atau perkawinan. Biasanya mempelai (pengantin) yang melakukan batamat Al Qur’an. Tapi ada juga masyarakat yang melakukan pada bulan-bulan tertentu misalnyaBulan Mulud (Rabiul Awal), Namun semuanya merujuk pada kegiatan utama yaitu membaca Al Qur’an pada bagian akhir (Juz Amma).

Di Desa Simpang Mahar, Kecamatan Batu Benawa, Kabupaten Hulu Sungai Tengah, tradisi batamat Al Qur’an biasanya dilaksanakan pada saat merayakan Hari Raya Iedul Fitri atau Iedul Adha. Lazimnya dilaksanakan pada hari raya tiga hari atau empat hari (hari ketiga atau keempat lebaran) dengan tempat di Masjid Al Amin, Simpang Mahar. Batamat Al Qur’an dapat diikuti oleh siapa pun baik anak-anak maupun sudah dewasa. Tapi pada umumnya yang mengikuti adalah anak-anak yang telah mekhatamkan membaca Al Qur’an yang mereka lakukan setiap malam.

Pada saat lebaran kemaren, telah dilakukan acara Batamat Al Qur’an di Simpang Mahar pada saat hari raya tiga hari (hari ketiga lebaran). Sebanyak 15 anak mengikuti kegiatan ini, rata-rata berumur 10 – 12 tahun. Persiapan yang dilakukan adalah kostum dan perangkat yang mengikuti sang “pengkhatam”. Kostum bagi anak laki-laki adalah baju gamis (jubah khas timur tengah) lengkap dengan sorban dan patah kangkung yang dipakai di kepala. Sedangkan bagi anak perempuan memakai baju sejenis jubah berenda dan bulang yang dipakai di kepala. Kostum ini adalah pakaian yang biasa dipakai jemaah haji ketika mereka pulang ke kampung halaman.

Selain kostum, juga disiapkan payung yang dibuat dari pelepah rumbia atau bambu. Payung diberi hiasan kertas warna-warni dan adakalanya tiang payung adalah bambu yang berisi telur rebus yang telah matang. Selain itu juga disiapkan balai (miniatur masjid) yang dibuat dari pelepah rumbia, yang diberi hiasan dengan kertas warna-warni. Di dalam balai ditempatkan ketan putih dan ketan merah, telur, dan makan-makanan kecil yang digantung. Untuk menambah semarak balai, maka juga ditancapkan beberapa bendera dari kertas dan uang. Balai disangga dengan dua potong pelepah rumbia agar dapat di usung ketika prosesi arak-arakan.

Prosesi dimulai saat anak keluar dari rumah untuk menuju masjid. Ketika di muka pintu, sang anak akan disambut dengan shalawat yang diiringi dengan lemparan baras kuning(beras kuning) bercampur uang koin ke halaman rumah. Anak-anak lain yang sudah menunggu di halaman rumah, akan memperebutkan uang koin yang dilemparkan tersebut. Selanjutnya sang anak akan diarak sambil dipayungi beserta rombongan lain menuju masjid. Di bagian depan arak-arakan, sang “pengkhatam” berjalan sambil dipayungi diiringi oleh balai yang diusung di belakangnya masing-masing.

Kemeriahan akan terasa lagi ketika rombongan arak-arakan ini tiba di masjid. Mereka akan disambut dengan shalawat dan hamburan baras kuning. Acara batamat Al Qur’an dilaksanakan di dalam masjid, sedangkan balai yang dibawa dari rumah di tempatkan di halaman masjid.

Hal yang unik dan ditunggu-tunggu para kerabat dan masyarakat yang berhadir pada acara tersebut adalah saat-saat memperebutkan semua makanan dan uang yang ditempatkan di dalam balai. Saking berharapnya, setiap anak (tak terkecuali yang dewasa) sudah mengelilingi balai ketika diturunkan di halaman masjid. Setiap orang siap-siap menjulurkan tangannya ke arah makanan dan bendera uang yang siap terlepas dari balai. Jika salah seorang sudah memulai mencabut bendera uang dengan tiba-tiba, maka serentak anak-anak dan orang tua berebut tanpa dapat dicegah lagi. Mereka akan memperebutkan semua makanan, ketan, telur, makanan ringan, bendera kertas, yang menjadi target utama biasanya adalah bendera uang dalam bentuk seribuan. Kadang-kadang saking ramainya, beberapa balai akan hancur akibat terhimpit, bahkan bisa-bisa sampai tertindih.

Perebutan makanan dan bendera balai, biasanya terjadi pada saat pembacaan Surah Al Fiil. Entah apa hubungannya dengan bunyi ayat yang dibaca, namun pada bacaan “Alam tarakaii fafa ‘ala ...”, maka sontak mereka yang telah siap dengan tangan menjulur akan menarik dan mengambil semua makanan dan bendera yang ada pada balai. Kalau dalam bahasa Banjar, “tarakai” artinya adalah rusak atau hancur, maka apakah ini terkait dengan rusaknya atau hancurnya balai akibat saling berebut.

Pembacaan Al Qur’an diteruskan secara bergantian oleh “pengkhatam”, sampai pada Surah AN Naas, kemudian dilanjutkan lagi dengan membaca Surah Al Fatihah di bagian depan Al Qur’an. Hal ini dimaksudkan agar membaca Al Qur’an terus-menerus dilakukan walaupun telah mengkhatamkan Al Qur’an. Kemudian dilanjutkan dengan pembacaan doa khatam Al Qur’an, dan selanjutnya masyarakat yang hadir dipersilakan untuk mendatangi rumah yang memiliki hajat untuk menyantap hidangan yang disediakan, tentunya hidangan khas Banjar, seperti soto Banjar, nasi sop, masak habang, ataupun masakan lainnya. Tidak ketinggalan ketan putih dan ketan merah.

Politik adalah paglima

Karena begitu perkasanya politik di negara ini maka banyak pengusaha berpolitik. Mereka mendirikan parpol, menjadi ketua umum atau menjadi pejabat tinggi negara. Seperti Surya paloh mendirikan partai Nasdem, Aburizal Bakrie tetap ngotot menjadi ketua umum partai Golkar, Jusuf Kalla menjadi wakil presiden.

Tujuan utama mereka berpolitik jelas untuk mendapatkan fasilitas dalam berbisnis. Dengan kekuasaan mereka dapat mengatur berbagai kebijakan untuk menguntungkan bisnis mereka. Seperti Surya Paloh, membawa kawannya dari Cina bernama Sam Pa, pemilik perusahaan Sonangol EP untuk menjadi pemasok minyak asal Angola ke Indonesia.

Kalau Aburizal Bakrie sudah sangat banyak menikmati keuntungan berkat kiprahnya di dunia politik.  Jaman orde baru dia mendapatkan saham PT. Freeport Indonesia, jaman SBY perusahaannya bergabung dengan pemda NTB mendapatkan saham PT. Newmount Nusa Tenggara. Terakhir dia mendapatkan utang sebesar Rp 781 miliar untuk meyelesaikan kewajibanya di Lapindo. Jaminannya, lumpur lapindo.

Jusuf Kalla setelah kembali menjabat sebagai wakil presiden, perusahaan miliknya, PT. Bosowa, kembali mendapatkan pembangunan PLTU Jenoponto II. Ketika dia baru menjadi wakil presiden SBY. Tahun 2005 pembangunan PLTU Jeneponto I berhasil didapat. Rencana pembangunan molor lama sehingga baru di akhir tahun 2012 selesai. Entah apa dasar pertimbanganya hingga PT. Bosowa kembali mendapat jatah untuk pembangunan PLTU.

Kadang para pengusaha juga bersikap kutu loncat. Seperti Murdaya Poo,  kala Megawati masih berkuasa dia mendekati PDI-P, sehingga sempat menjabat sebagai Bendahara. Tapi ketika terlihat SBY akan menjadi Presiden, istrinya Hartati Murdaya merapat ke SBY dan sempat menjadi anggota Dewan Pembina Partai Demokrat.

Ada juga pengusaha dalam berpolitik berfaham ISIS (Ikut Sana Ikut Sini). Seperti James T. Riady, dalam Pilpres kemarin mendukung pasangan  ke Jokowi-JK. Tapi dia juga mengutus Presiden Direktur perusahaannya Lippo Group, Theo L. Sambuaga, untuk menjadi tim sukses Prabowo-Hatta.

Kalau menyumbang uang ke semua parpol kuat, semua pengusaha di negeri ini jelas melakukannya. Ini karena mereka paham, bila berseberangan dengan Parpol yang berkuasa, nasib bisnisnya bisa tak menentu.

penyelewengan tersebut. Selain kebijakan ekonomi, kekuatan politik juga dapat mempengaruhi jalannya proses hukum. Lihat saja kedigjayaan Bakrie Life untuk tidak membayar uang nasabahnya sebesar 270 milyar. Pihak OJK dan Depkeu seperti tidak bernyali untuk mengusut

Hukum juga dapat digunakan untuk membungkam penghambat kepentingan para politisi. Seperti yang dialami oleh Abraham Samad, Bambang Widjojanto, Denny Indrayana dan terakhir adalah kasus Novel Baswedan. Politisi tidak akan segan-segan menggunakan aparat penegak hukum untuk mengkriminalisasi mereka.

Waktu jaman orde baru, kekuatan politik bersifat monokrasi alias terpusat hanya kepada Suharto. Sehingga kebijakan ekonomi sering hanya mengutungkan kerabat dan kroni-kroninya. Hukum juga tidak dapat menyetuh mereka. Bahkan seorang jendral polisis jujur bernama Hoegeng Iman Santosa diberhentikan menjadi Kapolri karena mengusut kasus penyelundapan mobil oleh Robby Tjahjady, pengusaha yang dekat dengan keluarga Suharto.

Sekarang kekuasaan bersifat oligarki. Para politisi berusaha menaruh orang-orangnya dalam jajaran petinggi penegak hukum. Surya Paloh telah berhasil menaruh kader partainya menjadi Jaksa Agung. Sehingga PDI-P juga ingin menaruh pengaruhnya di Polri. Tujuan mereka untuk mempengaruhi penegak hukum agar selalau mengamankan kepentingan mereka.

Tapi mereka tidak bisa mengatur satu institusi penegak hukum bernama KPK. Integritas KPK dalam menegakkan hukum sampai sekarang masih mendapat kepercayaan rakyat. Bayangkan saja, setelah pimpinan KPK Abraham Samad dan Bambang Widjojanto dikriminalisasi, KPK tidak juga jera. Ketika Kongres PDI-P di Bali, kembali KPK beraksi, dan menangkap basah seorang anggota DPR-RI Fraksi PDI-P bernama Adriansyah. Aksi itu membuat para petinggi PDI-P berang.

Di intervensinya hukum oleh kekuasaan politik menciptakan  ketidakpastian dalam dunia bisnis. Akibatnya, ketika Bank Dunia menyelenggarakan survey tahun 2014 tentang kemudahan berinvestasi, Indonesia berada di peringkat ke 120 dari 189 negara. Bandingkan dengan negara ASEAN lainya. Seperti, Singapura peringkat pertama. Malaysia peringkat ke enam dan Thailand peringkat ke-18. Bahkan Vietnam saja berada di peringkat 99.

Politik sebagai panglima membuat cara mendapatkan kekuasaan dan mempertahankannya tidak lagi memakai etika. Maka jangan heran bila prinsip-prinsip Machiavelli kini sangat popular di kalangan politisi.

Untuk mengembalikan negara ini menjadi negara hukum, semua institusi  penegak hukum harus disterilkan dari kepentingan politik. Dengan demikian, setiap pemilihan Kapolri dan Jaksa Agung harus dilakukan uji publik oleh tokoh–tokoh yang mempunyai integritas tinggi, dan dilakukan secara terbuka.

Dalam konteks ini, SBY telah membuat tradisi baik, yaitu meminta masukan dari PPATK dan KPK ketika mau mengangkat Kapolri dan Jaksa Agung.

                                                                                                                 

Tipografi "Bagian 3

Tipografi merupakan salah satu bahasan dalam bidang desain grafis yang berfokus pada teknik dan seni membuat teks menjadi dapat dicerna dengan mudah. Perancangan teks pada tipografi dilakukan melalui typesetting, yaitu pengaturan komposisi huruf dan teks. Komposisi pada typesetting mencakup jenis huruf yang digunakan, ukuran huruf, panjang baris, jarak antar baris, jarak antar kata, dan jarak antar huruf. Bagian ini akan membahas bagaimana tipografi diaplikasikan pada dokumen web, beserta dengan teknik-teknik yang membantu kita dalam merealisasikan aplikasi tipografi tersebut.

Dasar Tipografi

Sebelum membahas bagaimana teknik aplikasi tipografi pada dokumen web, kita terlebih dahulu akan melihat berbagai hal-hal mendasar yang harus dimengerti oleh mahasiswa mengenai tipografi.

Prinsip Utama Tipografi

Sebagai salah satu pembahasan dalam ilmu desain, tipografi memiliki prinsip yang sama dengan berbagai ilmu desain lainnya: membuat sesuatu menjadi beguna, dan mudah digunakan. Dalam konteks tipografi, tentunya hal ini diaplikasikan ke teks. Fungsi utama dari tipografi ialah membuat teks menjadi berguna dan mudah digunakan. Artinya? Tipografi berbicara tentang kemudahan membaca teks (readability) dan kemudahan mengenali setiap huruf dan kata (legibility).

Tipografi menghidupkan teks dalam sebuah tulisan. Tipografi membuat teks menjadi menarik, sehingga pembaca penasaran dan ingin membaca teks. Tipografi memenjara pembaca dalam teks: sekali pembaca mulai membaca, berhenti membaca dan melakukan hal lain akan menjadi sulit. Tipografi diciptakan untuk menghargai konten (teks) dengan memaksimalkan penampilan koten tersebut, dan tipografi diciptakan untuk memanjakan pembaca dengan memberikan pengalaman yang menarik dalam membaca teks.

Respect the text, respect the reader, respect the type.

—Allan Haley

Kutipan dari Allan Haley di atas merupakan prinsip utama dari tipografi. Penghargaan terhadap teks, pembaca, dan font(jenis huruf) merupakan hal yang harus dipraktekkan oleh setiap desainer.

Typeface

Typeface merupakan karakter-karakter yang dirancang secara khusus untuk digunakan bersama-sama. Sebagai karakter yang dirancang untuk digunakan bersama-sama, tentunya sebuah typeface memiliki kesamaan fitur-fitur desain. Yang dimaksud dengan fitur-fitur desain ialah ciri-ciri visual dari karakter-karakter yang ada di dalam typeface. Untuk mendapatkan kesamaan fitur, beberapa bagian dari sebuah karakter sering kali akan ditemukan pada karakter lain dalam sebuah typeface yang sama.

Contoh Kesamaan Fitur pada Huruf

Adapun beberapa contoh dari typeface yang umum ditemukan yaitu: “Times New Roman”, “Arial”, “Helvetica”, “Courier New”, dan “Calibri”. Perlu diperhatikan juga bahwa sebuah typeface juga mencakup ketebalan, kemiringan, lebar, dan pembuat dari typeface tersebut. Hal ini menyebabkan “Helvetica” dan “Helvetica Bold” merupakan dua typeface yang berbeda, yang juga berbeda dengan “Adobe Helvetica” atau “ITC Helvetica”.

Pemilihan typeface pada sebuah teks akan sangat berpengaruh terhadap mood pembaca ketika membaca atau melihat teks tersebut. Perhatikan gambar di bawah:

Pemilihan Typeface dan mood Pembaca

Sebagai teks yang memberikan peringatan, tentunya kita dapat melihat bagaimana teks yang berada di bagian atas lebih tidak terkesan “mengancam” dibandingkan teks yang berada di bawah. Jadi ingat, pemilihan typeface yang tepat untuk dokumen web yang anda rancang akan sangat penting dalam membangun mood pembaca. Ingat, respect the text, respect the reader, respect the type!

Font

Istilah typeface dan font seringkali dipertukarkan, dan menyebabkan kebinbungan kepada orang awam, padahal dalam dunia desain kedua hal ini memiliki arti yang sangat berbeda. Jika typeface bericara tentang karakter yang dirancang untuk digunakan bersama-sama, font (dalam konteks tipografi web dan tipografi digital) berbicara mengenai file yang menyimpan typeface.

Untuk mempermudah, bandingkan typeface dan font dengan lagu dan MP3. Sebuah lagu merupakan karya seniman yang dapat dinikmati dan diinterpretasikan pada medium apapun, sementara sebuah MP3 merupakan salah satu medium yang digunakan untuk memainkan lagu. Hal ini sama dengan typeface, yang adalah merupakan karya seorang seniman (type designer) yang dapat diinterpretasikan secara bebas, sementara font hanyalah medium yang digunakan oleh komputer untuk menampilkan typeface.

Sebuah font dapat terdiri dari banyak typeface. Misalnya, font “Helvetica Nueue” dapat saja memiliki typeface “Hevetica Nueue”, “Helvetica Nueue Bold”, ”, “Helvetica Nueue Italic”, “Helvetica Nueue Condensed”, dst.

Klasifikasi Huruf

Seperti yang telah dijelaskan sebelumnya, pemilihan huruf akan sangat berpengaruh terhadap mood dari pembaca ketika membaca teks. Terdapat sangat banyak jenis huruf yang dapat dipilih untuk menyampaikan pesan, dan pada umumnya setiap huruf memiliki kepribadian dan pengaruh yang berbeda-beda. Pengetahuan akan seluruh jenis huruf beserta dengan kepribadiannya tidak mungkin dapat dipelajari oleh hanya satu orang, tetapi kita dapat mengklasifikasikan sebuah huruf untuk mengambil kepribadian umum yang dimiliki huruf tersebut.

Dalam dunia web, terdapat lima klasifikasi huruf yang dapat dicetak oleh browser, yaitu:

Serif

Huruf yang memiliki tanda dekoratif pada ujung dari setiap huruf. Tanda dekoratif tersebut dikenal dengan nama “Serif”. Jenis huruf ini umum digunakan pada bagian heading dari dokumen.

Sans-serif

Huruf yang tidak memiliki serif. Jenis huruf ini biasanya digunakan untuk konten utama dari teks.

Serif vs Sans-Serif (Tanda Merah = Serif)

Monospace

Pada jenis huruf ini, setiap huruf memiliki ukuran lebar yang sama, sehingga huruf dapat disusun dengan rapi (sama panjang dan lebar). Biasanya huruf jenis ini digunakan untuk kode program.

Cursive

Jenis huruf ini memodelkan cursive, yaitu tulisan tangan manusia. Biasanya digunakan hanya sebagai dekorasi untuk memperindah bagian tertentu dari dokumen (misal: kutipan). Huruf jenis ini jarang digunakan untuk seluruh teks.

Fantasy

Huruf yang mengandung simbol atau berbagai jenis dekorasi pada setiap karakter. Misalnya, huruf “a” dapat saja berbentuk kelinci. Huruf ini biasanya digunakan sama seperti cursive, untuk memperindah bagian tertentu dari dokumen.

Berikut adalah contoh kelima jenis klasifikasi huruf yang ada pada web:

Kelima Jenis Huruf pada Web

Selain menggunakan kelima jenis huruf yang disediakan browser, tentunya kita juga dapat menambahkan sendiri huruf lain yang ingin kita gunakan. Cara penambahan huruf menggunakan CSS, serta penhgunaan huruf-huruf yang disediakan oleh browser dapat dibaca pada bagian Web Safe Font.

Sistem Pengukuran Huruf

Sistem pengukuran merupakan sebuah hal yang sangat mendasar dalam perancangan apapun. Dalam merancang sebuah bangunan misalnya, seorang arsitek harus mengetahui dengan baik sistem pengukuran yang digunakan agar rancangan bangunan yang dibuatnya dapat dibangun dengan benar oleh kontraktor. Sama halnya dengan arsitek, dalam merancang teks untuk dokumen web, kita harus mengetahui bagaimana browser melakukan pengukuran font untuk mendapatkan hasil yang optimal.

Pengukuran teks untuk web dilakukan dengan menggunakan empat satuan, yaitu:

Ems (em)

Unit pengukuran em merupakan unit pengukuran skala, yang meningkat atau menurun relatif terhadap ukuran teks dasar. Misalnya, jika ukuran teks dasar dari sebuah dokumen web adalah 12pt, maka 1em dihitung sebagai 12pt. Dengan logika yang sama, 2em adalah 24pt, dan 0.5em adalah 6pt. Pengukuran dengan menggunakan em sangat populer karena skalabilitas ini, yang menyebabkan kita dapat dengan mudah mengubah pengukuran untuk seluruh elemen yang ada hanya dengan mengubah ukuran teks dasar.

Pixels (px)

Pixel merupakan unit pengukuran berukuran tetap, yang digunakan pada layar komputer. Satu pixel merupakan satu titik pada layar komputer. Unit pengukuran ini biasanya digunakan untuk menghasilkan dokumen yang mementingkan pengukuran tepat (seperti presentasi), tetapi jarang digunakan karena sulit diubah ukurannya. Pengubahan ukuran pixel penting untuk skalabilitas, sehingga misalnya satu kode dapat digunakan untuk tampilan pada desktop dan mobile (handphone).

Points (pt)

Merupakan unit pengukuran yang digunakan pada percetakan tradisional. 1pt sama dengan 1/72 inch. Seperti pixel, unit pengukuran ini tidak fleksibel, sehingga umumnya hanya digunakan untuk dokumen web yang akan dicetak.

Percents (%)

Seperti em, percent merupakan unit pengukuran skala yang ukurannya berubah sesuai dengan ukuran teks dasar. Perbedaan dengan em ialah, jika 1em sama dengan ukuran teks dasar, pada percent yang merupakan ukuran teks dasar ialah 100%.

Perlu diingat bahwa keempat unit pengukuran di atas digunakan untuk mengubah ukuran teks pada CSS, dan memiliki arti yang berbeda jika digunakan pada konteks pecetakan tradisional. Keempat unit ini nantinya akan digunakan sebagai unit ukuran pada properti font-size dari CSS, yang akan dibahas pada bagian Font Size.

Jarak Antar Baris

Sebuah teks yang panjang akan memiliki beberapa baris. Jarak antar baris sangat penting untuk memastikan pembaca mendapatkan pengalaman membaca yang maksimal. Jarak antar baris yang terlalu dekat akan menyebabkan teks sulit atau bahkan tidak dapat dibaca. Di sisi lain, jarak antar baris yang terlalu jauh akan menyebabkan teks terasa aneh untuk dibaca.

Contoh Perbedaan Jarak Antar Baris

Gambar Contoh Perbedaan Jarak Antar Baris memperlihatkan bagaimana teks dengan jarak antar baris yang berbeda akan mempengaruhi kemudahan membaca. Teks pada paragraf pertama tidak memiliki jarak antar baris, sementara paragraf kedua memiliki jarak antar baris sebesar 0.5em, dan paragraf ketiga memiliki jarak antar baris sebesar 1.5em. Manakah teks yang lebih mudah dibaca?

Penentuan jarak antar baris seperti yang diperlihatkan pada gambar Contoh Perbedaan Jarak Antar Baris di atas dilakukan dengan menghitung nilai leading, istilah tipografi untuk jarak antar baris, pada percetakan tradisional. Gambar di bawah memperlihatkan contoh area font dan leading:

Ukuran Font dan Leading

Perhitungan jarak antar baris pada dokumen web dilakukan dengan cara yang berbeda. Untuk mendapatkan jarak antar baris, kita harus memberikan ukuran tinggi baris kepada browser. Tinggi baris dihitung dengan menambahkan setengahjarak antar baris pada atas dan bawah font, seperti yang ditunjukkan pada gambar berikut:

Perhitungan Jarak Antar Baris pada Browser

Seperti namanya, pengaturan jarak antar baris pada dokumen web dilakukan dengan menggunakan propertiline-height, yang akan dibahas pada bagian Line Height.

Jarak Antar Kata dan Huruf

Selain jarak antar baris, faktor lain yang mempengaruhi kemudahan pembacaan sebuah teks ialah jarak antar kata dan karakter. Idealnya, setiap paragraf dan baris memiliki jarak antar kata dan karakter yang dibuat khusus untuk memaksimalkan kemudahan pembacaan teks. Gambar dibawah menunjukkan perbandingan teks dengan jarak antar kata standar, rendah, dan tinggi.

Contoh Jarak Antar Kata Standar, Tinggi, dan Rendah

Seperti yang dapat dilihat, jarak antar kata yang terlalu rendah akan menyebabkan pembaca sulit membedakan antara satu kata dengan kata lainnya, sementara jarak antar kata yang terlalu tinggi akan menyebabkan kesulitan pembacaan karena secara otomatis mata kita akan mengikuti alur ruang kosong yang terbuka. Alur ini dikenal dengan istilah river.

River

River seringkali ditemukan ketika kita menggunakan rata kiri dan kanan (justified) pada teks paragraf. Penambahan dan pengurangan jarak antar kata utamanya dilakukan untuk mengurangi river, agar pembaca dapat membaca dengan lebih nyaman. Sayangnya, CSS belum memiliki properti yang mampu mengatur jarak antar kata dengan sempurna (kata per kata atau baris per baris). Properti untuk perubahan jarak antar kata, word-spacing, hanya dapat mengubah jarak antar kata secara keseluruhan.

Jarak antar huruf, seperti jarak antar kata memiliki kegunaan yang kurang lebih sama. Bedanya hanya pada pengontrolan jarak. Sesuai dengan namanya, jarak antar kata mengatur jarak di antara dua kata, sementara jarak antar huruf mengatur jarak antara setiap huruf yang ada di dalam teks.

Contoh Jarak Antar Huruf Standar, Tinggi, dan Rendah

Seperti yang dapat dilihat, jarak antar huruf yang terlalu tinggi akan menghasilkan banyak river, sementara jarak antar huruf yang rendah akan menyebabkan kesulitan dalam membaca kata.

Properti CSS untuk Tipografi

Bagian ini akan membahas berbagai properti CSS yang dapat digunakan untuk mengontrol berbagai aspek tipografi dari dokumen web.

Warna Teks

Salah satu hal pertama yang umumnya dilakukan oleh seorang desainer atau pengembang yang ingin memperindah web yang dikembangkan ialah dengan mengubah warna dan typeface dari teks. Tentu saja terdapat banyak properti lain yang dapat digunakan, tetapi penrubahan typeface dan warna merupakan salah satu perubahan yang memiliki dampak cukup besar pada dokumen, dengan hanya sedikit usaha. Mengganti warna dan jenis tulisan milik browser secara otomatis akan membuat halaman menjadi lebih unik.

Perubahan warna teks dapat dilakukan dengan mudah: menggunakan properti color dari CSS. Properti ini menerima hanya satu nilai saja, tetapi nilai yang diterima dapat diberikan dalam berbagai format. Kita dapat memberikan kata kunci, nilai heksadesimal, RGB, RGBa, HSL, dan HSLa ke properti ini. Begitupun, properti yang paling populer digunakan hanya ada dua, aitu nilai heksadesimal dan nilai RGBa. Nilai heksadesimal digunakan karena kemudahan dan interoperabilitas nilai ini (program pengolah grafis biasanya menggunakan nilai ini), sementara nilai RGBa populer karena dukungan transparansi dari CSS3.

Kode di bawah memberikan contoh penggunaan properti color dari CSS:

/*

    Warna dengan kata kunci

*/

p {

    color: blue;

}

/*

    Warna dengan kata nilai heksadesimal

*/

p {

    color: #0000FF;

    /* Penulisan singkat */

    color: #00F;

}

/*

    Warna dengan nilai RGB

    Sintaks: rgb(merah, hijau, biru)

*/

p {

    color: rgb(0, 0, 255);

}

/*

    Warna dengan nilai RGBa

    Sintaks: rgba(merah, hijau, biru, transparansi)

*/

p {

    color: rgba(0, 0, 255, 1);

}

/*

    Warna dengan nilai HSL

    Sintaks: hsl(warna, kejenuhan, intensitas-cahaya)

*/

p {

    color: hsl(202, 100%, 50%);

}

/*

    Warna dengan nilai HSLa

    Sintaks: hsl(warna, kejenuhan, intensitas-cahaya, transparansi)

*/

p {

    color: hsla(202, 100%, 50%, 1);

}

Jika ingin melihat efek tiap warna dengan jelas, anda dapat bereksperimen secara langsung dengan kode yang dibuat di atas. Nilai warna sendiri disarankan diambil langsung dari program pengolah grafis seperti Photoshop untuk menghemat waktu dalam pengembangan. Program pengolah grafis umumnya memiliki fitur untuk konversi warna ke berbagai format.

Font Properties

CSS memberikan banyak properti untuk mengubah tampilan teks dari sebuah dokumen web. Properti-properti yang ada dibagi ke dalam dua kateogri besar, yaitu properti berbasis font dan properti berbasis teks. Mayoritas properti ini diawali dengan nama kategorinya, sehingga kebanyakan properti yang ada nantinya akan memiliki format font-* ataupuntext-*. Pembahasan akan dimulai dengan properti font.

Font Family

Properti font-family merupakan properti yang menentukan font yang digunakan untuk menampilkan teks. Properti ini dapat berisi beberapa nilai, sehingga kita memiliki font pengganti yang dapat dipilih oleh sistem jika sistem pengguna tidak memiliki font utama yang diingnkan. Font yang paling pertama kali diberikan (berada di paling kiri) merupakan font utama yang akan digunakan jika sistem pengguna memiliki font tersebut. Jika tidak, browser akan terus mencari pada daftar font di properti font-family, terus sampai pada akhir di mana browser akan menggunakan font standar sesuai dengan jenis font yang ditentukan. Font yang memiliki nama lebih dari satu kata harus diapit dengan tanda petik.

Berikut adalah contoh kode penggunaan font-family:

h1 {

    font-family: Georgia, "Times New Roman", "Book Antiqua", serif;

}

Font Size

Properti font-size memberikan kemampuan untuk mengubah ukuran teks dengan menggunakan sistem pengukuran huruf yang dibahas pada bagian Sistem Pengukuran Huruf. Berikut adalah contoh penggunaan properti ini:

a {

    font-size: 12px;

}

p {

    font-size: 10pt;

}

h1 {

    font-size: 1.25em;

}

h2 {

    font-size: 110%;

}

Font Style

Untuk memberikan cetak miring terhadap teks, kita dapat menggunakan properti font-style. Properti ini menerima empat nilai standar, yaitu normal, italic, oblique, dan inherit. Perbedaan antara italic dan oblique biasanya tergantung kepada font yang dipilih, karena tidak setiap font memiliki typeface jenis ini. Nilai yang paling sering digunakan ialah normal dan italic.

Berikut adalah contoh penggunaan properti font-style:

strong {

    font-style: italic;

}

Font Variant

Properti font-variant digunakan untuk memberikan tampilan small caps, yaitu seluruh teks ditulis dengan huruf kapital yang berbeda ukuran. Huruf kapital ukuran standar digunakan pada tempat yang memang merupakan huruf kapital, sementara huruf standar (kecil) menggunakan model huruf kapital yang diperkecil. Untuk lebih jelasnya, coba lakukan eksperimen dengan browser pada properti ini.

Properti font-variant menerima tiga buah nilai, yaitu small-caps, normal, dan inherit. Berikut adalah contoh penggunaan properti font-variant:

h1 {

    font-variant: small-caps;

}

Perlu diingat juga bahwa sama dengan penggunaan nilai oblique pada font-style, nilai small-caps bergantung kepada dukungan dari font yang digunakan. Untuk mendapatkan efek maksimal, pastikan font yang digunakan memang memiliki typeface jenis small caps.

Font Weight

Terkadang kita perlu mengubah ketebalan dari sebuah teks pada bagian tertentu dari sebuah dokumen, misalnya untuk memberikan penekanan teks, atau menarik perhatian pembaca pada singkatan. Untuk kasus seperti ini kita dapat menggunakan properti font-weight. Properti ini dapat diisikan dengan nilai kata kunci khusus seperti normal, bold,bolder, lighter, dan inherit. Yang paling sering ditemui ialah penggunaan nilai normal dan bold untuk mengubah teks dari standar menjadi cetak tebal, atau sebaliknya.

Selain menggunakan kata kunci, kita juga dapat mengisikan properti ini dengan nilai angka, yaitu dengan angka 100,200, 300, 400, 500, 600, 700, 800, dan 900. Nilai-nilai angka ini merepresentasikan tingkat ketebalan teks, mulai dari paling tipis (100) sampai yang paling tebal (900). Nilai angka pada teks normal ialah 400, dan nilai bold ialah 700. Sebelum menggunakan nilai angka ini, pastikan typeface yang digunakan mendukung ketebalan tersebut, karena jika tidak maka pengisian nilai tidak akan memberikan efek.

Berikut ialah contoh penggunaan properti font-weight:

h1 {

    font-weight: bold;

}

em {

    font-weight: 700;

}

Line Height

Seperti yang telah dijelaskan pada bagian Jarak Antar Baris, properti ini digunakan terutama untuk mengubah jarak antar baris dari sebuah teks. Nilai yang dapat diisikan pada bagian ini sama dengan font-size, yaitu nilai Sistem Pengukuran Huruf.

Berikut ialah contoh penggunaan properti line-height:

p {

    line-height: 24px;

}

Penulisan Singkat Properti Font

Seluruh properti font yang diberikan pada bagian-bagian sebelumnya dapat dikombinasikan dan dituliskan dalam hanya satu properti font. Jika ingin menyingkat penulisan, kita harus memberikan urutan properti yang tepat, yaitu:font-style, font-variant, font-weight, font-size, line-height, dan font-family. Seluruh nilai-nilai yang akan diisikan tersebut harus dipisahkan dengan spasi (" "), kecuali utnuk font-size dan line-height. Properti font-sizedan line-height dipisahkan dengan slash (/).

Perlu diingat juga bahwa nilai-nilai dari properti yang diisikan pada penulisan singkat bersifat opsional (boleh tidak diisi), kecuali untuk font-size dan font-family. Karena hal ini pula, yang paling sering dijumpai pada penggunaan penulisan singkat ialah hanya font-size dan font-family.

Kode berikut memberikan contoh penulisan singkat properti font:

p {

    font: italic small-caps bold 13px/20px 'Helvetica Neue',

    Arial, Helvetica, sans-serif;

}

Text Properties

Mengetahui cara untuk mengatur pilihan font dan berbagai propertinya tentu saja tidak cukup untuk menghasilkan tipografi dokumen web yang maksimal. Selain mengubah berbagai properti font, kita juga dapat mengatur berbagai hal yang berhubungan dengan teks.

Text Align

Melakukan pelurusan (align) teks merupakan bagian penting untuk mendapatkan ritme dan alur pembacaan sebuah dokumen. Selain itu, kita juga dapat memperbaiki permasalahan seperti river dengan memiliki pelurusan teks yang benar.

Pelurusan teks pada CSS diatur dengan menggunakan properti text-align, yang dapat diisikan dengan lima nilai, yaitu:left, right, center, justify, and inherit. Seluruh nilai tersebut sama artinya dengan nilai pelurusan teks pada program pengolah kata seperti Microsoft Word, sehingga penjelasan lebih lanjut tidak akan dilakukan lagi.

Berikut adalah contoh penggunaan properti text-align:

p {

    text-align: justify;

}

Text Decoration

Properti text-decoration memberikan kemampuan untuk menghias teks, yang dapat diisikan dengan nilai-nilai berikut:none, underline, overline, line-through, blink, and inherit. Mayoritas penggunaan properti ini dilakukan untuk menghilangkan garis bawah pada teks dari link, tetapi tentunya kita dapat menggunakan text-decoration untuk berbagai keperluan lain.

Kegunaan tiap-tiap properti sendiri sama seperti namanya: overline memberikan teks garis di atas tulisan, underlinememberikan garis di bawah tulisan, line-through membuat teks dicoret, dan blink membuat teks berkedip. Dari seluruh properti, yang tidak disarankan untuk digunakan ialah blink, karena properti ini membuat pengguna sulit membaca teks.

Nilai line-through sendiri dapat digunakan untuk menandakan teks yang akan dihapus dari sebuah dokumen (semantik: tag del) atau teks yang telah tidak relevan atau akurat (semantik: tag s).

Berikut adalah contoh penggunaan properti text-decoration:

h1 {

    text-decoration: underline;

}

Text Indent

Properti text-indent dapat digunakan untuk memberikan indentasi terhadap teks, seperti yang sering tampak pada tulisan di buku. Properti ini dapat digunakan untuk memberikan indentasi ke dalam (nilai positif) maupun ke luar (nilai negatif), dan dapat diisikan dengan nilai-nilai pada Sistem Pengukuran Huruf.

Berikut adalah contoh kode penggunaan properti text-indent:

p {

    text-indent: 72pt;

}

Text Shadow

Properti text-shadow, seperti namanya, memungkinkan kita menambahkan bayangan, atau beberapa bayangan, ke teks. Properti ini harus diisikan dengan empat nilai secara terurut dari kiri ke kanan. Adapun nilai-nilai yang harus diisikan ialah sebagai berikut:

1. Jarak bayangan pada sumbu x, diisikan dengan satuan Sistem Pengukuran Huruf kecuali %,
2. Jarak bayangan pada sumbu y, diisikan dengan satuan Sistem Pengukuran Huruf kecuali %,
3. Tingkat pengaburan bayangan, diisikan dengan satuan Sistem Pengukuran Huruf kecuali %, dan
4. Warna dari bayangan, diisikan dengan nilai warna pada CSS.

Properti ini juga dapat diisikan dengan beberapa nilai, agar teks yang diaplikasikan dapat memiliki beberapa bayangan. Jika ingin mengisikan beberapa nilai, pisahkan setiap nilai bayangan dengan tanda koma (,).

Berikut adalah contoh kode dari properti text-shadow:

h1 {

    text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

}

/*

    Banyak Bayangan

*/

h2 {

    text-shadow:  4px 4px 2px rgba(150, 150, 150, 1),

                  1em 1em 2em rgba(125, 255, 255, 1);

}

Text Transform

Properti text-transform sama dengan properti font-variant, dalam hal properti ini memberikan perubahan huruf (kapital ke standar atau sebaliknya) terhadap teks yang ditampilkan. Jika font-variant mencari typeface huruf kapital kecil, maka text-transform menggunakan typeface yang umum ada untuk mengubah teks.

Nilai yang mungkin diisikan dengan properti ini yaitu: none, capitalize, uppercase, lowercase, and inherit. Nilaiuppercase dan lowercase sudah jelas kegunaannya, sementara nilai capitalize digunakan agar seluruh awal kata dari teks dibuat menjadi huruf kapital. Nilai none akan menyebabkan teks ditampilkan sebagaimana ia diketikkan.

Berikut adalah contoh penggunaan properti text-transform:

a.sponsor {

    text-transform: capitalize;

}

Letter Spacing dan Word Spacing

Properti letter-spacing dan word-spacing digunakan untuk mengatur jarak antar huruf dan jarak antar kata. Penjelasan mengenai kedua hal tersebut dapat dibaca pada bagian Jarak Antar Kata dan Huruf. Nilai yang diterima ialah unit pada Sistem Pengukuran Huruf.

Kode di bawah memberikan contoh penggunaan kedua properti ini:

p {

    letter-spacing: 0.7em;

    word-spacing: 0.9em;

}

Web Safe Font

Ketika kita memilih font untuk digunakan dalam dokumen web, browser akan mencari font yang disebutkan dari sistem operasi terlebih dahulu. Jika font tidak ditemukan, browser akan secara otomatis menggunakan font yang standar, antara serif atau sans-serif.

Untungnya, ada beberapa jenis font yang hampir selalu ada pada komputer, tablet, handphone, ataupun berbagai perangkat yang dapat melakukan browsing. Beberapa font yang selalu ada ini hampir dapat selalu digunakan oleh desainer, karena kemungkinan besar perangkat yang membuka akan dapat menampilkan font dengan benar. Karena keamanan yang ditawarkan, font jenis ini dikenal dengan nama “Web Safe Font”.

Adapun beberapa contoh dari web safe font ialah sebagai berikut:

• Arial
• Courier New
• Courier
• Garamond
• Georgia
• Lucida Sans
• Lucida Grande
• Lucida
• Palatino
• Linotype
• Tahoma
• Times New Roman
• Times
• Trebuchet
• Verdana

Web Font

Adanya keterbatasan dalam memilih font yang dapat digunakan tentu saja akan membatasi kreatifitas seorang desainer. Untuk menanggulangi hal ini, browser modern telah mendukung sebuah properti yang dikenal dengan nama “Web Font”. Properti yang digunakan ialah @font-face dari CSS. Langsung saja, berikut adalah contoh kode dari properti @font-face:

@font-face {

  font-family: 'Windings';

  src: url('windings.eot');

  src: url('windings.eot') format('embedded-opentype'),

       url('windings.woff') format('woff'),

       url('windings.ttf') format('truetype'),

       url('windings.svg') format('svg');

}

body {

  font-family: 'Windings', 'Helvetica Neue', Arial, Helvetica, sans-serif;

}

Seperti yang dapat dilihat pada kode di atas, pengunaan properti @font-face sangatlah sederhana dan langsung: spesifikasikan font-family, kemudian rujuk ke URL tempat kita menyimpan font tersebut, dan panggil pada elemen lain.