Panduan Desainer Web untuk Metode Penggantian Font

Muak dengan Arial? Bosan dengan Times New Roman? Metode penggantian font telah meningkat secara dramatis selama 2 tahun terakhir, tetapi seringkali sulit untuk memilah metode yang berbeda jika Anda tidak terus-menerus membacanya. Artikel ini akan membahas berbagai teknik penggantian font yang ada di sana sekarang.

Kita akan melihat pro dan kontra dari masing-masing, masalah lisensi font dan sumber font terbaik di web sehingga Anda dapat mulai menggunakannya dalam desain web Anda sendiri.

Pendahuluan: Metode Penggantian Font

"Sejak awal web, desainer telah dibatasi untuk sejumlah font"

Kemungkinan desain di web tampaknya semakin hari semakin meningkat. Penerapan teknologi seperti HTML5, CSS3 dan Javascript telah menghasilkan banyak desain situs web yang menarik dan inovatif. Web tampaknya telah berjalan jauh sejak zaman browser hanya teks. Meskipun demikian, ada satu aspek desain web yang tetap relatif stagnan.

Tipografi dan pemilihan font adalah elemen integral dari setiap arsenal desainer untuk menciptakan tampilan dan 'rasa' situs web. Sayangnya sejak awal web, desainer telah dibatasi untuk sejumlah font. Helvetica, Arial dan Georgia adalah tiga dari sedikit font yang menarik (jangan lupa Comic Sans) yang dapat diandalkan oleh para desainer untuk ditampilkan dengan benar untuk sebagian besar pengguna web.

Metode tradisional bagi desainer untuk menghindari batasan-batasan seperti itu dan mengekspresikan kreativitas dengan font adalah dengan memasukkan teks ke dalam gambar - namun ada banyak kelemahan pada metode ini. Beberapa masalah aksesibilitas muncul dan kinerja situs web juga terpengaruh dengan meningkatnya waktu pemuatan.

Artikel ini akan membahas beberapa metode menarik untuk menggabungkan font non-standar ke halaman web Anda tanpa menggunakan gambar. Kita akan melihat kelebihan dan kekurangan masing-masing metode, masalah seputar penggunaan font dan apa arti teknologi ini bagi perancang web.

Cufón

Cufón adalah metode yang sangat sederhana dan efektif untuk memasukkan font non-standar ke halaman web dan yang fungsinya tidak tergantung pada bahasa sisi server atau plug-in. Cufón beroperasi hanya pada beberapa baris kode Javascript dan menggunakan kombinasi VML (Vector Mark-up Language), untuk Internet Explorer, dan fitur Canvas HTML5 untuk merender font.

Cufón menyediakan font converter tool di beranda mereka yang akan memungkinkan untuk mengubah font yang Anda pilih menjadi SVG dan membuat file Javascript untuk Anda rujuk dalam HTML Anda. Editor Nettuts+ Jeffrey Way sebelumnya telah menulis tutorial langkah-demi-langkah yang sangat baik tentang bagaimana mengintegrasikan Cufón ke halaman web Anda.

Cufón adalah pilihan populer bagi banyak perancang web karena banyak manfaatnya dan relatif sedikit negatif. Ketidakpercayaan pada bahasa scripting lain atau plug-in berarti dapat diakses oleh audiens yang sangat luas dan juga didukung oleh versi terbaru dari semua browser utama termasuk IE 9. Anda juga dapat langsung menerapkan gaya CSS ke teks yang diganti Cufón, termasuk fitur CSS 3 yang lebih baru seperti gradien. Dalam hal kecepatan, ini jauh lebih cepat daripada sIFR dan kurang intensif, tetapi tetap tidak boleh digunakan untuk teks berukuran besar.

Namun ada beberapa hal negatif untuk Cufón. Itu masih bergantung pada Javascript untuk berfungsi, yang mungkin dimatikan beberapa pengguna web. Teks Cufón yang diganti yang mengecewakan juga tidak dapat dipilih dan karenanya disalin dan ditempel.

Pro:

