6 Trik Penempatan Text Typography Yang Mencuri Perhatian

Typography telah lama menjadi bagian besar dari desain grafis, dan desain web. Di masa lalu sekalipun, desain web telah didominasi oleh typography. Selama beberapa tahun terakhir, kita telah melihat munculnya beberapa alat yang fantastis yang memungkinkan kita untuk menciptakan typography dengan kreatif untuk website.

ty

Namun, ada beberapa trik penempatan text untuk meningkatkan typography. Apa sajakah itu? Bersiaplah untuk bertambah kreatif!

 

1. Google Font API

Baru-baru ini Google memasuki penempatan font game dengan Font API gratis mereka dan font directory. Ini masih merupakan produk beta lab, namun luar biasa mudah digunakan. Masalah dengan Google Font API, adalah font directory. Hanya ada 19 font yang tersedia saat ini, dan dibandingkan dengan pilihan lain yang hanya dibatasi oleh jumlah font gratis yang dapat kamu temukan, sebenarnya ini juga kurang cukup.

google-font-directory

Namun, seperti kebanyakan produk Google, itu adalah bagian yang fantastis dari rekayasa, dan luar biasa mudah digunakan. Yang harus kamu lakukan adalah menyertakan file dinamis dalam kepala dokumen, dan dari sana, kamu bebas menggunakan font mana saja di css. Syntax memungkinkanmu untuk memuat beberapa font, varian font yang berbeda dan sebagainya dalam satu baris yang fantastis. Baris berikut, misalnya, akan memuat Cantarell italic dan Droid Serif bold.

Untuk mempelajari bagaimana menerapkan font API Google, Way Jeffrey di Nettuts telah membuat fantastic quick video.

 

2. Typekit

Typekit adalah layanan penempatan huruf web premium, dengan pilihan font gratis yang terbatas untuk pembuatan typography. Mereka bekerja untuk memberikan pilihan font terbaik untuk para pengguna, dan ini menunjukkan dengan jumlah font, mereka mampu memberikan lebih dibanding dengan layanan lain, yaitu hampir 500. Beberapa desainer web yang paling berpengaruh di internet, biasanya menggunakannya, dan itu bukti kualitas.

Typekit bertujuan untuk mempermudah penggunaan font kustom dalam desain web, dan menawarkan dua cara untuk menerapkan font yang kamu pilih ke website. Yang pertama adalah melalui Kit Editor. Kit Editor ini adalah bagi mereka yang belum terlalu mengerti bahasa web. Typekit akan menyortir segala sesuatu melalui satu baris kode yang dimasukkan ke dalam dokumen html.

kit-editor

Pilihan lain yang disediakan adalah untuk tidak menggunakan Editor Kit, tetapi hand code font pada css sendiri. Setelah menyertakan satu baris kode dalam dokumen, nama font akan diakui dan dimuat!

 

3. Google Font Loader

Google Font Loader adalah bagian sekunder dari font API Google, perpustakaan Javascript yang memberikan kontrol lebih besar atas pemuatan font dari yang Google Font API lakukan. Co-developed by Google, dan Typekit, memungkinkanmu untuk memuat font dari beberapa penyedia font, termasuk Google, Typekit, dan Ascender, serta hampir semua situs kustom yang kamu inginkan.

Untuk mempelajari cara menggunakan Google Font Loader, Google telah menulis great guide here.

 

4. FontSquirrel

Menguasai ilmu typography membutuhkan beberapa unsur. Salah satunya mengetahui penempatan text untuk meningkatkannya. FontSquirrel lebih dari database dari font gratis, tetapi ia datang dengan integrasi yang fantastis untuk font-face, cara css menyajikan web font. Google dan Typekit menggunakan font-face, meskipun jauh lebih halus melalui server sided scripts, dan javascript. FontSquirrel adalah CSS murni.

Setelah kamu telusuri direktori yang luar biasa dari font gratis, situs akan memberitahumu jika font license yang memungkinkan untuk menggunakannya dengan font-face, dan pada sebagian besar font, ada pre-built tab di mana kamu dapat langsung men-download font-face kit, yang kemudian akan memudahkanmu untuk mengimplementasikan ke css.

fontsquirrel-generator

Bagi font yang tidak dilengkapi dengan kit font-face, namun masih font-face compatible, atau font yang belum ditemukan oleh font-squirrel, ada juga font-face kit generator gratis yang tersedia! Cukup meng-upload file font, dan generator akan melakukan sisanya, kecuali jika kamu ingin sedikit menyesuaikan kit. Ini jauh yang lebih mudah, dan cara gratis terbaik untuk menerapkan satu set fantastis font ke website. Kemudahan penggunaan, dan kecepatan pelaksanaan luar biasa.

 

5. sIFR

Dalam ilmu typography, ada juga sIFR, yang tidak lain adalah singkatan Scalable Inman Flash Replacement. Ini memang membutuhkan javascript dan flash yang harus diaktifkan. Jika tidak, maka huruf css mu pasti akan digunakan. Namun sIFR tampaknya cukup rumit untuk diatur. Kamu harus membuat file flash font, memuat javascript, kemudian pilih elemen yang ingin kamu ganti font yang melalui javascript. Masalahnya adalah bahwa sIFR sangat berat, sehingga menyebabkan loading halaman kian lambat, dan tentu saja, tidak bekerja pada perangkat mobile.

Meskipun berbeda dengan alternatif font-face di atas, sIFR seharusnya hanya digunakan untuk potongan-potongan teks kecil, seperti judul. Menggunakannya di situs secara keseluruhan, akan merusak waktu download situs, dan kegunaannya.

Untuk mempelajari cara menggunakan sIFR, dan melihat contohnya, tutorial ini tampaknya akan sangat baik!

 

6. Cufon

Sebelum font-face datang dan menjadi mainstream, saingan utama sIFR adalah Cufon. Alih-alih menggunakan flash, cufon menggunakan javascript, dan membuat penggunaan elemen seperti canvas tag pada kebanyakan browser, dan VML di Internet Explorer. Ini berarti lebih ringan daripada sIFR, tapi tetap saja, Cufon benar-benar hanya cocok untuk judul. Seperti sIFR, tidak ada font library ditetapkan sehingga kamu akan membuat kit sendiri melalui Cufon Generator.

Kamu meng-upload font (dengan varian yang berbeda jika dibutuhkan), pilih karaktermu, dan kemudian optimalkan kinerja (kualitas), dan ukuran file untuk situs. Setelah ini, kamu harus menyertakan cufon file javascript, serta file font yang dihasilkan, dan kemudian pilih font untuk diterapkan. Ini akan membuat situsmu lebih dinamis.

 

Sribu harap artikel ini telah memberikan wawasan teknologi yang tersedia untuk meningkatkan typography. Kamu juga wajib belajar tentang prinsip dasar typhography agar semakin profesional. Tetapi jika kamu memiliki solusi lebih lanjut, atau ingin mengungkapkan pendapat, mulailah berdiskusi di kolom komentar!