Optimasi Gambar untuk Web

Gambar merupakan pendukung untuk setiap elemen web, mulai dari ilustrasi artikel, gambar pendukung artikel bahkan gambar-gambar yang digunakan dalam desain webnya.

Ada berbagai macam tipe file gambar, seperti jpg, png, dan gif. semuanya memiliki karakteristik dan kualitas yang berbeda, lalu tipe file apa yang cocok digunakan untuk web? disini saya mencoba berbagi tips optimasi gambar untuk web, memilih tipe file yang tepat dan optimasi gambar agar ukurannya lebih kecil namun masih memiliki kualitas yang baik.

Memilih tipe file yang tepat

Seperti yang telah saya sebutkan ada berbagai macam tipe file gambar, diantaranya jpg, png dan gif. Berikut ini saya jelaskan kapan suatu tipe file harus digunakan :

JPEG

Ketika gambar yang ingin anda gunakan dalam web, misalnya dalam artikel atau bahkan elemen pendukung desain web memiliki bermacam-macam warna atau kompleksitas warna yang tinggi contoh sederhananya adalah gambar hasil "jepretan foto" gunakan tipe file JPEG.

Penggunaan tipe file JPEG pada gambar-gambar tersebut sangat mendukung karena file JPEG mampu meyimpan beragam informasi warna/menjaga kualitas gambar meskipun ukuran filenya kecil.

GIF

Ketika gambar memiliki warna sedikit, atau sebagian area didominasi oleh satu warna, maka tipe gambar gif lah yang cocok untuk digunakan. Contoh gambar yang bisa memiliki tipe gif ini adalah logo (logo sederhana), diagram dan lain-lain.

PNG

Tipe file PNG bisa digunakan ketika gambar yang akan anda gunakan memiliki transparansi. Meskipun tipe file GIF bisa memiliki transparansi namun tipe file PNG lebih cocok untuk masalah ini. tipe gif hanya bisa mentransparankan 100%, ketika ada gradasi warna yang memiliki transparansi, tipe file GIF akan memiliki kualitas yang rendah. berbeda dengan tipe PNG.

Contoh diatas adalah contoh transparansi pada shadow. bagian kiri adalah file PNG dan bagian kanan adalah file GIF (dengan transparansi). Transparansi PNG lebih halus (nilai transparans bisa berkisar antara 0 s.d 100%) sedangkan GIF memiliki area transparan 100% (tidak bisa memiliki transparansi misalnya 50%).

Optimasi Tipe File

Dengan menggunakan image editor seperti Photoshop, setiap tipe file gambar, masih bisa dioptimasi agar gambar memiliki ukuran rendah dan ramah akan bandwidth internet namun masih memiliki kualitas yang tinggi.

Optimasi menggunakan Photoshop

Dalam photoshop, setiap Anda ingin menyimpan gambar untuk kebutuhan web, pastikan pilih menu File>Save For Web and Devices.

Atur preset yang disediakan, misalnya ketika Anda ingin menyimpan gambar dengan tipe file JPEG, atur presetnya seperti berikut :

atau anda juga bisa mengatur "Quality"-nya sendiri, perhatikan juga ukuran yang dihasilkan dan kualitas gambarnya.

Untuk mendapatkan transparansi dalam file PNG, pastikan anda memiliki preset PNG-24, jika tidak maka gambar akan memiliki background putih.

Optimasi menggunakan Situs pihak ketiga

Ada beberapa situs yang melayani untuk optimasi gambar-gambar yang akan digunakan dalam web. misalnya smush.it dari yahoo. Kadang gambar yang telah anda optimasi melalui langkah sebelumnya masih bisa dioptimasi kembali oleh smush.it, sehingga file yang dihasilkan lebih kecil namun masih menjaga kualitasnya.

Pada contoh berikut, saya melakukan optimasi untuk file JPEG, dan hasilnya masih bisa dioptimasi sebesar 0.17% dan ukuran gambar berkurang sebesar 38bytes.

Optimasi Gambar melalui HTML

Optimasi melalui HTML berbeda dengan optimasi sebelumnya. Dalam HTML anda bisa membantu mengoptimalkan kecepatan loading gambar, dengan menentukan atribut width dan height pada gambar. Jika anda tidak menentukan kedua atribut tersebut maka ukuran gambar akan dikalkulasikan terlebih dahulu oleh browser/CPU sebelum ditampilkan dan ini cukup memakan waktu ketika gambar memiliki ukuran super :).

<img src="gambar.jpg" alt="Ilustrasi" width="200" height="300">

Jadi pastikan anda menentukan atribut width dan height ini sesuai dengan ukuran gambar.

Jangan meresize melalui atribut width dan height

Jangan sekali-kali meresize/merubah ukuran gambar dengan menentukan atribut width dan height, cara ini akan memperlambat proses loading web. Misalnya anda memiliki gambar dengan ukuran 600px*800px namun anda hanya membutuhkan gambar dengan ukuran 200px*300px dan anda melakukan resizing dengan atribut width dan height :

<img src="gambar.jpg" alt="Ilustrasi" width="200" height="300">

Solusinya adalah, buat file berbeda untuk ukuran yang berbeda, jangan merubah ukuran gambar dengan menggunakan atribut html. Jangan Pernah! :)

Kesimpulan

Penggunaan tipe gambar yang tepat dan cara pemuatan gambar yang tepat (dengan menyertakan atribut width dan height) dapat mempercepat loading web, selain itu gambar yang telah dioptimasi akan memiliki ukuran yang relatif kecil namun memiliki kualitas tinggi. Jika demikian, bukan Anda saja yang senang, pengunjung pun ikut senang karena loading webnya yang cepat :).

Referensi : "HTML and CSS: Design and Build Websites" oleh Jon Duckett

by Rian Ariona berlangganan via e-mail

 

Sang Designer dan Sang Pemikir yang Jenius

Sang Designer dan Sang Pemikir yang Jenius

Waktu terus berjalan, sang designer kita sekarang sudah menjadi profesional dengan pekerjaan nya. Karena dengan kepandaian nya mendesign sebuah web, sekarang dia menjadi tambah pusing lagi dengan order-order yang datang dari sana-sini. Tentu saja sekarang dia harus memikirkan suatu cara yang cepat dan akurat untuk menyelesaikan order-order yang diterima nya.

Anda sebagai sahabat sejatinya, menjadi senang sekaligus prihatin dengan kondisi ini. Sebab hampir setiap hari sang designer kita itu dikejar-kejar oleh pelanggan nya untuk segera menyelesaikan design web nya. Walah-walaaah..., ternyata menjadi profesional itu tidak enak juga yah keluhnya. Apa ada yah suatu program yang dapat mempermudah dalam pendesign-an web ini..?, tanya dia kepada Anda. lalu Anda pun menjawabnya, Pasti ada donk..!, sebab semua orang juga memikirkan bagaimana membuat sesuatu itu menjadi mudah dan cepat..!, kilah Anda dengan semangat.

"Albert Einstein"

Tapi Program apa yang bisa membuat design web ku ini menjadi lebih cepat dan mudah..?, tanya dia lagi. Waaaaah..., untuk saat ini saya tidak tahu tuh..!, tapi pasti ada deh. Uuummmmh..., bagaimana kalau kita tanyakan pada Bang Einstein untuk hal tersebut.?, jawab Anda. Tapi saya malu bertanya pada dia, keluh dia lagi.

"Untuk mendapatkan ilmu jangan malu untuk bertanya pada siapa saja.., walaupun Bang Einstein itu terlihat eksentrik, tetapi dia punya banyak akal dan segudang ilmu yang mungkin bisa menyelesaikan masalah kamu itu..!, jawab Anda dengan antusias. Kamu benar.., Kalau begitu yuk antar saya ke Bang Einstein..!, sambung dia. Maka Anda berdua pun pergi menuju tempat nya Bang Einstein untuk mencari penyelesaian masalah teman sejati Anda itu."

