Koleksi 14 Font Serif untuk Konten Website Anda

Pada 17 February 2012 → 1081 kali dilihat

Font berjenis serif adalah font dengan ciri khas berupa adanya lekukan di ujung tangkai-tangkainya. Font jenis ini sudah tidak asing lagi bagi mereka yang terbiasa membaca koran maupun mengetik di aplikasi perkantoran (semisal MS Word atau LibreOffice Writer). Kalau masih bingung, tentunya Anda sudah kenal dengan ‘Times New Roman’, bukan? Yups. Itu juga termasuk salah satu font serif.

Sebenarnya cukup banyak pilihan font berjenis serif yang bisa kita gunakan pada konten website, misalnya untuk judul/heading maupun untuk body-text (teks utama selain heading). Di sini saya sengaja mengumpulkan 14 font serif yang bisa Anda gunakan/pilih. Font-font ini tidak perlu dipanggil menggunakan link, sehingga tidak menambah HTTP request. Silakan pilih sesuai selera Anda.

Untuk Anda yang menggunakan sistem operasi Linux, pastikan Anda sudah menginstal koleksi font Microsoft agar Anda bisa melihat demo asli font-font serif yang saya paparkan di bawah ini. Cara mudahnya, Anda tinggal mengopi folder font yang ada di sistem operasi Windows (diutamakan dari Windows 7 dan yang sudah terpasang aplikasi MS Office 2007 atau 2010). Lalu hasil kopian folder font tersebut Anda pastekan ke direktori /usr/share/fonts di Linux Anda.

Berikut ini demo keempatbelas font serif tersebut.

Constantia

Lorem ipsum kolor ijo masuk angin keluar asap. Mengapa bisa masuk angin? Karena si kolor ijo suka makan ubi kayu. Mengapa bisa keluar asap? Soalnya dalam perutnya banyak gas beracun. Gas beracun itu ketika keluar akan berwujud menjadi asap. Nah, nggak nyambung kan? Jangan heran. Ini cuma mantera sakti penyembuh kesurupan. Eh, salah. Ini cuma sembarang teks untuk demo tampilan font Constantia.

Calibri

Century Schoolbook

Book Antiqua

Bitstream Charter

Chaparral Pro

Bookman Old Style

Footlight MT Light

Georgia

Gill Sans MT

Candara

Palatino Linotype

Plantagenet Cherokee

Adobe Garamond Pro

Sedikit catatan dari koleksi font serif di atas:

Tingkat ketebalan masing-masing font bervariasi. Oleh sebab itu, pada ukuran yang sama, bisa saja satu jenis font tampak masih kurang terbaca dengan baik (misalnya terlalu tipis). Solusinya, perbesar ukurannya sampai bisa terbaca dengan baik, terutama jika digunakan untuk body-text atau teks utama di dalam postingan.
Pada satuan ukuran yang sama (dalam satuan px, em, atau %), bisa saja tampilan masing-masing font tidak sama. Maksud saya yaitu pada ukuran besar fisiknya yang tersaji pada peramban web. Begitu pula jarak antar karakternya. Ada yang cenderung rapat, misalnya Calibri.
Tidak semua font di atas terinstal pada komputer pengguna, khususnya font-font dari Windows Vista (seperti Constantia, Calibri, dan Candara). Ini jika komputer pengguna masih menggunakan sistem operasi Windows XP dan tidak juga terinstall Microsoft Word 2007 atau 2010. Begitu pula jika komputer pengguna menggunakan sistem operasi Linux, terutama jika ia tidak menginstal Microsoft TTF corefonts dan juga koleksi font Vista.

Selamat

memilih

mencoba.

Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Daftar Posting Terbaru
Tambah KafeGue di Facebook Ikuti KafeGue di Twitter

Menu Lainnya »» Atas » Beranda » Arsip » Profil » Kontak » Bawah
icon email Langganan KafeGue.com melalui Email
Langganan melalui Pembaca RSS

Posting Terkait :

