Web safe fonts

CSS system fonts merupakan cara agar konten web terasa seperti bagian dari komputer atau gadget yang kita gunakan. Selain itu membuat halaman web lebih cepat karena font sudah tersedia pada komputer atau gadget.

System font miliki Apple yaitu San Francisco dan milik Microsoft yaitu Segoe didesain untuk mengambil kelebihan sistem operasi dan perangkat keras modern seperti retina display dan dynamic kerning.

CSS system fonts pada Github awalnya menggunakan CSS system fonts sebagai berikut:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
  "Helvetica Neue", Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Namun akhirnya diganti sebagai berikut karena sering mengalami masalah kompatibilitas pada sistem operasi Linux.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Penjelasan masing-masing font:

  • -apple-system dan BlinkMacSystemFont untuk pengguna Safari dan Google Chrome pada macOS dan iOS.
  • Segoe UI untuk seluruh browser pada Windows 7+.
  • Awalnya ada font Roboto untuk Android dan ChromeOS, tapi sepertinya bermasalah pada sistem operasi Linux sehingga dihapus.
  • Helvetica, Arial, sans-serif sebagai fallback jika font-font sebelumnya tidak ketemu.
  • Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol agar dapat render emoji dengan bagus di macOS dan Windows.

Web Safe Fonts

Selain performansi kecepatan lebih baik dibandingkan web fonts seperti Google fonts karena tidak perlu download, tujuan menggunakan system fonts pada CSS adalah agar tampilan konten tampak seperti font yang digunakan pada komputer, laptop, atau gadget yang digunakan.

Namun kekurangannya adalah tampilan bisa tidak konsisten antar perangkat yang digunakan. Pada perangkat Apple halaman web akan menggunakan font San Francisco, sedangkan pada perangkat Windows akan menggunakan font Segoe.

Ada beberapa font yang biasanya selalu ada pada setiap sistem operasi, inilah yang disebut sebagai web safe fonts. Dengan menggunakan web safe fonts, selain mendapatkan kecepatan situs lebih baik dibandingkan web fonts seperti Google fonts, tampilan konten web bisa konsisten pada setiap sistem operasi apapun walau ada kekurangan rendering-nya tidak sebagus system fonts.

Untuk blog KAK Labs ini saya sendiri memilih menggunakan web safe fonts. Berikut font yang termasuk web safe fonts yang saya gabung dari MDN dan MIT.

Font Paling Aman dan Pasti Ada Pada Semua Sistem Operasi

  • Helvetica
  • Arial
  • Times New Roman
  • Times
  • Courier
  • Courier New
  • Georgia

Berikut kombinasinya pada CSS font-family.

/* Helvetica, Arial, Sans-Serif */
font-family: helvetica, arial, sans-serif;

/* Times New Roman, Times, Serif */
font-family: "times new roman", times, serif;

/* Courier, Courier New, Monospace */
font-family: courier, "courier new", monospace;

Font Lain Yang Biasanya Ada Pada Semua Sistem Operasi

  • Palatino
  • Garamond
  • Bookman
  • Avant Garde

Font Lain Biasanya Ada Pada MacOS dan Windows Saja

  • Verdana
  • Comic Sans MS
  • Trebuchet MS
  • Arial Black
  • Impact