Sesampai nya di tempat Bang Einstein, Anda pun langsung mengungkapkan permasalahan yang dihadapi rekan Anda tersebut. Pada saat itu Bang Einstein berpikir serius tanpa bersuara untuk mencari solusi dari permasalahan tersebut. Tak lama kemudian Bang Einstein berkata. " Untuk memudahkan dalam merancang apapun, diperlukan sebuah template atau wadah yang dapat menampung maksud yang sama. Sehingga template tersebut dapat digunakan lagi dilain waktu tanpa harus membuat lagi maksud yang sama. "

Mendengar penuturan dari Bang Einstein itu Anda berdua masih terlihat bingung mengenai maksud dari solusi yang diberikan Bang Einstein tersebut. Melihat gelagat itu, Bang Einstein pun tersenyum kemudian dia berkata lagi. Saya mengerti bila Kalian berdua bingung apa yang saya ucapkan tadi, Ok lah sekarang saya beri contoh yang mudah mengenai pemikiran saya tersebut. Kalian lihat batu bata yang ada dipinggir rumah ku ini..!, seru dia sambil menunjukan jarinya ke arah samping. Anda berdua pun menoleh ketempat yang ditunjukan oleh Bang Einstein. Dapatkah kalian berdua membuat sebuah batu bata yang sama ukuran nya, tanpa menggunakan cetakan..?, tanya Bang Einstein pada Anda berdua. Dengan kompak Anda berdua menjawab "Tidak bisa..!". Lalu Bang Einstein berkata lagi. Sebenarnya bisa, tetapi tentu saja memerlukan waktu yang lebih lama ketimbang memakai cetakan. Nah.., Cetakan inilah yang membuat pekerjaan membuat batu bata ini jadi cepat. Tapi apa hubungan nya batu bata dengan design web..?, tanya Anda pada Bang Einstein. Bang Einstein tidak menjawab pertanyaan Anda, tetapi dia tersenyum. Kemudian dia berkata lagi. Saya dengar kalian berdua sedang mempelajari design web..!, Anda berdua pun mengangguk seperti burung pelatuk. Sekarang saya bertanya pada Kalian berdua.., bagaimana cara penulisan program HTML untuk membuat huruf berjenis ARIAL yang berukuran 12 dan berwarna merah..?, tanya Bang Einstein sambil mengambil secarik kertas dan sebuah pena, kemudian diserahkan kepada teman Anda yang dari tadi terlihat bengong. Kemudian teman Anda tersebut menuliskan nya pada kertas yang diberikan Bang Einstein. Tulisan nya sebagai berikut :

                                           <font face="arial" size="2" color="red">

Lalu Bang Einstein bertanya lagi pada Anda berdua. Berapa banyak perintah ini Kamu tulis dalam suatu design web..?. Lalu teman Anda itu menjawab, Yah.., banyak dan hampir setiap saat saya menuliskan nya. Bisakah Kamu ringkas perintah itu dengan suatu template..? , tanya Bang Einstein lagi. Teman Anda tersebut cuma menggelengkan kepalanya seperti orang membaca tahlilan dalam ISTIGHOSAH. Bang Einstein tersenyum melihat kelakuan teman Anda tersebut, kemudian dia berkata lagi. Pernahkah kalian mendengar suatu script yang disebut dengan Cascading Style Sheet..?, Anda berdua pun menjawab, "Pernah..!". Sekarang gunakan CSS sebagai template untuk memudahkan Kalian dalam men-design sebuah web, seru Bang Einstein. Lalu Anda berdua pun saling berpandangan dan tertawa gembira atas penuturan Bang Einstein tersebut. Inilah rupanya maksud dari penuturan Bang Einstein semula. Bahwa untuk memudahkan suatu design, maka diperlukan sebuah template, dan dalam design web dengan HTML, CSS itulah salah satu template nya. Setelah paham mengenai penuturan Bang Einstein tersebut, Anda berdua pun pamit dan mengucapkan banyak terima kasih atas pemikiran nya tersebut.

Desain Website Atau Blog Yang Baik