Di bawah kategori: desain web.
Ditandai dengan: body, font, heading, konten, serif, text, website.

Maaf, karena alasan tertentu, kotak komentar ditutup!

Faisal
Firefox 8.0 | Windows XP

29/02/2012 at 22:53:43

Memang bisa mengurangi loading blog kalo pake font yang aman macam serif ini, tapi saya kadang juga make google font soalnya menarik sih mas walopun nambah beban untuk loading blog, hehehe
onesetia82
Google Chrome 16.0.912.63 | Windows 7

28/02/2012 at 22:53:57

wah keren gan font-nya …
cuma sayangnya tidak bisa terapkan sama wp.com gratisan seperti saya … harus upgrade dulu ya …
salam kenal gan … :)
yang penting share
Firefox 6.0 | Windows XP

22/02/2012 at 13:22:50

widiww banyak juga ya,tambahan ilmu disini nih :D
Dery
Firefox 8.0.1 | Windows 7

20/02/2012 at 11:48:37

mas, bukannya calibri, Gill Sans MT, sama candara tu sans serif ya? hmm..

iskandaria
Google Chrome 17.0.963.56 | GNU/Linux
20/02/2012 at 12:17:55

Dery, hahaha. Bener juga ya. Makasih banyak atas koreksinya Der. Saya nulis ini belum riset dulu sebelumnya. Main feeling aja berdasarkan penglihatan mata saya, soalnya tampilan ketiga font tersebut mirip dengan font serif sih.
Cahya
Opera 11.61 | GNU/Linux

20/02/2012 at 08:46:44

Saya paling sering lihat Calibri di Windows Vista saya :D.

iskandaria
Google Chrome 17.0.963.56 | GNU/Linux
21/02/2012 at 13:20:39

Cahya, oh, maklum saja, itu kan sudah bawaan :)
Izul Chaniago
Firefox 10.0.2 | Windows XP

19/02/2012 at 19:05:11

Saya mau tau donk mas, teknik nya gimana mengelola layout yang berbeda disetiap halaman, seperti ini biasa disebut blogzine kan ya?
Pasti sangat repot ya ketika nulis konten? atau itu sudah disediakan oleh template nya jadi tinggal pilih?

iskandaria
Google Chrome 17.0.963.56 | GNU/Linux
19/02/2012 at 21:19:00

Izul Chaniago, saya pakai trik custom CSS per post aja kok Mas. Link penjelasannya ada di salah satu komentar balasan saya pada postingan sebelumnya yang membahas masalah blogazine. Tapi itu untuk pengguna CMS WordPress. Kalau di CMS lain, saya kurang tahu sih.
Hanif
Firefox 10.0.2 | Windows 7

19/02/2012 at 07:53:56

unik mas, banyak font disini yang bisa saya baca. wah-wah, mantab deh. :)
rismaka EA
Opera Mini 6.5.27452 | Android

18/02/2012 at 07:43:34

waduh mas, saya baca di google reader ga ada bedanya :lol:

atau karena baca lewat ponsel ya?

tp gpp, nanti saya akan baca lagi di PC. Btw trims udh berbagi hal menarik tentang tipografi :)

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:40:50

rismaka EA, saya tunggu laporan selanjutnya mas. Mohon informasikan jika ternyata ada salah satu/sebagian font yang menurut mas Adi tampil tidak sesuai aslinya. Kalau pakai ekstensi Whatfont di Google Chrome sih mudah saja mengeceknya, apakah font tersebut sesuai aslinya atau yang tampil hanya font default sesuai settingan peramban yang kita gunakan.
Sriyono Semarang
Firefox 4.0.1 | Windows 7

17/02/2012 at 16:54:26

Saking Banyaknya malah bingung… :)

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:41:59

Sriyono Semarang, ini belum seberapa sih mas. Sebenarnya masih banyak lagi koleksi font serif lainnya :) Nanti mungkin akan saya bagikan kembali.
die
Firefox 11.0 | Windows 7 x64 Edition

