Mengefektifkan Tipografi di Web

Desain web responsif bukan hanya tentang kolom, grid, gambar dan icon. Semua itu tidak akan terlihat bagus jika tanpa teks pada kontennya. Bill Gates pernah berkata “Content is King”.

Ketika datang ke konten, kita perlu membicarakan tentang web tipografi. Melihat tren desain web modern, memiliki responsif tipografi adalah faktor besar untuk setiap web desaigner dan web developer tidak boleh melewatkannya.

Disini, kita akan membahas pembuatan tipografi web responsif dan faktor yang perlu untuk Anda ketahui tentangnya.

Dasar-Dasar Tipografi

Tipografi yang baik adalah semua tentang pemilihan jenis yang tepat untuk web atau media cetak. Dari jenis font, warna teks sampai panjangnya dan ukuran font pada viewport yang berbeda, tipografi yang baik memastikan bahwa bentuk-bentuk huruf terakhirnya menghasilkan kualitas hasil akhir tertinggi.

Sebelum kita menyelam kedalam proses pembuatan web tipografi responsif, berikut adalah beberapa hal yang perlu Anda pahami :

Jenis font (Typeface)

font-face

Juga dikenal sebagai font family. Ini adalah kumpulan desain karakter dengan satu set lengkap huruf, angka, simbol, karakter khusus dan lebarnya.

Font

font

Font merupakan file komputer yang sebenarnya berisi informasi tentang tulisan yang digunakan, seperti jenis font, lebar font, gaya dan sebagainya.

Garis belakang

baseline

Garis belakang atau baseline merupakan garis dimana huruf beristirahat dan memperpanjang descender.

Cap height

cap-height

Cap height adalah tinggi huruf kapital diatas baseline.

X-height

x-height

Juga dikenal sebagai ukuran corpus. X-height ini untuk jarak antara baseline dan garis tengah (setengah jarak dari baseline ke cap height).

Descender

descenders

Descender adalah bagian huruf yang memanjang dibawah baseline.

Tracking

Juga dikenal sebagai spasi huruf. Traking adalah peningkatan atau penurunan ruang antara seragam huruf.

Kerning

Proses menyesuaikan ruang antara karakter individu dalam glyph dari berbagai width.

Leading

Juga dikenal sebagai tinggi baris di CSS. Jarak antara garis pangkal dari garis berurutan atau jenisnya.

Poin yang Pertimbangkan di Web Tipografi

Kata, frasa dan kalimat memiliki makna tetapi masing-masing karakter dapat memiliki emosi. Selain menjadi responsif, Anda juga harus mempertimbangkan kehadiran tipografi web yang lebih baik untuk audiens Anda.

Desain lengkap tidak akan baik jika audiens Anda tidak mengerti atau tidak tertarik dengan konten Anda. Di web tipografi ada empat elemen dasar :

  • Type
  • Color
  • Texture
  • Image

Semua ini akan memiliki efek besar untuk hasil akhir tipografi Anda, tetapi type akan memperbesar ekspresi dari pesan Anda.

Ada lima faktor yang dapat membantu Anda membuat web tipografi rapih :

1.Pilih jenis huruf terbaik yang sesuai dengan topik Anda

Sebagian besar situs web saat ini adalah menggunakan tipografi yang sama. Ya, Anda menebak dengan benar; kita berbicara tentang Arial dan Helvetica. Namun, hal itu akan membuat banyak pengertian jika Anda bisa menyelaraskan tipografi dengan pesan Anda.

Misalnya, halaman web Anda membahas tentang buku anak-anak akan lebih baik jika Anda menggunakan seperti DK Crayon Crumble atau Little Miss Priss dalam teks header?

Kami tidak menyarankan Anda perlu melakukan ini setiap waktu tapi intinya adalah memastikan bahwa tipografi sejalan dengan target audiens Anda serta teks jelas dan mudah dibaca.

2. Gunakan web font

Salah satu peningkatan terbesar dari desain web saat ini adalah dukungan untuk font web di semua browser modern melalui perintah @import dan tag link yang standar.

Lihat demo dibawah ini

Menggunakan tag @import :

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Menggunakan tag link standar :

<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>

Ini berarti Anda dapat menggunakan font yang tersedia di situs font host web seperti Google Font, Typekit dan Fontdeck. Berikut adalah berbagai keuntungan menggunakan font web :

  • Menghemat uang. Anda tidak perlu membeli font online
  • Menghemat waktu. Meskipun Anda dapat mengintegrasikan font secara manual dalam file folder Anda, menggunakan font web dapat dilakukan dengan baris kode
  • Mereka kompatibel pada semua versi baru dari web browser dan SEO-friendly.

3. Gunakan kombinasi warna yang tepat

Salah satu isu utama web desaigner berkomitmen saat ini adalah membuang kombinasi warna yang tidak perlu ke situs mereka. Ingat desain web yang baik dapat diidentifikasi oleh seberapa baik fungsi situs dan seberapa baik desain.

