Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

6 Cara untuk Meningkatkan Tipografis Web Anda

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Tipografi di web adalah sesuatu yang sederhana, dan bagi banyak orang, ini adalah misteri yang menyulitkan. Hari ini, kita akan meninjau enam cara agar desainer web dan developer dapat memperbaiki tipografi situs yang mereka buat.

Pendahuluan

Tipografi adalah seni mendesain huruf, kata, paragraf, dan bagaimana mereka berinteraksi satu sama lain. Banyak desainer dan developer sering menyamakan tipografi dengan memilih font atau jenis huruf, sementara yang lain hanya lupa bahwa 95% desain web adalah tipografi dan cenderung melupakannya. Jelas, jika tipografi benar-benar 95% dari desain web, seharusnya itu harus selalu dipikirkan oleh setiap perancang dan pengembang. Inilah Enam Cara Untuk Memperbaiki Tipografi Web Anda.

1. Pahami Dasar-dasar Tipografi

Dasar-dasar Tipografi penting bagi semua desainer, entah mendesain web atau tidak.

Definisi Tipografi

Typography Examined and Labeled

Berikut adalah beberapa definisi tipografi dasar yang harus dipahami setiap desainer / developer saat berhadapan dengan tipografi. Daftar ini sama sekali tidak komprehensif. Lihat Daftar Bacaan yang Disarankan pada akhir artikel ini untuk glosarium yang lebih komprehensif.

  • Ascender: Bagian dari huruf kecil yang posisinya tepat berada di atas meanline.
  • Baseline: Garis di mana teks berada.
  • Tinggi Cap: Bagian atas dari garis yang diberikan tidak termasuk leading.
  • Descender: Bagian dari huruf kecil yang ada di bawah garis dasar.
  • Kerning: Lebar ruang antara dua karakter yang digunakan untuk mencapai tampilan optimal. Umumnya, kerning secara otomatis dilakukan oleh aplikasi yang diberikan, namun perlu dipahami bahwa Photoshop (atau software editing gambar lainnya) tidak perlu memberikan kerning yang sama seperti halnya browser web.
  • Leading: Tinggi jarak antara dua baris di bagian. Jumlah optimal leading umumnya setengah tinggi ukuran font. Misalnya, jika menggunakan ukuran font 12px, seharusnya ada 6px leading.
  • Letter Spacing: Lebar default ruang antara satu set karakter tertentu. Ini juga kadang disebut "Pelacakan."
  • Ligatures: Glyphs special yang menggabungkan dua karakter terpisah menjadi satu glyphs. Ligatur sering dibuat secara otomatis dalam program desain seperti Photoshop atau InDesign namun umumnya tidak diterjemahkan sebagai glyphs individu di browser web. Jika penggunaan ligatur diinginkan di web, gunakan entitas karakter HTML atau Unicode untuk membuatnya secara manual.
  • Tinggi Garis: Tinggi garis termasuk leading yang ditambahkan. Tinggi garis adalah metode yang paling efektif untuk mengendalikan ritme vertikal. Misalnya, jika menggunakan ukuran font 12px untuk teks bodi standar, seharusnya ada kira-kira 6px leading, yang diterjemahkan ke dalam garis-tinggi 18px.
  • Measure: Lebar garis atau kolom teks tertentu (umumnya dalam karakter). Ukuran optimal untuk membaca menurut pengalaman saya pada umumnya adalah 60 karakter, namun ini bervariasi dari huruf ke huruf berdasarkan spasi huruf dan spasi kata.
  • Rendering: Proses menafsirkan tipe oleh browser atau aplikasi lainnya. Setiap browser, aplikasi, dan sistem operasi memberikan jenis yang berbeda.
  • Weight: ketebalan atau ringannya font yang diberikan. Online dengan jenis yang diberikan, yang terbaik adalah menempelkan dua bobot font: normal dan bold. Dengan tipografi berbasis gambar, menggunakan bobot lain seperti Semibold, Light, dan Black, jauh lebih mudah.
  • Word Spacing: Lebar ruang antara dua kata yang diberikan.
  • X-Tinggi: Tinggi teks antara garis dasar dan rata-rata. Ini setara dengan tinggi huruf kecil biasa (awalnya, glyph "x").

Skala Tipografi

Typography Scale Example

Untuk membuat skala tipografi yang efektif, metode terbaik yang saya temukan adalah menggunakan unit pengukuran ukuran "em", karena menentukan ukuran relatif terhadap dasar dokumen. Pada contoh di bawah, ukuran font dasar adalah 12 piksel, yang akan menetapkan ukuran font standar untuk paragraf pada 15 piksel.