• Dukungan luar biasa untuk berbagai browser
• Kemampuan untuk memilih serangkaian karakter tertentu (ABC, 123, dll.) yang ingin Anda sertakan dalam font Anda untuk mengelola ukuran file.
• CSS Font-styling dipertahankan pada semua browser (warna, ukuran, bayangan teks...)

Kontra:

• Teks tidak dapat dipilih
• Kinerja: Paling baik digunakan dalam headers, judul, dan terjemahan.
• Styling Khusus (dekorasi teks, hover, dll) dapat memerlukan sedikit kerja ekstra.

@font-face

"@font-face pada dasarnya adalah solusi terbaik untuk font di web."

@font-face mungkin telah menerima perhatian paling banyak dari metode penggantian font apa pun, tetapi ada alasan yang sangat bagus untuk ini. @font-face pada dasarnya adalah solusi terbaik untuk font di web dan satu di mana semua orang lain berharap untuk mereplikasi sebelum sepenuhnya disadari. @font-face sebenarnya termasuk dalam spesifikasi CSS2 tetapi telah diambil sampai sekarang untuk adopsi luas.

@font-face tidak menggunakan teknologi web selain CSS untuk mengimplementasikan font khusus pada halaman web – ini berarti tidak ada lagi ketergantungan pada Flash, PHP atau bahkan Javascript. Jenis aktual diberikan saat menggunakan @font-face, bukan objek vektor atau gambar, dan oleh karena itu teks dapat dipilih, diskalakan dan ditata menggunakan CSS.

Sayangnya, seperti halnya dengan banyak masalah lain yang berhubungan dengan web, terutama browser (bersama-sama dengan masalah lisensi yang akan kita bahas di bawah) yang telah menghambat kemajuan @font-face. Setiap browser yang dominan mendukung format font yang berbeda. Internet Explorer menggunakan .EOT (Embedded Open Type) sementara versi terbaru dari Firefox, Chrome, Safari dan Opera semua mendukung .ttf (True Type Format). Open Type Format juga didukung oleh campuran browser dan SVG (Scalable Vector Graphics) diperlukan untuk iPhone dan iPad. Itu semua bisa sangat membingungkan dan kadang-kadang bisa membuat banyak orang tidak mau menggunakannya. Untungnya, ada cahaya di cakrawala. Web Open Font Format, atau .WOFF, diatur untuk menjadi format standar untuk font web dan saat ini sedang distandarisasi oleh W3C. Firefox telah mendukung format sejak versi 3.6, Chrome sejak 5.0 dan baru-baru ini diumumkan bahwa Internet Explorer 9 juga mendukung format tersebut. Mari kita berharap Opera dan Safari segera bergabung dengan pesta.

Satu-satunya masalah kecil lainnya dengan @font-face adalah karena ini disajikan sebagai tipe aktual, masing-masing browser dan sistem operasi akan membuatnya sedikit berbeda. Beberapa layanan font web, yang akan kita bahas lebih lanjut, bertujuan untuk memperbaiki sedikit perbedaan ini dengan menggunakan font hinting yang memperhalus garis besar tipe pada browser yang menciptakan tipe yang lebih menyenangkan secara estetika.

Jika Anda ingin informasi lebih lanjut tentang cara menerapkan @font-face di situs web Anda, Jeffrey Way sekali lagi memberikan tutorial yang bermanfaat tentang cara melakukannya.

Pro:

• Aksesibilitas dipertahankan - artinya terdegradasi dengan baik.
• Unicode support
• Dukungan Font Styling (CSS)

Kontra:

• Beberapa font bisa berat untuk diunduh.
• No common font-file format on all browsers.
• Distribusi tidak diizinkan (sepengetahuan kita) - artinya Anda tidak dapat menggunakan ini dalam templat atau tema tanpa mengamankan lisensi distribusi Anda sendiri.

Segelintir solusi berikutnya mengandalkan @font-face untuk mengirimkan barang - masing-masingnya adalah "service" kurang lebih - artinya: mereka semua menggunakan teknologi dasar yang sama, tetapi mereka menawarkan pustaka font yang berbeda, opsi lisensi, dan rencana pembayaran; Ya, sebagian besar mengharuskan Anda membayar untuk menggunakannya, tetapi kemungkinan ini adalah cara masa depan untuk semua font di web.

Font Squirrel @font-face Kits

Font Squirrel mungkin adalah sumber pengganti font yang paling populer saat ini. Font Squirrel mengurangi kekhawatiran Anda tentang lisensi font, karena semua font yang disediakan tersedia secara bebas untuk tujuan komersial. Situs ini memiliki ratusan font untuk dipilih, mulai dari sans-serif hingga font gaya baru.

Seperti dibahas di atas, untuk memastikan @font-face berfungsi di semua browser, Anda akan memerlukan beberapa format font yang berbeda dan untuk Font Squirrel ini ada solusinya. Situs ini menawarkan kit @font-face yang menyediakan semua format yang Anda butuhkan dan juga menyertakan HTML dan CSS yang diperlukan juga. Jika Anda tidak dapat menemukan kit @font-face untuk font yang ingin Anda gunakan, mereka juga menyediakan generator yang akan mengkonversi file font Anda ke dalam berbagai format yang Anda perlukan secara gratis. Saat menggunakan generator, Anda perlu memastikan Anda memiliki lisensi yang benar yang memungkinkan Anda untuk menggunakan font di situs web Anda.

Pro:

• Menggunakan @font-face, tetapi membuat implementasi jauh lebih mudah.
• Mereka menangani semua masalah perizinan.
• Ratusan font untuk dipilih.
• Termasuk beberapa format (TrueType, EOT, WOFF, SVG, Cufon, dll.)
• Anda bahkan dapat membuat kit Anda sendiri jika mereka tidak memilikinya.

Kontra:

• Sama seperti @font-face... tetapi sebagian besar, ini adalah solusi yang bagus.

API Google Fonts

API Font Google digunakan bersama dengan direktori font mereka sendiri di mana semua font adalah open source dan tersedia untuk digunakan semua orang. Direktori ini berkembang dan terus berkembang, saat ini menampung lebih dari 200 contoh.

Sangat tidak mudah untuk memasukkan font dari direktori ke situs web Anda. Anda hanya perlu memilih font yang ingin digunakan, pilih varian font yang Anda butuhkan dan Google akan memberi Anda satu baris kode Javascript yang Anda butuhkan. Sesuaikan CSS Anda untuk mencantumkan font yang digunakan dan Anda siap berangkat. Sesederhana itu!

Pro:

• Lisensi Open Source berarti ini gratis untuk digunakan!
• Font dilayani oleh Google; Jadi font Anda mungkin sudah ada di cache browser.

Cons:

• erm..

Typekit

Typekit adalah salah satu layanan font web berlangganan pertama dan masih sangat populer. Typekit dan layanan serupa lainnya mengatasi masalah lisensi font dengan memberi pengguna akses ke sejumlah besar font khusus dengan imbalan biaya berlangganan tahunan. Metode ini memungkinkan font foundries menerima sesuatu sebagai imbalan atas kerja keras mereka dan juga memastikan terhadap pembajakan font karena semua font di-host secara terpusat pada server yang dilindungi Typekit. Pengguna layanan tidak meng-host font di ruang web mereka sendiri tetapi hanya menghubungkan ke mereka.

Typekit telah bekerja sama dengan beberapa font foundries terbesar di dunia untuk menawarkan berbagai jenis font yang dapat Anda gunakan. Typekit memberikan banyak opsi dan kontrol atas font yang Anda gunakan. Pilih berbagai varian font, bobot, dan glyphs untuk digunakan. Anda juga dapat membuat tumpukan CSS dan memilih font fallback untuk digunakan ketika @font-face tidak didukung. Anda juga perlu memilih tag HTML tertentu atau kelas CSS untuk menerapkan font khusus. Setelah puas dengan pilihan yang telah Anda buat, sepotong kode Javascript dibuat untuk digunakan di situs Anda.

Manfaat lain dari Typekit adalah bahwa ia bertujuan untuk mengontrol variasi dalam bagaimana browser yang berbeda menangani teks dan font menggunakan petunjuk.