Berbicara tentang desain, Anda tidak hanya desain halaman web Anda secara random dan melemparkan banyak warna yang tidak bercampur terutama dengan teks dan backgrond situs Anda. Ini akan membuat teks tidak terbaca dan akan membuat rasa sakit untuk mata pengunjung website Anda.

Tapi bagaimana Anda menggunakan kombinasi warna yang tepat? Sementara tidak ada aturan umum, tapi ada beberapa pedoman :

  • Gunakan kontras yang tepat atau membedakan warna antara teks dan background seperti yang disarankan oleh W3C. Warna yang memiliki nilai yang sama namun rona warna yang berbeda dapat dibaca dengan mudah oleh orang dengan visi yang baik tetapi tidak pada warna orang tunanetra. Hal ini penting untuk memeriksa kontras sebelum menerapkannya pada desain Anda. Anda dapat menggunakan tool ini untuk mensimulasikan kontras.
  • Gunakan warna UI flat jika memungkinkan. Warna-warna ini ringan dan memiliki kombinasi besar yang tidak menyakitkan untuk mata. Cek flatuicolors.com untuk informasi lebih lanjut, berdasarkan UI flat.

4. Menggunakan teks bukan gambar

Seperti yang kita semua tahu bahwa gambar membuat halaman web lebih lambat. Paling sering gambar satu-satunya cara untuk memaksa browser web untuk menampilkan font yang disukai dan layout yang tepat sesuai keinginan Anda. Namun ini mungkin tidak bekerja. Menggunakan teks yang sebenarnya adalah cara terbaik untuk menjalankannya terutama dengan desain web responsif. Ingat, mesin pencari tidak dapat membaca gambar tetapi mereka dapat membaca teks.

5. Menggunakan gaya teks mundur ketika klipping teks

Mungkin ada suatu waktu dimana Anda perlu untuk klip teks pada gambar untuk membuat tekstur atau gambar teks. Masalahnya disini adalah bahwa tidak semua browser mendukung teknik ini.

Cara terbaik untuk melakukannya adalah dengan menggunakan plugin Paul Irish’s CSS Browser Selector. Ini adalah plugin ringan yang mendeteksi browser dan memanipulasi style yang ingin ditampilkan pada browser tertentu. Berikut ini adalah cara menggunakan plugin keren ini :

  • Download plugin disini dan kemudian menghubungkannya dengan bagian header Anda :
  • Atur atribut CSS (baik id atau class) dengan kode masing-masing browser yang ingin Anda ubah secara khusus pada stylesheet Anda.

Untuk informasi lebih lanjut tentang plugin keren ini cek situs ini.

Peraturan Dasar Responsif Tipografi

Sebagian besar elemen tipografi fundamental dapat dimanipulasi dengan CSS. Namun, sebenarnya lebih dari sekedar mengadaptasi atau mengoptimalkan ukuran teks pada setiap viewport. Sekarang kita sudah membahas bagaimana Anda dapat mencapai web tipografi rapih. Sekarang saatnya untuk berbicara tentang aturan dasar yang dapat kita terapkan untuk mencapai tipografi responsif lebih baik.

1.Gunakan rem bukan pixel atau ems

Penggunaan kedua pixel dan ems telah populer. Sementara pixel tetap, ems relatif terhadap elemen induk. Ini berarti ketika Anda mengubah ukuran browser sulit untuk mencari tahu ukuran yang Anda butuhkan untuk mengatur agar mencapai output yang ingin dicapai.

Sebuah pilihan yang lebih baik adalah menggunakan rem. Rem atau juga dikenal sebagai “root em” selalu sama dengan ukuran font dari elemen root HTML  dan apa yang lebih menarik dengan ini bahwa hal ini didukung oleh browser modern.

html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 1.9rem // 19px
}
h2{
   font-size: 1.8rem // 18px
}

Dalam contoh ini kita mendefinisikan basis ukuran font 16px yang merupakan referensi dari ukuran font dari elemen lainnya. Ukuran h1 dan h2 akan berubah karena perubahan viewport.

Untuk versi Internet Explorer, kita dapat menentukan ukuran font dalam satuan px dan menentukan unit rem bersama dengan itu dan kita dapat memiliki teks resizable pada semua browser.

html{
  font-size: 16px;   // 1rem = 16px
}
 
h1{
  font-size: 19px; font-size: 1.9rem;
}
 
h2{
   font-size: 18px; font-size: 1.8rem;
}

2. Percobaan unit rem pada area pandang yang berbeda.

Sekarang Anda tahu bagaimana menggunakan rem, Anda perlu bereksperimen pada berbagai ukuran layar melalui @media query. Output akan tergantung pada jenis huruf. Anda perlu juga menggunakan ukuran font yang sebenarnya dan melihat apakah Anda akan mendapatkan hasil yang Anda inginkan.

