CSS, Web Design / Posted 2 years ago / 6 Komentar
Typography-Untuk-Website

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.

MacOS Generic Font

Hasil Render MacOS

Linux Generic Font

Hasil Render Linux

Windows Generic Font

Hasil Render Windows

iPhone Generic Font

Hasil Render iPhone

iPad Generic Font

Hasil Render iPad

Fennec Generic Font

Hasil Render Mozilla Mobile

Android mobile

Hasil Render Android Mobile

Android Tab

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.

Serif w3school

Sans Serif

Monospace w3school

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

table serif compatible

Table sans serif compatble

Table cursive compatible

complete compatible webfont

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 embed font

Linux

windows embed font

Windows

MacOS embed font

MacOS

mobile embed font

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

Tags

cara membuat typography,tulisan psd,sejarah web design,referensi desain web,jenis-jenis font,font,apa yang dimaksud web design,sejarah html5,psd tulisan,apa yang dimaksud dengan web developer,typography,makalah sejarah html,cara pembuatan web design,apa yang dimaksud content dalam website,apa yang dimaksud dengan web design,apa yang dimaksud dengan web designer,sejarah desain web,contoh jenis font,font yang bagus untuk website,makalah typography Tags: , , , , , , , , , ,
cToko Toko Online

Front End Web Developer @fasatechnology. PHP, HTML5, CSS3, JQuery is my current language and also create WordPress Template :)


6 Comments

  1. Posted March 29, 2012 at 3:43 pm | Permalink

    terimakasih atas penjelasannya. biasanya saya membaca refrensi tentang web typography dengan bahasa inggris kurang jelas (maklum saya belum expert masalah english)tapi sekarang sudah jelas karena di jelaskan dengan bahasa indonesia.

    maaf seblumnya karena ini hanya saran/keluhan dari saya sbagai pembaca situs anda.
    menurut saya artikelnya sangat bagus-bagusn dan di jelaskan dengan detail setiap pembahasan. tapi di saat artikelnya puanjang mata saya radak capek harus teliti melihat fontnya ukuran kecil. mungkin admin bisa memperbesar ukuran font supaya
    enak di baca.

    thanks :)

    • Posted April 1, 2012 at 11:35 pm | Permalink

      Mungkin bisa tekan CTRL & + untuk memperbesar :)

  2. Posted March 31, 2012 at 2:00 am | Permalink

    Hmm. Lezat, yang membuat desain itu mahal adalah, compatibilitas pada berbagai browser…

  3. andre
    Posted April 2, 2012 at 1:49 pm | Permalink

    nice share, ane baca dulu gann

    http://cloudservices.co.id
    jasa pembuatan web, company profile dll
    yang membuat perusahaan anda terlihat lebih menarik

  4. Posted April 16, 2012 at 4:37 pm | Permalink

    Mas bro ada tutorial buat border radius/rounded pake pothosop gak??
    kalo ada kasih tau ya, kalo belum ada mohon newbie di buatin tutornya hehe :D

  5. Posted April 20, 2012 at 8:25 pm | Permalink

    Baru tahu pantesan klo web dibuka di Linux fontnya itu-itu aja. Ternyata kompatibilitasnya dikit untuk linux. Kebanyakan fotn proprietary sih…

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign