hanifrizal.blogspot.com

RzaaL 1306 | Jasa Desain Template Blogger Murah, Aman, Terpercaya


Typography Untuk Website ?


Typography-Untuk-Website

Setelah saya memposting Dasar Dasar CSS Kali ini saya akan memposting Membuat Typography Untuk Website, Semoga Berguna. Selamat Membaca :D

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 Dan 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.


Sponsor

DMCA.com

Artikel Terkait

28 Comment at " Typography Untuk Website "

  1. wihh mantaps nih gan :D ane masih make googlefont soalnya lebih easy loading :D

    BalasHapus
  2. wow..,keren mas..
    dapet ilmu lagi nih
    thanks
    Go on!!!

    BalasHapus
  3. hadew.... udah baca dari awal sampai akhir masih ga ngerti!

    memang CSS ni susah bgt.... #bagi ane

    BalasHapus
  4. ttg font dalam penggunaan tipo yaa...

    BalasHapus
  5. Siiip
    ane masih pake yang di googlefont
    xixix :D

    BalasHapus
  6. @randy yang penting shareiya mas saya juga biasanya dari situ :D

    BalasHapus
  7. @TORAYASURABAYApadahal masih banyak yg bagus selain di googlefont

    BalasHapus
  8. Hmm mantaps.
    cuma kok sampe ke samping banget ya postnya.???

    BalasHapus
  9. @Fahmi Setiawankesamping gimana mas ? disini ditengah ?

    BalasHapus
  10. waaah... typogarfi ini emang penting banget dalam pemilihan huruf yang serasi dengan tema postingannya... MANTAAAAFFF BANGEEET!!

    Kalo Ayas siy bisanya cuma pakek Googlefont aja.
    pake format <link ato pake @import gitu...
    Kalo pake @font-face, Ayas masih kagak bisa Sob!!
    Gak ngerti bikinnya, mesti sering eror gak muncul hurufnya tuh!!
    Ck.. CK... CK....

    BalasHapus
  11. makasih ya kawan.... udah memberikan penjalasan yang sedetail ini..... jadi faham nih....

    oya...sobat gmana cara buat kotak komentar seperti ente nih... bukan di bawah...

    BalasHapus
  12. @bagi bagio sebenarnya sih kalo font face bisa diambil dari dalem linknya

    BalasHapus
  13. @Ehwansah Jailani ya tinggal dipindahin keatas mas :D

    BalasHapus
  14. Manteb nih tema blognya..isinya juga keren
    bagi2 ilmu dong..

    BalasHapus

website passionately designed and developed by Hanif Rizal .
© 2011 - 2013 RzaaL 1306 | powered by Blogger