Sebuah website/blog dapat dinilai memiliki desain yang baik apabila memenuhi kriteria penilaian tertentu yang mungkin saja berbeda tergantung dari sudut pandang penilai. Meskipun demikian, secara umum terdapat lima kriteria desain website yang baik yang bisa digunakan sebagai acuan bagi Anda untuk membuat desain website/blog Anda sendiri atau hanya sekedar memperbaiki desain website yang sedang Anda gunakan.

Pengunjung baru sebagai target utama

Tujuan yang digunakan sebagai dasar acuan kriteria-kriteria berikut adalah pengunjung baru dimana tentunya kesan pertama memiliki nilai tersendiri di mata mereka. Biasanya, pada kunjungan kedua dan seterusnya, penilaian akan beralih pada hal lainnya seperti konten website/blog yang bersangkutan. Pentingnya menunjukkan kesan pertama yang menggoda dalam sebuah desain website bisa dianalogikan dengan ketika Anda mencoba menunjukkan kesan pada lawan jenis bahwa Anda adalah sosok yang menawan.

Kriteria Desain Website/blog yang baik

1. Waktu loading yang cepat
   Dari sudut pandang manapun, waktu loading yang cepat harus menjadi perhatian utama. Apabila wesite Anda gagal ditampilkan dengan sempurna dalam waktu beberapa detik, biasanya pengunjung baru enggan berlama-lama menunggu dan memutuskan untuk meninggalkan website/blog Anda. Biasanya ini terjadi pada pengunjung yang berasal dari hasil pencarian dimana mereka membutuhkan informasi yang tepat dan singkat.
2. Tidak memiliki halaman antara
   Halaman antara adalah halaman yang ditampilkan sebelum halaman utama ditampilkan yang biasanya disebut dengan Splash Page atau Intermission. Halaman seperti ini biasanya berisi ucapan selamat datang atau bahkan iklan. Halaman seperti ini sering ditemukan, seringkali hanya berisi logo website/blog dengan tulisan “Click here to Enter Site” di bawahnya. Hal ini sungguh mengganggu bagi pengunjung website Anda.
3. Tidak memuat file multimedia yang terlalu banyak
   Video dan audio adalah konten multimedia yang cukup mengganggu pengunjung dan memang tidak efektif. Biasanya pengunjung akan langsung mengecilkan volume atau bahkan menutup website/blog Anda. Apabila file multimedia memang diperlukan, buat agar file tersebut tidak langsung dijalankan pada saat website dibuka dan tambahkan link untuk mengaktifkan file multimedia tersebut.
   Bentuk lain yang cukup mengganggu adalah gambar animasi, sebisa mungkin tempatkan gambar animasi di luar konten utama website Anda sehingga pengunjung tidak terganggu ketika berusaha membaca konten tersebut.
4. Memberikan pesan, kesan dan tautan yang jelas
   Pengunjung akan segera meninggalkan website/blog Anda jika mereka tidak mendapatkan kejelasan tentang apa yang ditawarkan pada website Anda. Berikanlah informasi yang cukup pada halaman website Anda mengenai isi website tersebut seperti judul yang cukup jelas dibaca dan menginformasikan isi halaman website Anda. Berikan tautan (link) yang menuju halaman-halaman lain pada website Anda.
   Tempatkan tautan ini pada tempat yang mudah dijangkau dan jelas terlihat. Hindari pemuatan tautan yang menuju halaman website yang masih dalam pengembangan. Sebagai alternatif, berikan pesan yang menyebutkan bahwa halaman tersebut akan dapat diakses pada jangka waktu tertentu.
5.  Memiliki desain dengan struktur yang tepat
   Tentukan struktur penempatan konten website seperti header, footer, menu navigasi dan blok iklan. Usahakan struktur tersebut sama pada setiap halaman sehingga pengunjung tidak dibuat bingung dengan misalnya, menu yang berpindah-pindah.