Typekit menawarkan berbagai paket harga yang sesuai dengan kebutuhan yang berbeda. Tersedia paket gratis yang memberi Anda dua font untuk digunakan dari Trial Library mereka di satu situs web. Situs web diizinkan hingga 25.000 tampilan halaman sebulan dan Anda juga harus menampilkan lencana Typekit di situs, yang menautkan ke informasi tentang font yang digunakan. Di ujung lain dari skala adalah Performance package yang memberi Anda akses ke berbagai font yang tersedia untuk digunakan pada jumlah situs web yang tidak terbatas tanpa batas pada jumlah tampilan halaman. Performance menyediakan semua fitur ini dengan biaya berlangganan tahunan sebesar £99.99.

Pro:

• Banyak pilihan font.
• Font dilayani di server Typekit.

Kontra:

• Biaya tahunan.
• Anti-aliasing belum sempurna... beberapa font dapat muncul "bergerigi" dan non-alias pada beberapa browser/OS.

Fonts.com Web Fonts

Sumber font yang populer fonts.com juga telah meluncurkan layanan font web khusus, yang menawarkan lebih dari 8000 font untuk digunakan di situs web Anda. Serupa dengan Typekit, ini adalah layanan berbasis langganan kecuali bahwa itu adalah harga setiap bulan. Dibandingkan dengan Typekit, ini lebih mahal tetapi ada jauh lebih sedikit pembatasan pada font. Paket gratis ini membandingkan dengan sangat baik, memberikan akses tanpa batas ke 8000 font untuk digunakan pada sebanyak mungkin situs web yang Anda inginkan. Paket Professional juga memungkinkan Anda mengunduh hingga 50 font dan menginstal pada komputer Anda untuk digunakan dalam desain Anda.

Fonts.com Web Fonts menawarkan beberapa tipografi yang benar-benar hebat sebagai bagian dari koleksinya - seperti Helvetica, Univers dan Franklin Gothic.

Pro:

• Banyak pilihan font dan gaya.
• Rumah eksklusif Helvetica®, Frutiger®, Univers® dan font-font terkenal lainnya.
• Dukungan bahasa.

Kontra:

• Biaya tahunan jika Anda menginginkan lebih dari apa yang ditawarkan layanan gratis mereka.
• Terbatas pada perpustakaan mereka (yang sebenarnya cukup besar).

Fontdeck

Perusahaan desain web terkenal Clear Left, yang telah bekerja untuk beberapa bisnis terbesar di dunia, telah bekerja sama dengan OmniTI dan merilis Font Deck. Font Deck adalah layanan berbasis langganan lain kecuali Anda hanya membayar biaya tahunan untuk setiap font yang Anda gunakan, cocok untuk mereka yang hanya ingin menggunakan satu atau dua font untuk blog pribadi mereka.

Harga font mulai dari $2.50 per tahun per domain dan diizinkan tampilan halaman tidak terbatas. Seluruh pemilihan font juga tersedia untuk dicoba secara gratis untuk waktu yang lama, meskipun hanya dua puluh alamat IP unik yang dapat melihatnya. Paket gratis ini bertujuan untuk mengimbangi kenyataan bahwa Anda tidak dapat mengunduh font ke mesin lokal Anda dan menggunakannya selama tahap desain. Karena Font Deck hanya relatif baru, pemilihan font untuk dipilih saat ini tidak terlalu besar.

Pro:

• Bayar hanya untuk apa yang Anda butuhkan.
• Pratinjau font di situs Anda secara gratis.
• Dukungan bahasa.

Kontra:

• Masih membutuhkan uang.
• Terbatas pada perpustakaan mereka (yang sebenarnya cukup besar).

Font Spring

Font Spring mengambil pendekatan yang sedikit berbeda dari layanan berbasis langganan dan kembali ke cara tradisional membeli font. Font dibeli secara terpisah dan mengharuskan Anda untuk mengunduhnya dan meng-host font di server web Anda sendiri. Font Spring menunjukkan bahwa 99.9% font yang tersedia dapat digunakan dengan @font-face.

Setiap font dapat bervariasi dalam harga dan Anda diharuskan membayar biaya tambahan untuk lisensi menggunakan font dengan @font-face. Lisensi @font-face meliputi versi OpenType desktop dari font dan berbagai format yang Anda perlukan untuk menggunakannya di web.

