10 Aturan Tipografi Web Yang Harus Diketahui Setiap Desainer

Anda dapat memasukkan banyak elemen ke dalam desain web Anda yang akan menciptakan keterlibatan, dan menjaga perhatian pengunjung Anda. Ini termasuk gambar, video, dan bahkan suara. Namun, bagian terpenting dari hampir setiap situs web adalah konten yang dibaca pengunjung untuk mendapatkan informasi yang mereka baca.

Jika Anda ingin membuat informasi tersebut lebih mudah dibaca, menarik secara visual, dan agar teks tersebut dapat ditambahkan ke keseluruhan desain situs web, Anda harus memahami tipografi. Ini adalah seni dan keterampilan membuat kata-kata tertulis baik fungsional dan estetis.

Jika Anda ingin belajar menggunakan tipografi untuk keuntungan Anda, lihat 10 aturan ini yang harus diingat oleh setiap desainer.

1. Berhenti Menggunakan LoremIpsum Setelah Proses Desain Awal

Jika konten adalah raja, mengapa tidak dipertimbangkan secara serius dalam proses desain web? Dengan menggunakan konten palsu sebagai pengganti, desainer web menurunkan konten ke peran sekunder. Ini adalah indikasi besar bahwa prioritas desain semuanya rusak. Ini tidak begitu bermasalah pada tahap awal, misalnya, saat Anda membuat berbagai tata letak halaman. Namun, setelah Anda mempersempit segalanya, penting untuk bekerja dengan konten web yang sebenarnya saat membuat desain akhir. Ini memastikan bahwa apa yang dikatakan pada halaman web tertentu sama pentingnya dengan tata letak dan elemen visual.

Selain itu, memiliki teks sebenarnya penting dalam hal desain dan tata letak. Anda tidak ingin berada dalam posisi memiliki halaman web yang sepenuhnya dirancang, hanya untuk mengetahui bahwa itu tidak berfungsi dengan konten yang sebenarnya. Inilah sebabnya mengapa sangat penting untuk mendapatkan teks aktual dari klien Anda dari penulis konten sesegera mungkin.

2. Buat Teks Sans Serif

Teks serif benar-benar indah. Ini adalah font yang bagus untuk digunakan untuk mencetak, dan untuk aplikasi cetak yang lebih besar seperti heading, title, dan subheading. Sayangnya, di layar, serif tidak dapat diskalakan dengan baik saat menampilkan konten yang lebih kecil seperti blok teks. Serif yang terlihat bagus pada ukuran yang lebih besar, membuat teks sulit dibaca ketika font menjadi lebih kecil. Karena itu, disarankan untuk menyimpan serif untuk teks besar dan mengandalkan sans ketika keterbacaan mungkin menjadi masalah. Lebih baik lagi, rangkul tampilan font sans yang bersih, ramping, dan modern dan simpan serif untuk mesin cetak. Dengan cara ini Anda tidak akan pernah harus berurusan dengan penurunan keterbacaan demi menggunakan font yang terlihat cantik.

3. Pikirkan Tentang Kutipan Cerdas Dan Simbol Lainnya di Awal Proses Desain

Kemungkinannya adalah, Anda telah mengunjungi situs web di mana simbol tertentu tidak ditampilkan dengan benar. Terkadang mereka diganti dengan pertanyaan atau serangkaian karakter yang tampak aneh. Di lain waktu, mereka tidak ada di sana. Ini sering terjadi dengan kutipan cerdas atau "keriting". Ini sering merupakan hasil dari teks yang dibuat dalam MS Word atau paket lain dan kemudian dipindahkan ke halaman web. Hal-hal hanya tidak menerjemahkan seperti yang diinginkan. Itu juga umum untuk simbol Euro, karakter byte ganda, dan simbol lain yang diambil dari konten asing.

Untuk menghindari masalah ini dalam desain akhir Anda, Anda memiliki beberapa opsi. Pertama, Anda dapat memodifikasi konten Anda untuk menghilangkan simbol-simbol ini. Ini berfungsi jika Anda ingin mengubah simbol menjadi bahasa alami. Anda juga dapat menggunakan HTML untuk memastikan bahwa simbol ditampilkan dengan benar daripada hanya mengandalkan salin dan tempel. Apa pun yang Anda putuskan, pastikan untuk menguji halaman web di setiap browser yang Anda bisa. Apa yang mungkin memecahkan masalah dengan simbol di satu browser mungkin tidak efektif sama sekali di browser lain.