Usahakan agar pemilihan warna, penempatan logo website dan font yang digunakan konsisten pada setiap halaman sehingga pengunjung tidak merasa berpindah ke website lainnya. Jangan pernah menempatkan iklan yang lebih banyak daripada konten Anda karena pengunjung tidak mencari iklan melainkan konten website Anda.
Dengan mengikuti kriteria tersebut, peluang Anda dalam memberikan kepuasan kepada pengunjung akan lebih tersedia. Dapat disimpulkan bahwa desain website yang baik dilihat dari sudut pandang target pengunjung bukanlah sebuah website dengan tampilan mewah nan indah, melainkan sebuah desain terstruktur dan informatif serta memberikan kemudahan pada setiap pengunjung untuk mengeksplorasi website Anda.
Meskipun demikian, sebuah desain website yang baik belum tentu bisa membuat penunjung tetap mengunjungi website Anda. Banyak hal lain yang harus juga dipenuhi seperti konten yang selalu ter-update serta akurasi sebuah artikel yang ditawarkan.

Semoga bermanfaat.

10 Webdesign Inspiration : Ilustrasi Grafis

Kali ini saya akan menunjukkan beberapa showcase webdesign yang bisa jadi beberapa inspirasi untuk memulai pekerjaan kita. Setelah dua showcase sebelumnya, mari kita lihat beberapa inspirasi webdesain dengan tema khusus: grafis dan ilustrasi (berikutnya @belajar_web akan selalu menampilkan showcase dengan topik khusus).
Oke, langsung saya mari kita nikmati beberapa webdesign menarik berikut:

1. Francesco Mugnai

Sebuah portfolio design dengan ilustrasi potret sang pemilik website, dengan tambahan navigasi keyboard

2. Creative Hut

Header dengan ilustrasi dan tipografi yang simple dan eyecatching

3. Kadhaa

Ilustrasi menarik dengan navigasi yang atraktif. two thumb!

4. Gopal-Semma

Website pernikahan yang simple dan ilustratif. Anda juga ingin buat seperti ini untuk pernikahan Anda?

5. Kommigraphics

Time to slideshow!

6. 2 Create Studio

Grafis hand drawn yang indah dengan implementasi parallax yang dinamis

7. AIGA Nebraska The Show 20

Full ilustrasi. Dinamis. Keren!

8. Dear Lament

Siluet kepala gadis cantik ini akan menarik kita untuk mengeksplore website ini hingga ke kedalaman 4705px. It’s sexy silhouette!

9. Me and Oli

Tertarik dengan garmen unik? Check this out!

10. Zizzi Ristorante

Website restoran dengan tampilan yang ilustratif dan dinamis
Ingin membuat website ilustratif juga? Semoga terinspirasi.

Sumber :  http://belajarwebdesign.com

Menyatukan 2 Pikiran (Designer vs Programmer)

Designer adalah designer, designer bukan programmer. Ada hal-hal yang susah dipersatukan antara designer dan programmer. Hal itu adalah idealisme. Designer: membuat website sebaik mungkin menurut pada sudut pandang mereka. Programmer: menerjemahkan hasil design si designer menjadi satu program utuh.

Tidak semua programmer bisa men-design dan sebaliknya sebagian besar designer tidak bisa memrogram. Disaat terjadi masalah, keduanya mempertahankan pendapat masing-masing.

Designer: banyak membuat ornamen-ornamen yang terkadang tidak jelas gunanya apa, walaupun enak dipandang.
 

Programmer: meskipun bisa dibikin, tapi keseringan mereka malas untuk membuatnya satu-persatu.

Designer: bertahan dengan argumennya bahwa dengan banyak ornamen maka website lebih menarik (memang iya).
 

Programmer: menolak pendapat designer karena semakin banyak ornamen makan akan semakin berat loading website-nya.

Designer: terlalu murah untuk memberikan semua layout per page, meskipun bagus dan bisa menjadi variasi.
 

Programmer: ingin menggunakan layout general, jadi tidak perlu banyak-banyak membuat template.

Designer: membuat design yang menurut mereka bagus tanpa memperdulikan feedback-nya pada website itu.
 

Programmer: membuat program yang bisa mendapat feedback yang bagus.

Designer: tidak terlalu tahu bagaimana hasil design mereka nantinya akan seperti apa implementasinya.
 

