7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Typography

Delapan Faktor Penting Tipografi Web yang Baik

Scroll to top
Read Time: 9 mins

Indonesian (Bahasa Indonesia) translation by Septriansyah Rehan (you can also view the original English article)

Tipografi yang baik dapat menjadi landasan bagi desain web yang sukses. Karena begitu banyak desain web terdiri dari teks, menemukan tanda yang tepat untuk tipografi adalah faktor kunci dalam keberhasilan keseluruhan situs Anda. Seluk beluk tipografi halus bisa menjadi hal yang sulit untuk dipahami oleh pemula... tetapi hari ini kita memiliki 8 tips yang akan membantu Anda meningkatkan desain secara keseluruhan.


Mengapa Cetakan Tipografi Bagus?

Seperti yang saya katakan sebelumnya, tipografi yang baik dapat memainkan peran penting dalam keberhasilan desain web. Ini dapat membantu menghasilkan hierarki visual. Dapat membuat teks lebih mudah dibaca. Seperti kutipan dari pembukaan Stanford Steve Jobs di bawah catatan, tipografi bukan semburan acak dari keputusan saat ini, ada banyak faktor dan nilai yang harus dipertimbangkan untuk menghasilkan tipografi yang dirancang dengan baik yang tidak hanya terlihat bagus, tetapi memberikan keuntungan fungsional menjadi lebih mudah dibaca dan mengambil nilai.

Saya memutuskan untuk mengambil kelas kaligrafi untuk belajar bagaimana [belajar kaligrafi]. Saya belajar tentang tipografi serif dan sans-serif, tentang memvariasikan ruang antara kombinasi huruf yang berbeda, tentang apa yang membuat tipografi hebat menjadi hebat. Itu cantik. Historis. Artistik halus dalam cara yang tidak bisa ditangkap oleh sains. Dan saya merasa hal itu menarik. Tidak satu pun dari ini yang memiliki harapan penerapan praktis dalam hidup saya. Tetapi 10 tahun kemudian, ketika kita mendesain komputer Macintosh pertama, semuanya kembali kepada saya. Dan kita merancang semuanya ke dalam Mac. Itu adalah komputer pertama dengan tipografi yang indah. Jika saya tidak pernah mengikuti kursus tunggal di perguruan tinggi, Mac tidak akan pernah memiliki beberapa jenis huruf atau font dengan spasi yang proporsional. Dan karena Windows hanya menyalin Mac, kemungkinan tidak ada komputer pribadi yang memilikinya.


Jadikan Pilihan Jenis Anda Berarti Sesuatu

Kait akan masuk ke dalam mengklasifikasikan font dan cara mengambilnya hanya dalam satu menit... tapi saya ingin Anda mempertimbangkan apa yang sebenarnya berarti tipografi bagi Anda (atau proyek yang sedang Anda kerjakan saat ini). Tentu saja, Anda dapat menggunakan hampir semua jenis huruf apa saja untuk membuat kata - tetapi apa yang benar-benar jenis huruf katakan tentang kata itu? Lebih dari keputusan desain lain yang Anda buat, pemilihan jenis yang Anda buat memberikan karakter dan konteks situs Anda. Pilih dengan hati-hati, dan mereka akan membantu Anda berkomunikasi dengan pemirsa, atau mengalihkan perhatian mereka.

Sebagai contoh singkat, periksa dua variasi berikut kata "mungkin" (di bawah). Tidak ada yang berubah secara signifikan dalam hal warna atau ukuran, tetapi makna tersirat bahwa Anda mungkin (har har) mengambil perubahan secara dramatis hanya dengan jenis huruf dan pengaturan kasus.

Ada beberapa kelas utama font, tetapi hanya dua yang terutama disebut di web (serif dan sans-serif). Yang pertama adalah font yang memiliki serif, detail tambahan kecil di tepi setiap huruf, sedangkan yang kedua adalah sans serif (diterjemahkan ke tanpa serif, bagi kita yang tidak mengerti bahasa latin).

Lebih dari keputusan desain lain yang Anda buat, pemilihan jenis yang Anda buat memberikan karakter dan konteks situs Anda.

Kedua font dapat bekerja dengan baik, baik dalam skema yang terutama atau sebagai kombinasi dalam beberapa keadaan. Namun, melakukan kesalahan dapat memberikan desain web Anda perasaan dan kesan yang sepenuhnya salah, atau hanya terlihat buruk. Pertimbangkan contoh-contoh berikut dan tone yang dibawa ke setiap desain oleh tipografi yang digunakan:

Anda juga harus mempertimbangkan beberapa aspek lain, seperti apakah teks Anda dapat dibaca dalam font serif daripada dalam font sans-serif. Teks yang lebih kecil umumnya akan direpresentasikan lebih baik dalam font sans-serif, selama Anda bermain dengan baik dengan beberapa faktor lain yang akan saya sebutkan hari ini.

Perlu dicatat juga bahwa munculnya Google Font, Typekit, CSS @ font-face services dan teknologi penggantian font lainnya telah mengantarkan gelombang baru tipografi yang mungkin tidak masuk dalam kategori serif atau sans-serif. Perhatikan contoh-contoh berikut:


Pertahankan Jumlah Huruf yang Berbeda Agar Minimal

Sebuah situs yang menggunakan banyak jenis huruf yang berbeda dengan sembarangan adalah seperti orang yang menggunakan banyak suara yang berbeda dalam percakapan yang sama... mungkin sepertinya ide yang bagus, tetapi kemungkinan besar Anda hanya akan terdengar seperti orang gila. kepada seseorang yang lewat

Pengetahuan umum pernah menyarankan perancang web untuk memilih satu font dan tetap menggunakannya, tetapi sering kali jauh lebih menarik secara visual untuk memilih 2 atau 3 font dan menggunakannya (secara konsisten dan seragam!) Dalam kombinasi yang dibuat dengan cermat. Di sinilah mencampur font serif dan sans-serif benar-benar menjadi menarik. Pertimbangkan contoh-contoh berikut dan bagaimana keragaman jenis membantu menghidupkan desain:

Perhatikan bahwa meskipun ada lebih dari satu jenis huruf yang digunakan di setiap desain, mereka digunakan dengan tepat (lihat tip 1) dan secara konsisten di setiap situs.

Jumlah wajah font yang berbeda dapat menyebabkan keterbacaan dan masalah desain umum lainnya, jadi ini tidak berarti bahwa hanya karena Anda dapat menggunakan 100 font yang berbeda, Anda harus melakukannya. Ada beberapa kasus di mana banyak font yang digunakan secara bersamaan berfungsi dengan baik sebagai pernyataan artistik, tetapi umumnya aturan yang baik bahwa Anda menjaga jumlah font ke minimum.

Mengapa? Jawaban sederhana adalah bahwa situs yang menggunakan banyak jenis huruf yang berbeda dengan sembarangan adalah seperti orang yang menggunakan banyak suara yang berbeda dalam percakapan yang sama... mungkin sepertinya ide yang bagus, tetapi kemungkinan Anda hanya akan berakhir terdengar seperti orang gila kepada seseorang yang lewat. Membatasi jumlah tipografi pada situs membantu membangun hierarki dan tone tanpa berlebihan.

Tentu saja, memilih font yang tepat dalam pemilihan ini juga penting. Font tertentu berfungsi baik dengan tipografi spesifik lainnya, terutama yang berada dalam kategori yang sama seperti serif/sans-serif. Jenis huruf lempeng mungkin tidak cocok dengan font ultra-tipis yang Anda letakkan tepat di sebelahnya. Cobalah berbagai kombinasi hingga Anda menemukan 2 atau 3 yang tepat yang cocok untuk Anda.


Line Spacing

Line spacing dapat menjadi pemecah masalah utama untuk skema tipografi yang baik. Spasi garis hanya itu, spasi dari garis teks Anda. Pisahkan mereka lebih jauh, dan umumnya menjadi jauh lebih mudah dibaca dan lebih mudah dilihat. line spacing Anda, sebagai aturan praktis, harus sekitar 0.3em-0.5em lebih besar dari ukuran font Anda, meskipun dapat berbeda tergantung pada desain Anda. Meskipun itu adalah aturan praktis, ketahuilah bahwa pengarah harus berbeda tergantung pada pilihan fon Anda karena fon lain mungkin memerlukan pengarah lebih atau kurang.

Untuk menyadari mengapa penempatan garis yang murah hati merupakan keharusan di sebagian besar desain, lihat grafik di bawah ini untuk mendapatkan pemahaman dasar. Pada tingkat ini, keduanya cukup mudah dibaca tetapi yang dijabarkan lebih karena setiap kata memiliki lebih banyak ruang untuk dibedakan dan dipisahkan dari yang lain.


Bukankah contoh di sebelah kanan terlihat jauh lebih mudah dibaca?

Hierarki

Konsep hierarki visual adalah tempat unsur-unsur yang Anda ingin dilihat dan dipersepsikan oleh pembaca Anda terlebih dahulu adalah yang paling menonjol, apakah itu dibuat melalui warna, ukuran, jenis font atau sesuatu yang sama sekali berbeda. Tipografi dapat memainkan bagian itu dalam hierarki keseluruhan situs Anda, tetapi sebenarnya dapat memilikinya sendiri. Contoh termudah untuk menjelaskan ini adalah melihat teks di blog, dan perhatikan bagaimana judul umumnya merupakan contoh teks yang lebih besar.

Anda dapat menggunakan beberapa faktor berbeda untuk membantu menciptakan hierarki Anda. Warna adalah salah satu contoh dan yang memainkan kontras dengan baik, di mana elemen yang Anda ingin pengguna Anda baca pertama adalah yang termudah. Ukuran adalah, mungkin, contoh terbesar, karena Anda pasti akan melihat 10em string teks besar di atas paragraf standar Anda berukuran 1em.

Macintude menggunakan tema Black Sakura dari ThemeForest. Anda mungkin melanjutkan dan membaca judul sebelum Anda menyelami konten, bukan?