Ritme Vertical

Ritme vertikal garis spasi yang memberikan jarak optimal bagi mata untuk diikuti. Untuk membuat ritme ini, yang terbaik adalah mengikuti garis dasar. Dari pengalaman saya, ritme vertikal online paling baik diatur pada atau di dekat 1.5em. NETTUTS +, misalnya, menggunakan irama vertikal 1.6em, yang setara dengan tinggi garis 17.6px (berdasarkan ukuran huruf 11px).

Vertical Rhythm Example

Berikut adalah ritme vertikal standar yang saya gunakan di banyak situs web saya yang dibangun di atas sistem grid 960. Untuk mencapai ritme vertikal dengan tepat, setiap paragraf harus memiliki margin atau padding di bawahnya setara dengan garis grid garis dasar standar.

2. Desain pada Browser

Seperti yang diketahui oleh kebanyakan desainer dan developer, situs web dirender secara berbeda di berbagai browser. Hal ini terutama berlaku dengan rendering font. Berikut adalah perbandingan bagaimana lima browser populer menampilkan teks yang sama:

Type Rendering Comparison
Sumber Gambar: FontTech.Info

Saat membuat tata letak tipografi atau situs yang kaya akan konten (seperti majalah atau situs blog), karena dengan dapat melihat perbedaan antara tipografi di masing-masing browser dan sistem operasi yang berbeda merupakan anugerah utama. Perancangan di browser bukanlah hal baru (bahkan pada tahun 1997 ketika saya membuat situs web pertama saya, saya merancangnya sepenuhnya di browser). Meskipun tidak setiap situs adalah kandidat untuk merancang di browser, salah satu yang paling memperhatikan tipografi sangat cocok untuk merancang di browser.

Designing in the Browser
Sumber Gambar: For a Beautiful Web

Andy Clarke, desainer / developer populer, baru-baru ini berbicara di An Event Apart Boston dengan sebuah presentasi berjudul Walls Come Tumbling Down di mana dia menganjurkan perancangan di browser karena berbagai alasan. Gambar di atas, diambil dari presentasinya, menunjukkan penggunaan grid standar untuk kedua kolom dan irama vertikal.

Cara terbaik mendesain di browser adalah dengan menggunakan grid seperti ini. Dalam paket sumbernya, saya menyertakan dua kolom yang berbeda, masing-masing memiliki tiga varian ritme vertikal. CSS di bawah ini menunjukkan metode termudah untuk menerapkan salah satu grid pengujian ini dengan mengganti gambar latar atau gambar di badan halaman HTML menggunakan kelas yang spesifik ke grid yang Anda pilih. Cukup tambahkan kelas yang ditentukan ke tag tag DIV atau tag wadah konten, dan Anda siap merancang di browser Anda.

Perlu dicatat bahwa untuk irama vertikal yang baik, perlu memiliki kontrol granular atas garis-tinggi untuk mencapai ritme vertikal yang tepat. Selain itu, Anda dapat menggunakan Alat Membuat-Grid Bookmarklet untuk overlay situs web manapun dengan grid yang disesuaikan. Saya merasa ini berguna saat Anda tidak bisa mengganti gambar latar belakang dengan salah satu grid.

3. Gunakan Teknik Penggantian Gambar CSS

Menggantikan teks dengan gambar telah menjadi praktik standar dalam desain web sejak tahun 90an. Dengan diadopsinya CSS di browser utama, teknik penggantian gambar mulai timbul yang tidak hanya terdiri dari pembuatan gambar dan menempatkannya di tempat teks. Yang pertama diterima secara luas adalah Penggantian Citra Fahrner (FIR), namun saat orang-orang bermain dengan Penggantian Gambar CSS, mereka menyadari bahwa teknik ini tidak dapat diakses. Teknik Penggantian Gambar Fark pada awalnya dipahami sebagai pengganti yang mudah diakses untuk teknik FIR klasik. Pertama kali diusulkan olehMike Rundle dari 9rules pada tahun 2003, Penggantian Gambar Farkbergantung pada penggunaan properti CSS teks-indent dan background-image untuk menyembunyikan teks dari pengguna namun tetap dapat diakses oleh pembaca layar dan mesin pencari.

Untuk menggunakan Penggantian Gambar Fark, setel elemen kontainer (dalam kasus ini, DIVs) dengan tinggi dan lebar yang ditentukan. Lalu atur gambar latar belakang. Akhirnya, atur properti text-indent menjadi -9999px. Properti teks-indent pada dasarnya mendorong awal teks meninggalkan 9999 piksel, namun ini tidak meningkatkan area yang dapat digulir, sehingga teks bisa menghilang secara efektif.

Phark Image Replacement Example

Sementara Phark saat ini adalah Teknik Penggantian Gambar CSS, satu-satunya yang paling umum, ada banyak hal lain dengan kelebihan dan kekurangan yang berbeda. Misalnya, Phark gagal menunjukkan sesuatu kepada pengguna jika gambar dinonaktifkan namun CSS diaktifkan, merupakan kelemahan yang relatif kecil. Selain itu, Penggantian Gambar CSS tidak benar-benar dimaksudkan untuk tipografi berskala besar (yaitu artikel), tapi lebih baik untuk tombol, judul, dan teks dalam jumlah kecil lainnya. Untuk mempelajari lebih lanjut tentang Teknik Penggantian Gambar berbasis CSS lainnya, CSS-Tricks menulis ringkasan yang bagus tentang semua Teknik Penggantian Gambar berbasis CSS yang tersedia yang disebut Sembilan Teknik untuk Penggantian Gambar CSS.

4. Gunakan Teknik Penggantian Gambar "Lanjutan"

Penggantian Gambar Standar sangat ideal untuk situasi dekoratif dan jumlah teks yang lebih sedikit. Apa yang Anda lakukan saat ingin mengganti teks untuk keseluruhan artikel? Bagaimana mengganti headline dan menjaga agar teks tetap dapat dipilih? Jawabannya di sini adalah salah satu teknik penggantian gambar lanjutan. Untuk semua tujuan intensif, ada tiga pengganti gambar lanjutan yang berbeda yang tersedia saat ini (jika Anda mengetahui yang lain, silakan tinggalkan di komentar): Berbasis Flash, berbasis Javascript, dan berbasis PHP.

Scalable Inman Flash Replacement (sIFR)

Teknik penggantian gambar pertama adalah Scalable Inman Flash Replacement (sIFR), yang awalnya dirancang oleh Shaun Inman sebagai IFR dan kemudian beralih ke penunjukan sIFR oleh Mike Davidson dan Mark Wubben, yang saat ini mempertahankan proyek tersebut.

Keuntungan:

  • Rendering font yang paling crisp karena anti-aliasing
  • Rendering font yang paling crisp karena anti-aliasing
  • Mempertahankan teks asli semantik dan mudah diakses
  • Teks dapat dipilih (sebagian)
  • Skrip yang tidak mencolok

Kekurangan:

  • Tidak cocok untuk teks body dengan skala besar
  • Pengaturannya bisa agak rumit
  • Memerlukan Flash dan JavaScript
  • Waktu muat bisa jadi lamban
  • Printing bisa jadi permasalahan

Jika Anda ingin mempelajari bagaimana menerapkan dan melihat contoh sIFR, NETTUTS + memiliki tutorial bagus tentang cara menggunakan sIFR atau kunjungi situs resmi untuk sIFR2 atau situs resmi untuk sIFR3, versi terbaru.

cufón

Teknik penggantian gambar terbaru yang paling populer saat ini disebut cufón, yang seharusnya merupakan kata "custom" dan "font" portmanteau menurut beberapa orang. Ini "bertujuan untuk menjadi alternatif yang layak  untuk sIFR, walaupun manfaatnya masih  sangat sulit  diatur dan digunakan" menurut wiki cufón.

Keuntungan

  • Teknik penggantian gambar maju tercepat
  • Mempertahankan konten teks semantik asli
  • Merendahkan secara angun menjadi teks original
  • Tidak memerlukan plugin apapupn (seperti Flash)
  • Skrip yang tidak mencolok
  • Mudah untuk disetup.

Kekurangan

  • Teks tidak dapat disalin dan disisipkan (Teks tidak dapat dipilih)
  • Perizinan Font adalah kabur tentang cufón
  • Justifikasi dan efek teks tidak bekerja
  • :hover memiliki banyak keanehan
  • Memerlukan Javascript

Jika Anda ingin belajar bagaimana menerapkan dan melihat contoh cufón, NETTUTS + memiliki screencast dan tutorial hebat tentang cara menggunakan cufón atau kunjungi situs resmi cufón.

Penggantian Gambar Facelift (FLIR)

Teknik penggantian gambar facelift (FLIR) berbeda dari yang sebelumnya disebutkan bahwa ia menggunakan script sisi server dengan PHP dan GD Image Library. Ini dikembangkan oleh Cory Mawhorter untuk menyediakan teknik penggantian font sisi server otomatis.

Keuntungan

  • Mempertahankan konten teks semantik asli
  • Tidak memerlukan plugin apapun (seperti Flash)
  • Permasalahan perizinan font kemungkinan tidak ada, selamanya

Kekurangan

  • Teks tidak dapat disalin dan disisipkan (Teks tidak dapat dipilih)
  • Perenderan font lebih rendah dibandingkan dengan alternatif lainnya
  • Memerlukan server web dengan PHP dan GD
  • Memerlukan lebih banyak sumber daya server
  • Bisa sangat sulit untuk disetup

Jika Anda ingin belajar bagaimana menerapkan dan melihat contoh FLIR, Desain Divito memiliki tutorial yang bagus tentang bagaimana menggunakan FLIR atau kunjung situs resmi FLIR

5. Gunakan CSS3's @ font-face Rule untuk Web Font Embedding

CSS3 relatif baru di dunia web, dan belum banyak digunakan. Salah satu fitur CSS3 yang paling menarik adalah aturan font-face. Ada dua rintangan besar untuk menggunakan @font-face sekarang. Pertama, tidak banyak font dan tipografi mendukung penyematan @font-face. Beberapa lisensi tidak jelas dan tidak membahas penyematan web, sedangkan beberapa melarang pelepasan font-face secara eksplisit. Untuk daftar tipografi yang mendukung penyematan font-face, Anda bisa mengunjungi webfonts.info.memiliki daftar yang bagus. Hambatan kedua adalah tidak semua browser mendukung aturan @font-face, seperti yang ditunjukkan pada tabel dukungan browser di bawah ini.

Sumber Gambar: Wikipedia

Aturan @font-face sekarang memungkinkan penyisipan font di IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), dan Safari (PC & Mac) dengan dukungan di Opera 10 dan Chrome segera hadir. Ini berarti bahwa, dalam beberapa bentuk atau mode, webfonts akan tersedia untuk sekitar 90% + pengguna.

Langkah Pertama: Buat deklarasi @font-face

Idealnya, deklarasi font-face pertama ini akan menjadi bagian dari file CSS yang disajikan melalui komentar kondisional hanya dengan IE versi EOT dari font tersebut. Deklarasi font-face kedua harus berupa file font OTF atau TTF. Selain itu, karena pembatasan keamanan browser, URL sumber untuk deklarasi harus bersifat relatif (walaupun beberapa browser mendukung URL absolut).

Langkah Kedua: Gunakan Fontnya

Yep. Hanya itu yang perlu dilakukan.

Setelah deklarasi dibuat, font-family yang telah dinyatakan dapat digunakan seperti font lain yang akan tersedia pada sistem pengguna. Ini adalah wilayah baru yang menarik bagi desainer dan developer web yang akan penting untuk diikuti sepanjang bulan-bulan mendatang.

Proyek pengiriman font-face yang akan datang seperti Typekit dan Typotheque mencari bantuan yang signifikan dalam hal menegosiasikan lisensi embedding web dengan penyedia font besar. Selain itu, dengan semua pertanyaan tentang menyewa font untuk penyematan web, mungkin terbukti sulit untuk mendapatkan beberapa (atau semua) font yang akan Anda gunakan dalam desain web untuk digunakan dalam perangkat lunak pengeditan gambar Anda. Ada dua solusi untuk ini: 1) desain pada browser seperti yang disarankan di atas, atau 2) menggunakan tipografi yang serupa untuk mendesain desain halaman statis.

6. Temukan Inspirasi dan Jangan Pernah Berhenti Belajar

Tipografi di web masih dalam tahap awal bila dibandingkan dengan tipografi dalam bentuk cetak, siaran, dan film. Perhatikan bentuk media lainnya untuk penggunaan tipografi yang inventif. Lain kali Anda berada di bioskop, periksa semua poster film dan perhatikan tipografi yang digunakan dalam pratinjau dan cuplikan. Lihatlah tipografi di dalam dan di sampul buku di toko buku lokal Anda. Periksa koleksi DVD atau majalah favorit Anda untuk mendapatkan inspirasi.

Online, ikuti ahli tipografi terkemuka secara online seperti For a Beautiful Web, I Love Typography, TypeInspire, atau webfonts.info. Di bawah ini, Anda akan menemukan daftar tautan bacaan yang disarankan untuk informasi lebih lanjut tentang tipografi web selain NETTUTS + dan yang disebutkan di atas.

Mudah-mudahan, enam tip berikut akan membantu Anda saat Anda mengerjakan tipografi untuk web. Ini adalah saat yang menyenangkan untuk menjadi typophile yang bekerja di web.

  • Ikuti kami di Twitter, atau berlangganan RSS Feed NETTUTS untuk tutorial dan artikel pengembangan web sehari-hari lainnya.
Advertisement
Advertisement
Advertisement
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.