Programmer: mengerti benar bagaimana implementasi website yang bagus.

Dari kasus-kasus diatas, maka seharusnya designer dan programmer harus sering-sering berkomunikasi. Sering terjadi adalah client akan berekspektasi bahwa website yang mereka dapat akan seperti hasil design. Jika hasil design sudah melalui tahap seleksi mungkin tidak akan menjadi masalah. Namun, jika yang terjadi tanpa ada pemeriksaan terlebih dahulu dan ada sesuatu yang tidak mungkin untuk dilakukan, itulah masalahnya.

Solusi yang tepat untuk masalah-masalah seperti ini adalah membuat sebuah aturan bagi para designer, apa yang boleh dan apa yang tidak. karena lagi-lagi, yang membuat design bisa diterapkan dengan baik di website adalah programmer.

Sumber :  http://belajarwebdesign.com

Typography Untuk Website

Terdengar simpel dan sangat mendasar, tetapi inilah yang sering saya keluhkan. Isu-isu legalitas dan kompatibel atau tidaknya sebuah font untuk ditampilkan dalam sebuah website sangat-sangat membuat saya stres tingkat tinggi. Mungkin terasa hiperbola dari kalimat saya yang terakhir, ya, tapi itulah kenyataannya. Kata kompatibel yang saya maksud adalah tampil sempurnanya sebuah font terhadap semua media (browser, OS, mobile).

Sejarah Singkat

Sedikit cerita tentang Web Typography. Awalnya setiap browser memiliki standar format font masing-masing dari “TrueDoc”, “EOT”, “OTF/TTF”, akhirnya muncul “Web Open Font Format” atau biasa disingkat “WOFF”. Dalam perjalanannya, Web typography banyak mengalami kendala, terutama masalah “Lisensi”. Dengan menyertakan/embed @font-face maka dengan mudah orang akan mendapatkan font tersebut. Hal ini dikarenakan akses menuju font yang dimaksud berupa tautan, dan setiap orang bisa mengakses font tersebut.

Bertolak belakang dengan cara yang mudah tadi, artis typography merasa kuatir dengan cara tersebut. Ini berarti orang akan dengan mudah mendapatkan font mereka secara gratis. Tak perlu saya jelaskan panjang lebar, tentunya kita tahu, mereka juga cari makan. So, we must respect them too. Kita juga harus menyiapkan biaya ekstra untuk lisensi font mereka (untuk yang berbayar). Jika kita ingin dihargai oleh mereka kita juga harus menghargai mereka. Toh sama-sama menguntungkan.

Mungkin saya cukupkan untuk latar belakang dari Web Typography ini, jika ingin membaca lebih lanjut silahkan baca tautan dari referensi yang saya sertakan.

Generic Fonts

Ada 5 generic fonts yang digunakan dalam web. Font tersebut adalah: Sans-Serif, Serif, Monospace, Cursive, dan Fantasy. Kita tidak perlu menambahkan font ekstra untuk kelima font tersebut, karena secara default browser bisa merender font-font tersebut.

Hasil Render MacOS

Hasil Render Linux

Hasil Render Windows

Hasil Render iPhone

Hasil Render iPad

Hasil Render Mozilla Mobile

Hasil Render Android Mobile

Hasil Render Android Tab

Gambar diatas adalah hasil render font dari pelbagai media. Setiap media memiliki generic font masing-masing. Kita para developer dituntut untuk membuat font tersebut tampil identik di setiap media.

Dasar Styling Font

Pada dasarnya, untuk menampilkan sebuah font type untuk sebuah desain situs cukup melampirkan jenis font tersebut ke sebuah elemen HTML. Berikut adalah cara dasarnya

p { font-family: sans-serif;}
.header { font-family: serif;}

Tentu saja jika hanya menyertakan salah satu diantara 5 font dasar, maka sebuah situs akan terlihat monoton. Maka untuk mempercantik desain situs perlu menambahkan font diluar font dasar. Namun, perlu diperhatikan juga kompatibilitas font tersebut, apakah dapat tampil di semua browser dengan identik atau tidak. Jika tidak, harus ada font alternatif yang serupa tapi tak sama untuk tampil identik di semua browser dan segala jenis OS dan media. Berikut contoh dasar menyertakan font yang kita targetkan beserta alternatif fontnya.