Untuk informasi lebih lanjut tentang hierarki visual dalam desain web, lihat artikel Brandon tentang subjek tersebut.


Ukuran

Ukuran juga merupakan aspek penting. Ukuran adalah lebar teks Anda, dan faktor yang dapat menentukan apakah teks Anda terlalu lebar atau terlalu sempit. Ukuran umumnya bekerja berdampingan dengan line spacing untuk membuat teks mudah dibaca untuk pengguna akhir, dengan menyesuaikan konten dengan rentang yang nyaman digunakan mata manusia dalam perjalanannya melintasi halaman.

Kecuali jika template Anda secara khusus merupakan desain sempit atau lebar, Anda mungkin ingin menempelkan teks Anda pada lebar konstan yang mematuhi jumlah matematika sederhana ini: 30 x ukuran teks. Gunakan itu sebagai garis dasar di samping padding Anda dan penggunaan rasio emas Anda (jika Anda memutuskan untuk menggunakannya) untuk membuat lebar yang cukup mudah dibaca. Hanya saja, jangan merusak semuanya dengan menurunkan line spacing Anda atau membuat teks Anda terlalu kecil.

Agak sulit untuk menentukan apa ukuran yang baik, karena dapat sangat berbeda antara desain yang berbeda. Teks yang lebih luas mungkin lebih cocok dengan desain tertentu.


Alignment

Teks alignment juga merupakan faktor penting. Secara umum ada empat jenis yang berpotensi Anda gunakan: kiri, tengah, kanan dan justified. Aturan emas untuk tipografi adalah membuatnya dapat dibaca, dan Anda tidak memiliki banyak kontrol atas hal itu jika Anda memilih teks alignment justified. Teks Justified pada dasarnya adalah tempat teks dioptimalkan untuk mengisi seluruh lebar elemen Anda sehingga membuat persegi panjang teks yang sempurna. Itu mungkin bagus di koran dan cetak, tetapi di web, itu tidak berfungsi dengan baik. Satu baris mungkin lebih banyak dijejali daripada baris lain, tetapi itu bukan sesuatu yang bisa Anda kontrol secara khusus.


Scaling

Tentu, Anda mungkin telah menyempurnakan tipografi Anda pada skala 100%, tetapi beberapa pengguna dapat melihat dengan jendela peramban mereka diperbesar atau memperkecil. Karena itu, tipografi Anda harus dapat mengukur dengan baik ketika pengguna memerintahkan zoom in atau zoom out. Ini sangat sederhana untuk menguji dan memanipulasi, murni dengan menskalakan browser Anda.

Catat pengunjung Anda dengan persyaratan aksesibilitas, baik di dalam maupun di luar tipografi. Tentu saja, penskalaan dapat digunakan oleh siapa saja dan seringkali, itu bisa saja kebetulan. Netbook saudara saya secara teratur memiliki jendela Chrome diperbesar terlalu jauh, murni karena kecelakaan karena gerakan yang terlibat pada trackpad.

Tentu saja, jenis pembesaran terhuyung-huyung yang dimungkinkan di sebagian besar browser hanyalah satu jenis. Mac OS X Lion memperkenalkan pinch-to-zoom iOS yang indah yang memperbesar ke halaman seolah-olah itu adalah gambar. Orang juga harus mempertimbangkan jenis zoom itu, dan bagaimana teks mereka terlihat ketika sedang dilihat dalam layout yang sama, hanya pada tampilan yang lebih dekat.


Berat

Singkatnya, berat font adalah seberapa tebal. Sebuah font dapat memiliki banyak bobot, mulai dari garis rambut ultra-ringan hingga pelat ultra-hitam. Mengubah bobot beberapa teks umumnya digunakan untuk menambahkan beberapa definisi halus untuk menentukan kepentingan, seperti menyoroti kata kunci atau paragraf pembuka, ketika digunakan dalam paragraf.

Berat font dapat digunakan dalam banyak skenario yang berbeda. Misalnya, Anda dapat menggunakannya dalam posting untuk memilih kata kunci atau frase. Membedakan dengan berat font berarti lebih sedikit kebutuhan untuk banyak font atau untuk memperkenalkan faktor-faktor lain yang mungkin menurunkan keterbacaan.


Pikiran Terakhir

Tipografi adalah bagian yang sangat integral dari desain. Ketika Anda melihat sebuah blog, Anda akan melihat seberapa banyak teks yang ada di halaman dan seberapa besar pengaruh itu terhadap desain secara keseluruhan. Kedelapan faktor ini adalah yang paling penting dalam hal tipografi, dan dapat secara drastis mengubah estetika desainnya.

Memilih apakah tipografi Anda menggunakan serif adalah keputusan besar, dan cara mencampurnya bahkan lebih penting. Jumlah font, ruang antara garis teks, ukuran, perataan, dan bobot juga merupakan karakteristik penting. Singkatnya, tipografi Anda adalah sesuatu yang harus dipikirkan dengan baik dan tidak hanya disatukan secara acak.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.