@media (max-width: 640px) {
h1 {
    font-size:1.7rem
}
h2{
    font-size: 1.6rem
}
}
 
@media (min-width: 480) {
h1 {
    font-size:1.9rem
}
h2{
    font-size: 1.8rem
}
}

Perhatikan bahwa pada layar yang lebih kecil ukuran font sedikit lebih besar dibandingkan dengan layar yang lebih luas. Ini akan membuat teks lebih mudah dibaca sebagai pengguna membaca melalui telepon atau tablet.

3. Gunakan CSS3 pseudo-class untuk menentukan style tertentu

Salah satu fitur yang besar dari CSS3 adalah bahwa hal itu dapat menargetkan huruf tertentu, baris atau paragraf dan memberikan gaya yang berbeda. Desainer memberikan kebebasan untuk mengubah ukuran atau menyesuaikan teks pada ukuran yang berbeda.

<iframe width="100%" height="300" src="http://jsfiddle.net/9g298eo1/24/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Seperti yang Anda lihat pada contoh dibawah ini, kita menggunakan berikut CSS3 pseudo-class :

  • first-of-type – memilih anak pertama dari tag paragraf
  • first-line – memilih baris pertama dari tag paragraf
  • first-letter – memilih huruf pertama dari tag paragraf

4. Mengontrol Ukuran Anda

Seperti yang disarankan oleh Robert Bringhurst, ukuran yang paling ideal atau line-length sekitar 45-75 karakter per baris. Untuk desain web responsif, ukuran ini tidak mudah untuk mengontrol terutama pada area pandang yang lebih kecil. Jika Anda tidak dapat mengontrol ukuran, Anda tidak dapat mengontrol keterbacaan teks Anda.

Ada artikel bagus dari Elliot Jay Stocks yang berbicara tentang topik ini tentang cara menggunakan media query untuk mencapai ketinggian garis yang diinginkan dan ukuran.

Menggunakan Plugin

Meskipun ada banyak jQuery plugin yang bisa kita gunakan untuk web tipografi responsif online, yang paling populer adalah FlowType.js. jQuery plugin ini dianggap karakter per baris dan mengatur ukuran font pada panjang garis yang pasti setiap viewport.

Mari kita lihat lebih dekat tentang bagaimana cara kerjanya :

Step 1 : Atur Value Tipografi

Mulai menambahkan CSS konfigurasi dasar untuk FlowType.js.

body {
   font-size: 16px;
   line-height: 20px;
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size: 3em;
   line-height: 1em;
}
 
h2 {
   font-size: 2em;
   line-height: 1em;
}
 
p{
   font-size: 1em;
   line-height: 1em;
}

Nilai-nilai ini akan digunakan oleh FlowType.js dan mengubah setiap nilai-nilai sebagai viewport mengubah ukuran. Menyiapkan ukuran font dan tinggi baris akan memungkinkan Anda untuk mengakses dan mengatur halaman web Anda ketika JavaScript dinonaktifkan.

Step 2 : Link FlowType.js ke bagian header Anda

Download FlowType.js dan memasukannya pada bagian header dokumen HTML Anda.

<script src="flowtype.jQuery.js"></script>

Step 3 : Memanggil FlowType.js

Aktifkan FlowType.js, kita hanya perlu menambahkan kode berikut sebelum tag penutup </body>

<script>
$(function () {
    $('body').flowtype();
});
</script>

Step 4 : sesuaikan pengaturan FlowType.js

Ada beberapa nilai yang FlowType.js memiliki secara default, namun Anda tweak mereka ke pengaturan yang Anda inginkan untuk diatur. Untuk melakukan ini, Anda hanya perlu menyertakan beberapa pilihan lain pada kode jQuery Anda.

$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

Selain flowtype.js ada beberapa plugin jQuery lain yang meungkin bisa membantu untuk membuat web tipografi responsif. Lihatlah plugin jQUery berikut :

  • FitText – sebuah plugin jQuery yang membuat ukuran font teks fleksibel dan judul fluid atau responsif
  • js – Sebuah plugin untuk web tipografi radikal. Ini membantu mengontrol kerning teks dalam hanya baris kode jQuery
  • Responsive Measure – sebuah script sederhana yang memungkinkan Anda untuk membuat langkah-langkah yang ideal untuk teks container ini.

 

Responsif desain menjadi lebih dan lebih maju. Kita mungkin berpikir bahwa gambar, layout dan grid yang penting. Namun, kita tidak boleh bahwa konten atau teks adalah apa yang dibaca oleh orang-orang dan mesin pencari.

Sama seperti menempatkan usaha pada layout dan gambar, Anda juga harus menaruh beberapa upaya bagaimana teks Anda akan muncul. Setelah semua yang paling penting adalah bahwa teks Anda dapat dibaca, dimengerti dan mudah dilihat pada semua viewport.

Comments

comments