p { font-family: helvetica, arial, verdana, sans-serif;}
.header { font-family: “times new roman”, times, georgia, serif;}

Kode css diatas dapat dibaca sebagai berikut

“Tampilkan elemen p menggunakan font helvetica, jika tidak ada gunakan font arial, jika tidak ada gunakan font verdana, jika tidak ada gunakan sans-serif”

“Tampilkan elemen .header menggunakan font times new roman, jika tidak ada gunakan font times, jika tidak ada gunakan font georgia, jika tidak ada gunakan font serif”

Kode diatas hanyalah contoh. Untuk pemula, saya sarankan untuk memperhatikan bentuk font yang akan disertakan berada dalam kelompok mana. Untuk referensi, saya sertakan tabel bentuk font menurut kelompoknya.

Untuk kompatibilitas font berdasarkan dari OS, saya sertakan tabel dibawah.

Tabel-tabel diatas berisi tentang generic font yang didukung oleh OS. Perhatikan dengan seksama font-family yang cocok dengan font yang sesuai dengan desain. Mungkin untuk pengelompokan font, ikuti tabel-tabel sebelumnya.

Embed Font Eksternal

Jika generic font dirasa kurang untuk mempercantik desain situs. Maka kita perlu embed font eksternal. Dalam melakukan embed ini, perhatikan juga tentang “bagaimana format font yang dapat tampil identik disemua browser”. Dengan tetap menyertakan font-family agar jika format font tidak dapat diterima oleh browser, ada alternatif font lain yang dapat ditampilkan (setidaknya bentuk font tidak lari terlalu jauh).

Dasar embed font sangatlah mudah, seperti membuat tautan dalam HTML.

@font-face { font-family: font-sans-serif; src: url(fonts/sans-serif-custom.ttf); font-size: normal; font-weight: normal;}
p { font-family: fontsans-serif, arial, helvetica, sans-serif; }

Dalam melakukan embed font, yang terpenting adalah dimana letak font tersebut, sisanya menyesuaikan. Font family yang terdapat di @font-face adalah alias nama font yang akan kita embed.

Cara paling aman untuk embed font adalah menggunakan pihak ketiga. Sejak saya menjadi front-end web dev, saya hanya tahu 2 situs yang menyediakan layanan ini, mungkin teman-teman ada yang mau menambahkan, saya persilahkan.

www.fontsquirrel.com

www.google.com/webfonts

Berikut saya sertakan hasil render dari masing-masing browser di 3 OS berbeda.

Linux

Windows

MacOS

Mobile

Font yang saya gunakan adalah “Droid” untuk Squirrel font dan “Share” untuk Google font. Khusus untuk Google font, saya bereksperimen untuk menggunakan langsung pada server Google dan font yang saya unduh sendiri dalam format woff.

Untuk Squirrel font dengan tulisan “Font Mix”. Font family ini menggunakan kode sebagai berikut.

@font-face {
font-family: 'DroidSerifRegular';
src: url('droid/DroidSerif-Regular-webfont.eot');
src: url('droid/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('droid/DroidSerif-Regular-webfont.woff') format('woff'),
url('droid/DroidSerif-Regular-webfont.ttf') format('truetype'),
url('droid/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Mungkin cukup sekian artikel tentang webfont kali ini. Semoga bermanfaat

Referensi:

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
http://www.upsdell.com/BrowserNews/res_fonts.htm
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://en.wikipedia.org/wiki/Web_typography

THE HISTORY OF HTML

HTML sudah lama dipakai sejak internet diperkenalkan dan merupakan bahasa standar untuk pembuatan halaman sebuah situs, tahun demi tahun banyak penyempurnaan untuk bahasa HTML hingga sekarang kita mengenal dengan HTML 5.

Berikut sejarah HTML dan perkembangannya :

by Wix. Browse more Technology infographics.