4. Keterampilan CSS Tingkat Lanjut Sangat Penting

Jika Anda telah mengembangkan keterampilan CSS yang baik, pengunjung Anda harus dapat menavigasi halaman situs web Anda dengan cara yang benar-benar mulus. Jika Anda membuat lembar gaya dengan benar, Anda bahkan dapat memiliki beberapa versi dari halaman yang sama sambil tetap mempertahankan kontinuitas yang baik dalam hal tipografi. Tentu saja, Anda tidak perlu menggunakan banyak tipu daya. CSS yang baik dapat membantu Anda menghindari masalah kecil namun umum seperti mengubah tipografi dan ukuran font dari satu halaman ke halaman berikutnya.

Mengapa tipografi yang konsisten menjadi suatu keharusan? Menggunakan CSS untuk mempertahankan tipografi yang konsisten memberi situs web Anda tampilan yang profesional dan tajam. Ini juga berarti bahwa Anda tidak perlu memikirkan tipografi saat Anda mendesain setiap halaman. Sebagai gantinya, Anda cukup menggunakan stylesheet yang sesuai. Jika Anda memutuskan, pada halaman tertentu bahwa Anda akan melanggar norma dan melakukan sesuatu yang berbeda dengan tipografi untuk menciptakan efek atau untuk menarik perhatian pada sesuatu, itu akan lebih menonjol berkat penggunaan CSS Anda.

5. Tipografi Mikro dan Makro Penting

Tipografi mikro berkaitan dengan detail tipografi yang terkait dengan keterbacaan. Misalnya, spasi adalah masalah yang terkait dengan tipografi mikro, seperti penskalaan, dan kontras. Penyesuaian yang Anda buat untuk memastikan bahwa blok teks dapat dibaca di perangkat atau browser apa pun semuanya terkait dengan tipografi mikro.

Tipografi makro berkaitan dengan cara pilihan Anda terkait tipografi terkait dengan keseluruhan desain Anda. Ini berkaitan dengan estetika.

Tipografi yang baik mempertimbangkan tipografi mikro dan makro. Pernahkah Anda mengunjungi situs web yang menggunakan font khusus yang terlihat sangat rapi dan juga hampir mustahil untuk dibaca? Itulah yang terjadi ketika perhatian diberikan pada tipografi makro, tetapi bukan tipografi mikro.

6. Kenali Isinya Serta Desainnya

Seperti yang Anda ketahui, situs web yang baik memiliki aliran. Bagian dari ini adalah keterbacaan konten yang ada di halaman. Kami telah membahas bagaimana hal ini dipengaruhi oleh hal-hal seperti serif, dan kami telah membahas bagaimana teks tiruan bukanlah pengganti hal yang nyata ketika datang ke fase desain selanjutnya. Kami belum selesai. Konten benar-benar raja. Setelah desain akhir, termasuk konten, sudah siap, Anda harus membaca halaman web.

Saat Anda membaca konten setelah desain Anda selesai, Anda dapat menentukan apakah ada masalah spasi atau jeda baris atau tidak. Ini dapat membuat konten membingungkan, atau bahkan secara tidak sengaja mengubah makna konten. Memperbaiki masalah ini dengan menggunakan beberapa trik tipografi dapat memastikan bahwa produk akhir Anda mengomunikasikan dengan tepat apa yang Anda atau klien Anda maksudkan.

7. Memahami Pentingnya Hirarki

Hirarki adalah peta jalan yang Anda berikan kepada orang-orang yang mengunjungi situs web Anda. Anda dapat menggunakan gambar, video, warna, dan (tentu saja) tipografi untuk membuat hierarki itu.

Ini hanya masalah membimbing pengunjung dari hal pertama yang Anda ingin mereka lihat ke yang berikutnya, dan seterusnya. Dengan tipografi, Anda bisa menggunakan ukuran, perubahan font, dan spasi untuk membantu menentukan hierarki yang Anda inginkan agar diikuti pengguna. Bahkan, jika Anda memiliki halaman yang tidak mengonversi, Anda mungkin ingin bermain-main dengan tipografi untuk melihat apakah ada perubahan yang Anda buat akan membantu memandu pengunjung ke tombol ajakan bertindak.

8. Jadilah Kreatif Namun Hati-hati Dengan Warna

