MEMBUAT DESIGN TEKS & MENYUSUN TATA LETAK(layout) BERBAGAI UNSUR GRAFIS

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:

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.

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.

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:

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 setengah jarak 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 properti line-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.

TATA LETAK berbagai Unsur Grafis

TATA LETAK(layout)  BERBAGAI UNSUR GRAFIS

A.     Pengertian Layout / Tata Letak

Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.

B.     Prinsip-prinsip yang Berhubungan dengan Layout

a)      Kesederhanaan

Prinsip ini berhubungan dengan kemampuan daya tangkap rata-rata manusia di dalam menerima informasi. Secara insting manusia menginginkan kesederhanaan dalam menerima informasi. Namun dalam penyederhanaan juga harus memperhatikan segmen kepada siapa informasi itu akan disampaikan.

b)      Kontras

Amat diperlukan guna menarik perhatian, memberi penekanan terhadap elemen atau pesan yang ingin disampaikan. Berikut ini tips yang dapat menarik perhatian terhadap pesan yang akan disampaikan, yaitu menggunakan style bold dan italic pada body teks, memilihkan huruf display yang lebih atraktif, gunakan kontras warna, ada tekstur dalam latar belakang, memperbesar bagian tertentu yang ingin ditonjolkan.

c)      Keseimbangan

Suatu hal yang amat penting dalam penyampaian suatu informasi. Keseimbangan dapat merupakan keseimbangan yang formal, dengan susunan yang simetris. Susunan yang simetris mampu memberi kesan yang formal, seimabang, dapat dipercaya dan mapan. Sebaliknya susunan yang asimetris sering dipergunakan untuk menggambarkan suatu dinamika, energi serta pesan yang tidak formal.

d)      Keharmonisan

Maksud dari harmoni ialah memiliki keselarasan antara satu elemen dengan elemen grafis yang lain. Harmoni dapat diwujudkan dalam 2 bentuk, yaitu:

1)      Harmoni dari segi bentuk

Harmoni yang dilihat dari bentuk ialah dimana adanya keserasian dalam penempatan elemen grafis. Hal itu dapat dilihat dari segi bentuk dan ukurannya apakah itu kartu nama, stiker, poster dan sebagainya. Pemilihan bentuk huruf juga memiliki peranan yang penting sebagaimana untuk tujuan apa desain itu dibuat.

2)       Harmoni dari segi warna

Warna memiliki pengaruh yang amat besar, karena tiap-tiap warna memiliki sifatnya masing-masing, seperti merah yang memiliki arti berani, biru yang memiliki kesan tenang dan lain sebagainya. Lihat kembali tujuan dari desain yang telah dibuat, karena ketepatan dalam memilih

warna dapat membuat informasi yang didalamnya menjadi lebih efektif.

e)       Stressing

Dalam pengertian bahasanya disebut sebagai sebuah penekanan, memiliki fungsi untuk memberikan titik-titik tertentu yang memperoleh fokus perhatian. Streesing lebih mengarah kepada titik perhatian atau eye catching dalam suatu publikasi. Pada sebuah karya grafis memungkinkan adanya lebih dari satu stressing, namun harus dibedakan mana yang akan dijadikan fokus utama agar tidak mengesankan berebut perhatian yang akhirnya membuat pesan didalamnya menjadi tidak efektif.

C.      Grid pada Layout

1.    Grid System

Sebuah grid diciptakan sebagai solusi terhadap permasalahan penataan elemen-elemen visual dalam sebuah ruang. Grid systems digunakan sebagai perangkat untuk mempermudah menciptakan sebuah komposisi visual. Melalui grid system seorang perancang grafis dapat membuat sebuah sistematika guna menjaga konsistensi dalam melakukan repetisi dari sebuah kompisisi yang sudah diciptakan. Tujuan utama dari penggunaan grid systems dalam desain grafis adalah untuk menciptakan suatu rancangan yang komunikatif dan memuaskan secara estetik.

2.    The Golden Section