17/02/2012 at 16:19:02

Baru lihat font Bitstream Charter, susunannya terlihat lebih rapi.
Apakah free kalau digunakan di laman mas?

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:26:25

die, masalah lisensi penggunaan, ini yang saya belum begitu paham kalau menyangkut font Pak. Tapi kalau cuma diterapkan/digunakan pada halaman tertentu, menurut saya sih tidak masalah.

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 15:44:35

die, sepertinya Bitstream Charter berbayar Pak. Bisa dilihat pada halaman ini:
http://www.myfonts.com/fonts/bitstream/charter/

Saya malah baru tahu kalau font tersebut berbayar (tidak free). Tapi yang heran, kenapa ya font itu ada di komputer Windows 7 tempat saya mengopinya? Apakah karena bawaan aplikasi berbayar tertentu yang terinstal di komputer itu ya Pak? *bingung*
Padly
BlackBerry 8900 | BlackBerry 8900

17/02/2012 at 15:43:17

Windows7 sudah ada Chaparral Pro ya? Aku make itu buat body-text selain fontin sans…

Tapi tetap aku generated make @font-face agar tampilannya konsisten di berbagai device (tdk termasuk HP) dan OS.

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:29:48

Padly, Chaparral Pro setahu saya memang sudah ada di Windows 7 Mas, soalnya font tersebut juga saya kopi dari folder fonts dari komputer yang menggunakan Windows 7. Tapi saya juga kurang tahu, apakah itu font bawaan dari MS Office atau dari aplikasi lain yang terinstal pada komputer yang menggunakan WIndows 7 tersebut. Nanti biar saya cek lagi soal ini. Yach, masalah font yang agak kurang familiar ya begitu sih (belum tentu bisa dinikmati oleh banyak pengguna/pengunjung karena masalah OS yang berbeda).

Padly
BlackBerry 8900 | BlackBerry 8900
18/02/2012 at 12:48:31

iskandaria, Chaparral pro tuh font berbayar di typekit Mas, aku tertarik menggunakannya setelah melihat Jason Santa Maria dan Mark Boulton menggunakannya, dan setelahnya aku googling, ternyata ada orang baik yg ngasih (Torrent minded). Apakah itu termasuk pembajakan?

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 15:26:21

Padly, wah, berbayar ya ternyata. Saya baru tau Mas. Kalau gitu, bisa dibilang sebagai pembajakan juga sih. Tapi kenapa ya font itu ada di komputer yang menggunakan Windows 7 (salah satu komputer di lab kampus saya sih). Kalau dugaan saya, font itu sudah bawaan dari aplikasi Office 2007. Kalau begitu, apa bisa dibilang sebagai font berbayar ya? Tapi entahlah mas. Bisa jadi itu memang font berbayar yang diinstall secara manual oleh asisten Lab di kampus saya :)

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 15:36:27

Padly, oya, dari hasil googling, ternyata Chaparrol Pro itu dibuat/dikeluarkan oleh Adobe. Kemungkinan font tersebut bawaan dari software-software Adobe yang terinsall di komputer Windows 7 tempat saya mengopinya. Nah, rata-rata software keluaran Adobe kan emang berbayar. Jadi, bisa jadi font tersebut memang berbayar dan sudah langsung dimasukkan dalam paket instalasi software keluaran mereka.

Tapi, kira-kira apakah postingan saya ini (yang memuat demo font berbayar) bermasalah ya? :) Kirain saya semuanya gratisan sih. Nggak riset dulu sebelumnya sih.
Darin
Google Chrome 17.0.963.56 | Windows 7

17/02/2012 at 15:28:32

Saya dulu penggemar Serif. Tapi sekarang pindah ke Arial, karena – menurut saya sih – kesannya lebih profesional.
Btw, saya ngga mengira Font Serif banyak varian-nya ya :D

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:33:39

Darin, saya malah kebalikannya mas. Sebelum praktek blogazine, saya lebih suka font sans serif, terutama Verdana. Lihat saja pada halaman-halaman posting blog ini yang belum/tidak saya kustom tampilannya. Tapi ada juga halaman kustom yang masih saya setting menggunakan font sans serif, misalnya Verdana dan Arial.

Memang, untuk menguatkan kesan formal atau profesional, font sans serif lebih diutamakan. Selain itu, font sans serif juga cenderung lebih mudah terbaca dengan baik pada halaman web, walaupun ukurannya agak kecil. Beda dengan font serif yang mesti kita setting ukurannya dengan pas agar bisa terbaca dengan enak, terutama untuk digunakan pada isi postingan atau teks pada bagian body.
dhenycahyoe
Google Chrome 17.0.963.56 | Windows XP

17/02/2012 at 15:27:34

Hemm… fotn-nya manis2 mas is, saya lebih cenderung menggunakan “Lucida Grande”,”Lucida Sans Unicode”,”Lucida Sans” karena lebih gimana gitu kalau menurut saya sih, tapi font-font diatas mungkin bisa jadi bahan pertimbangan biar gak selalu ngandelin google webfont saja, bisa2 nanti tambah lemot karena terlalu banyak HTTP request, hehehe….

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:36:25

dhenycahyoe, oya mas, kalau saya boleh minta informasinya, apakah semua font serif yang saya demokan di atas sudah tampil sesuai aslinya? Cara mengeceknya, coba gunakan/instal ekstensi Whatfont di Google Chrome yang mas Deny gunakan. Cara menggunakannya mudah saja, tinggal klik icon ekstensi tersebut yang ada di sudut kanan atas browser Chrome, lalu arahkan kursor ke atas font yang ingin kita cek namanya.

Kalau font Lucida, saya belum pernah menggunakannya mas. Kapan-kapan saya coba deh di salah satu postingan nantinya.

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 12:39:02

dhenycahyoe, oya, kalau tampilan salah satu font tidak sesuai aslinya, itu berarti di komputer yang kita gunakan belum terinstal font tersebut. Kalau pas dicek menggunakan ekstensi Whatfont, akan muncul keterangan tooltip berupa “default font” saat kursor kita arahkan ke atas salah satu area font yang kita cek. Keterangan “default font” menandakan bahwa font tersebut belum terinstal pada komputer kita. Jadi yang tampil adalah font default sesuai settingan bawaan/default browser kita.

dhenycahyoe
Google Chrome 17.0.963.56 | Windows XP
18/02/2012 at 14:50:01

iskandaria, Mas is setelah saya cek menggunakan Whatfont hanya Chaparral Pro, Georgia, Palatino Linotype, dan Adobe Garamond Pro yg tampil secara sempurna di laptop saya, yg lain menjadi font default :D

iskandaria
Google Chrome 17.0.963.46 | GNU/Linux
18/02/2012 at 15:18:35

dhenycahyoe, hahaha, berarti sebagian besar demo font serif yang saya tampilkan di atas terlihat sebagai font Times New Roman saja di laptop mas Dheny :) Soalnya Times New Roman adalah font default untuk kategori serif di beberapa browser/peramban ternama (seperti Firefox dan Chrome). Tapi kalau komputernya menggunakan Linux dan belum terinstall Times New Roman, maka yang tampil sebagai font serif default (seingat saya) yaitu Liberations serif.

Wah, kayaknya mas Dheny perlu mengopi folder fonts dari komputer yang menggunakan Windows 7 dan sudah terinstal aplikasi Office 2007 atau 2010. Tinggal buka CMD/run, lalu inputkan perintah fonts, maka akan terbuka isi folder fonts di komputer Windows 7 tersebut. Nah, dari situ, coba buka direktori sebelumnya yang memuat folder fonts, tepatnya direktori C/WINDOWS.