Cara termudah untuk memastikan bahwa Anda tidak pernah memiliki masalah keterbacaan karena masalah dengan warna font dan warna latar belakang adalah dengan menggunakan warna kontras tertinggi yang ada, hitam dan putih. Sayangnya, itu bisa membuat beberapa desain cukup membosankan.

Jangan takut untuk menggunakan warna. Bahkan, jangan takut untuk menggunakan kombinasi warna yang sepertinya tidak akan berhasil. Terkadang, hanya menggunakan satu atau dua warna lebih terang atau lebih gelap adalah yang perlu Anda lakukan. Kemudian, tipografi Anda berubah dari tidak terbaca menjadi terlihat sempurna dan sangat keren.

9. Teks Ditengah Parit

Masalah dengan teks terpusat sangat banyak. Pertama dan terpenting itu dapat membuat halaman web Anda menyerupai selebaran yang dirancang dengan buruk. Selain itu, Anda hampir selalu berakhir dengan margin dan teks aneh yang muncul seolah-olah dimaksudkan sebagai puisi atau catatan liner dari album rock lama. Meskipun boleh saja menggunakan teks di tengah untuk tajuk utama, Anda biasanya sebaiknya menghindarinya sama sekali. Tetap dengan teks yang disesuaikan ke kiri, dan pembaca Anda akan menemukan konten Anda lebih mudah dibaca.

10. Pertimbangkan Seperti Apa Teks Anda Diperbesar

Baik mereka menggunakan ibu jari dan telunjuk mereka atau mengklik tombol zoom, orang akan membuat teks Anda lebih besar. Terkadang, mereka melakukan ini untuk mengimbangi layar yang lebih kecil. Di lain waktu, mereka hanya melakukannya karena sulit bagi mereka untuk membaca teks Anda dalam ukuran normal.

Akan sangat bagus jika semua orang dapat melihat teks Anda sebagaimana dimaksud, tetapi dengan boomer yang sering membutuhkan bantuan ekstra untuk melihat teks, itu tidak mungkin. Berhati-hatilah untuk tidak menggunakan jenis huruf yang menurun jika diperbesar.

Alat dan Sumber Daya Bermanfaat

Berikut adalah beberapa alat dan sumber daya yang berguna untuk membantu Anda melakukan lebih banyak hal dengan tipografi:

• FontFace Ninja : Utilitas ini membantu Anda mengidentifikasi font yang Anda temukan di internet. Ini adalah alat yang hebat untuk dimiliki ketika Anda menemukan font yang benar-benar menarik perhatian Anda. Plugin Chrome ini akan membantu Anda mengidentifikasi, menemukan, dan membeli font apa pun yang tersedia secara komersial yang Anda lihat di situs web mana pun.
• TypePlate : Ini adalah kerangka tipografi lengkap yang sempurna untuk desainer web. TypePlate dapat menangani drop cap, block quotes, scaling, warna, dan berbagai tantangan terkait tipografi lainnya.
• Skala Modular : Ini adalah skala yang memungkinkan Anda menentukan font dan ukuran font yang ideal. Ini juga membantu Anda untuk membuat keseimbangan antara ukuran font judul dan judul Anda, dan font yang Anda pilih untuk teks Anda.
• TIFF : Alat ini memungkinkan Anda untuk memunculkan dua font yang berbeda. Kemudian, ini akan menampilkan perbedaan antara masing-masing dari dua font untuk Anda. Bahkan memungkinkan Anda untuk membandingkan huruf dan angka yang berbeda dari satu font ke font berikutnya.
• TypeWolf : Gunakan situs web ini untuk memperbaiki beberapa font paling keren dan penggunaan tipografi paling inspiratif di internet. Ini adalah sumber inspirasi yang sangat baik, serta informasi.
• Mengapa Font Penting, Sarah Hyndman : Ini adalah buku yang sangat bagus yang mengeksplorasi pentingnya font, dan cara tipografi dapat memengaruhi keadaan pikiran. Ini adalah buku yang bagus untuk orang-orang yang bersemangat tentang tipografi, tetapi juga untuk orang-orang yang mungkin perlu diyakinkan tentang pentingnya memilih jenis pekerjaan yang tepat.

Kesimpulan

Semoga artikel ini mempengaruhi desainer web untuk lebih memikirkan tipografi, dan juga menemukan cara untuk menggunakan tipe lebih efektif dan lebih kreatif dalam desain mereka.