Di bidang seni grafis, proporsi agung menjadi dasar pembuatan ukuran kertas dan prinsip tersebut dapat digunakan untuk menyusun keseimbangan sebuah desain. Proporsi agung sudah ditemukan sejak jaman kuno untuk menghadirkan proporsi yang sangat sempurna dan indah. Membagi sebuah garis dengan perbandingan mendekati rasio 8 : 13 berarti bahwa jika garis yang lebih panjang dibagi dengan garis yang lebih pendek hasilnya akan sama dengan pembagian panjang garis utuh sebelum dipotong dengan garis yang lebih panjang tadi. Proporsi agung juga dikenal dalam istilah deret bilangan fibonacci yaitu deret bilangan yang setiap bilangannya adalah hasil jumlah dari dua bilangan sebelumnya dan di mulai dari nol. Deret bilangan ini memiliki rasio 8 : 13 yaitu rasio proporsi agung. Bilangan ini sering dipakai dalam pengukuran bangunan, arsitektur, karya seni, huruf hingga layout sebuah halaman karena proporsinya yang harmonis. 0 1 1 2 3 5 8 13 21 34 55 89 144 233 377…

3.    The symetrical grid

Dalam grid simetris, halaman kanan akan berkebalikan persis seperti bayangan cermin dari halaman kiri. Ini memberikan dua margin yang sama baik margin luar maupun margin dalam. Untuk menjaga proporsi, margin luar memiliki bidang yang lebih lebar. Layout klasik yang dipelopori oleh Jan Tschichold (1902-1974) seorang typographer dari Jerman ini didasari ukuran halaman dengan proporsi 2:3.

D.      Mengorganisir Layout

Layout yang baik mudah untuk mengikuti dan memberikan fokus jelas kepada khalayak untuk membantu agar mudah menemukan cara mereka melalui publikasi, presentasi, atau halaman web. Mengatur dan menekankan informasi Anda untuk membuat pesan Anda sebagai jelas mungkin. Memutuskan apa yang ingin pembaca untuk melihat atau membaca posisi pertama dan itu yang sesuai, kemudian memutuskan apa yang ingin pembaca untuk membaca atau melihat berikutnya. Kualitas tata letak Anda menentukan seberapa cepat pembaca Anda akan diarahkan melalui publikasi cepat dan bagaimana mereka akan dapat membacanya. Pedoman untuk Mengorganisir Layouts:

1.    Menggunakan berbagai jenis ukuran untuk berbagai elemen.

2.    Membentuk suatu hirarki dari jenis ukuran untuk utama, subheads, teks, dan lain-lain sesuai dengan format.

3.    Semua format utama sama, semua teks harus diformat sama, dll

4.    Membuat elemen yang paling pentingagar khalayak bisa menemukan hal yang besar pada hal-hal yang kecil.

5.    Menggunakan rules (baris) untuk memisahkan informasi ke dalam grup.

6.    Menggunakan berbagai jenisketebalan font.

7.    Gunakan spasi kosong untuk tujuan desain dalam publikasi.

8.    Informasi posisi penting di sudut kiri atas. Di sudut kiri atas biasanya membaca terlebih dahulu. Menempatkan kotak sekitar informasi penting.

9.    Berikan bullet pada item-item yang penting.

10.    Gunakan warna kebalikan (jenis putih pada latar belakang gelap) untuk memisahkan atau menekankan.

Panduan umum untuk Layouts:

1.    Menentukan tujuan anda publikasi, presentasi, atau situs web anda sebelum anda mulai Layout.

2.    Membuat dasar pesan yang akan disampaikan dan rencana tata ruang di sekitarnya.

3.    Pilih yang sesuai jenis media (halaman web, presentasi, cetak buku, newsletter, atau brosur, dll) dan ukuran.

4.    Mengidentifikasi target pemirsa tersebut, kemudian menulis dan mendesain publikasi, presentasi, atau situs web agar selalu berada dalam benak khalayak.

5.    Mempertimbangkan kepentingan mereka, membaca tingkat, latar belakang, dll.