Ada banyak manfaat menggunakan metode ini. Jika Anda benar-benar telah menetapkan hati Anda hanya pada satu font tertentu, itu mungkin menjadi alternatif yang lebih murah untuk layanan berlangganan. Anda dapat menggunakan font pada domain sebanyak yang Anda suka, selama Anda memiliki kontrol langsung terhadapnya dan tidak ada batasan jumlah tampilan halaman.

Sebagai peringatan tambahan, Anda dilarang mengonversi atau menyematkan font dengan teknologi lain seperti sIFR atau Cufón.

Pro:

• Seperti Font Squirrel, ia mengelola lisensi untuk Anda.
• Perpustakaan hebat lain dari berbagai pendiri.

Kontra:

• Pendekatan bayar per font bisa menjadi mahal.
• Anda harus meng-host font Anda sendiri.

Solusi Penggantian Font Lainnya

Ini hanya beberapa layanan font yang tersedia, ada banyak lagi seperti Typotheque dan Webtype. Masing-masing memiliki positif dan negatifnya sendiri dan pilihan Anda harus didasarkan pada kebutuhan pribadi Anda. Beberapa mungkin menikmati kemudahan penggunaan layanan berlangganan, sementara yang lain mungkin tidak suka memikirkan menyerahkan kontrol atas situs mereka kepada pihak ketiga. Jika yang terakhir terjadi, Anda mungkin lebih baik mengunduh dan meng-hosting font web Anda sendiri dengan bantuan situs web seperti Font Squirrel.

Dua berikutnya (sIFR dan FLIR) pada umumnya dianggap sebagai "sekolah tua" karena mereka memiliki masalah yang adil, tetapi mereka layak untuk didiskusikan dan diketahui.

sIFR

sIFR telah ada selama beberapa waktu sekarang. Ketika pertama kali keluar, memberikan metode yang efektif untuk menggabungkan font non-standar ketika benar-benar tidak ada pilihan lain selain gambar. sIFR atau Scalable Inman Flash Replacement menggunakan kombinasi Flash dan Javascript untuk memodifikasi teks pada halaman web menjadi elemen Flash. sIFR memiliki banyak kelebihan seperti teks tetap dapat diakses oleh pembaca layar dan masih dapat dipilih.

Namun, istilah 'scalable' dalam nama tersebut berpotensi menimbulkan kebingungan. sIFR scalable dalam arti bahwa elemen Flash berskala ke ukuran teks browser asli – memungkinkannya untuk menampilkan semua teks pada ukuran terbesar yang dimungkinkan dalam dimensi tertentu. Namun, teks apa pun yang telah diganti dengan elemen flash tidak dapat menyesuaikan ketika pengguna mengubah ukuran teks pada halaman; yang jelas menyebabkan masalah aksesibilitas. sIFR juga mengharuskan Flash dan Javascript diaktifkan di komputer pengguna agar berfungsi.

Salah satu pencipta sIFR, Mike Davidson juga mengakui keterbatasan teknologinya. Mike secara terbuka menyatakan bahwa sIFR tidak boleh digunakan untuk teks dalam jumlah besar karena memiliki efek nyata pada kinerja situs web. Mike juga mengakui bahwa teknologinya bukanlah solusi akhir untuk tipografi di web dan merujuk hanya sebagai 'pengganti sementara'.

Pro:

• Tidak ada pro besar... selain itu adalah metode penggantian font pertama di tempat kejadian.

Kontra:

• Bergantung pada Flash
• Kinerja Lambat
• Program Flash dan Ad-Blocker memblokirnya
• Sulit didandani dengan sempurna - tidak selalu berperilaku seperti yang diharapkan.

FLIR

FLIR atau Facelift Image Replacement mirip dengan sIFR kecuali bahwa ia menggunakan Javascript dan PHP untuk menghasilkan gambar daripada Flash untuk mengganti teks. Metode ini memiliki manfaat yang jelas bahwa Anda tidak perlu menghabiskan waktu membuat gambar individual untuk setiap bagian teks yang ingin Anda gunakan font khusus. Jika Anda memutuskan untuk menggunakan font atau warna yang berbeda untuk teks Anda, juga jauh lebih mudah untuk memperbarui teks di situs web Anda.