Tinggal kopi aja folder fonts-nya ke lokasi yang sama di Windows XP mas Dheny. Langsung replace aja atau hapus dulu folder fonts yang ada di situ. Kalau mau dikopi ke Linux, bisa lewat terminal atau nautilus ke direktori /usr/share/fonts atau /usr/share/fonts/truetype.

dhenycahyoe
Google Chrome 17.0.963.56 | Windows XP
18/02/2012 at 16:41:03

iskandaria, hahahaha.. emang XP saya masih fres mas is, belum ada program aneh2 kaya office, saya cuma pake XP untuk keperluan localhost saja, karena lebih terbiasa pake notepad++ Okay nanti saya coba dulu copy font dari Laptop adik dan PC saya dirumah, karena sudah ada Office2010 dan Win7, semoga hasilnya Ok :D

iskandaria
Firefox 10.0.1 | Ubuntu
18/02/2012 at 18:38:09

dhenycahyoe, nah, kalau suka utak-atik desain web, kita memang sebaiknya menginstal font yang biasa ada di aplikasi MS Word. Termasuk font baru bawaan Windows Vista, seperti Calibri, Candara, Constantia, Consolas, Corbel, dan beberapa lagi. Font-font tersebut lumayan bagus mas dan saya rasa komputer pengguna Internet sudah banyak yang terinstal font-font tersebut, asalkan di komputernya sudah terinstal aplikasi Office 2007 atau 2010.

Kalau pengguna menggunakan Linux, biasanya yang terinstal hanyalah font-font standar Microsoft, kayak Arial, Verdana, Georgia, Courier New, Tahoma, Trebuchet MS, dan beberapa lagi. Itupun kalau dia pakai distro yang sudah include font-font standar Microsoft tersebut. Atau kalau dia sudah sadar bahwa font-font tersebut harus diinstall untuk kenyamanan menikmati tampilan halaman-halaman web sesuai settingan aslinya (jika ia menggunakan distro Linux yang belum terinstal font-font tersebut).

Masalahnya kan desainer web itu lebih banyak yang menggunakan Windows dan target pengunjungnya juga mayoritas masih menggunakan Windows. Jadi, penggunaan font berbasis Microsoft masih sangat kental dan umumnya desainer web kurang memikirkan pengguna Linux yang belum tentu menginstal font Microsoft di Linux mereka.

dhenycahyoe
Google Chrome 17.0.963.56 | Windows XP
18/02/2012 at 19:14:02

iskandaria, stetelah saya istall semua font dari win7 akhirnya tampilannya sempurna mas is hehehe…

Oh ya mas is gak OOT dikit, tadi saya coba copy langsung font dari win7 ke linux mint saya eh malah terjadi eror malah tampilan semua web baik punya mas is maupun punya saya tulisannya gak ada, padahal saya sudah masuk root dan copy langsung lewat explore linux mint dan saya taruh di /usr/share/fonts/truetype , itu kenapa ya? ya jadinya saya uninstal saja, soalnya gak pernah install font windows di linux, hehehe….

dhenycahyoe
Chromium 18.0.997.0 | Ubuntu 11.10
18/02/2012 at 19:28:47

dhenycahyoe, Sebelum-nya maaf mas is, sudah bisa teratasi untuk font di linux, ternyata saya tadi lupa belum merubah chmod pada font menjadi 644, dan sekarang berhasil, hehehe.. :D

iskandaria
Google Chrome 17.0.963.56 | GNU/Linux
18/02/2012 at 22:02:35

dhenycahyoe, oh iya. Saya lupa ngasih tau kalau harus ngubah CHMOD atau permission pada folder/file-file font-nya mas. Maaf juga kalau begitu. Saya juga baru ingat, ternyata saya juga mengubah CHMOD pada font-nya biar bisa ngefek. Okelah kalau begitu. Dijamin tampil sempurna deh font-font serif di atas (di Linux maupun di Windows XP). Tapi kalau masih ada yang berupa keterangan ‘default font’ saat dicek pakai ekstensi Whatfont, tolong kasih tau lagi ya mas. Thx.

KafeGue.com