Sayangnya, selain kemudahan penggunaan dan aspek penghematan waktu dari FLIR, ia tidak menawarkan banyak perbaikan dibandingkan metode tradisional menyimpan teks sebagai gambar. Hasil akhirnya masih tetap sebagai teks yang dirender sebagai gambar di mana teks tidak dapat dipilih atau diskalakan.

Pro:

• Bekerja di semua browser utama

Kontra:

• Bandwidth Berat
• Teks tidak dapat dipilih
• Membutuhkan PHP dan GD di server... yang tidak selalu diberikan

Lisensi Huruf dan Legalitas

Masalah dengan lisensi font adalah masalah yang sedang berlangsung dan telah berkontribusi terhadap lambatnya kemajuan dan adopsi metode penggantian font. Seperti halnya gambar, Anda memerlukan izin dari penulis, dalam bentuk EULA (End User License Agreement), untuk menggunakan font di situs web Anda. Beberapa lisensi mengizinkan penggunaan font secara gratis, bahkan untuk tujuan komersial, sementara yang lain hanya memungkinkan untuk penggunaan pribadi pada mesin lokal.

Saat menggunakan salah satu metode penggantian font yang dibahas di atas, Anda secara efektif memasukkan font ke situs web Anda atau menautkannya ke yang telah diunggah ke server web Anda dan ini tidak diizinkan oleh banyak, bahkan lisensi font gratis. Alasan banyak pencipta font dan pengecoran tidak mengizinkan ini adalah karena memungkinkan pengguna situs mengakses langsung ke file font dan mereka menjadi khawatir bahwa font mereka dapat diunduh dan didistribusikan secara ilegal. Masalah ini telah mencegah banyak pembuat font membuat font mereka tersedia untuk digunakan dengan metode seperti @font-face.

Oleh karena itu sangat penting bahwa ketika menggunakan salah satu metode yang dibahas di atas Anda benar-benar memastikan bahwa lisensi font mengizinkannya.

Untungnya, masalah ini tidak menghambat pengembangan metode penggantian font sepenuhnya dan ada banyak sumber daya yang tersedia untuk memungkinkan Anda menggunakan font khusus di situs web Anda.

Pikiran Final tentang Apa Artinya Ini untuk Desainer

"Kesempurnaan tidak layak ditunggu, jika kamu melakukannya, kamu berisiko kehilangan peluang baru yang menarik"

Kita telah membahas banyak hal di atas, dan jelas bahwa ada banyak opsi yang tersedia bagi mereka yang ingin menggunakan font khusus dalam desain situs mereka. Berita baiknya adalah semua metode ini tersedia untuk digunakan saat ini. Itu benar; tidak ada metode yang sempurna, masing-masing memiliki poin baik dan buruk. @font-face jelas memiliki banyak harapan, tetapi mungkin akan beberapa tahun lagi sebelum benar-benar anti peluru. Yang benar adalah meskipun situasinya jarang sempurna di dunia desain web, akan selalu ada kompromi dan penyelesaian yang diperlukan untuk menerapkan teknologi baru. Kesempurnaan tidak layak ditunggu, jika Anda melakukannya, Anda berisiko kehilangan peluang baru yang menarik.

Ini benar-benar waktu yang menyenangkan untuk desain web, dan tampaknya ada apresiasi dan pemahaman yang berkembang tentang Tipografi di web. Metode penggantian font menawarkan peluang besar untuk membuat desain baru yang inovatif dan saya percaya kuncinya adalah tidak menyalahgunakan teknologi ini. Selalu berikan fallback untuk hal-hal yang salah dan gunakan setiap metode dengan bijaksana (jangan ubah semua teks di situs Anda menjadi ini). Luangkan waktu untuk menghargai dan belajar tentang tipe hebat dan web akan menjadi tempat yang lebih baik untuk itu.

Pernahkah Anda memikirkan hal ini? ada pertanyaan? Jika kami melewatkan salah satu metode favorit Anda, poskan di bawah ini di bagian komentar dan kami pasti akan memasukkannya di postingan ini!