CSS Web Safe Fonts (Tutorial CSS Part 38)

Gambar 38: Logo CSS

CSS Web Safe Fonts: Panduan Font Aman untuk Tampilan Website yang Konsisten

Ketika kita membuat website, tampilan teks adalah bagian penting yang tidak boleh diabaikan. Nah, salah satu hal penting dalam tampilan teks adalah pemilihan font. Tapi masalahnya, tidak semua font bisa tampil sama di semua perangkat. Di sinilah konsep Web Safe Fonts berperan.

1. Apa Itu Web Safe Fonts?

Web Safe Fonts adalah jenis font yang hampir pasti sudah terpasang di semua sistem operasi — baik Windows, macOS, atau bahkan Linux. Karena itu, saat kita menggunakan font ini di website, tampilannya akan tetap konsisten di berbagai perangkat tanpa perlu pengguna mengunduh font tambahan.

2. Fallback Fonts

Karena tidak semua browser atau sistem operasi punya semua font, kita perlu menyediakan fallback fonts. Misalnya:

font-family: "Arial", "Helvetica", sans-serif;

Kalau Arial nggak tersedia, browser akan coba pakai Helvetica. Kalau masih nggak ada, barulah pakai font generik sans-serif.

Intinya, fallback font itu seperti cadangan — biar tampilan website tetap rapi walau font utama nggak tersedia.

3. Web Safe Fonts Terbaik untuk HTML dan CSS

Berikut daftar font yang dianggap aman dan sering digunakan di web. Kita bagi ke beberapa kategori biar lebih gampang dipahami:

Sans-serif (tanpa kait)

Font ini punya tampilan bersih dan modern.

1. Arial

Font yang sangat populer dan tersedia di hampir semua perangkat. Tampilannya simpel dan mudah dibaca. Cocok untuk paragraf maupun judul.

font-family: "Arial", sans-serif;

2. Verdana

Dirancang khusus untuk tampilan layar. Hurufnya agak lebih lebar, jadi enak dibaca di layar kecil.

font-family: "Verdana", sans-serif;

3. Tahoma

Mirip seperti Verdana, tapi hurufnya lebih rapat. Cocok buat teks dengan ukuran kecil.

font-family: "Tahoma", sans-serif;

4. Trebuchet MS

Punya gaya sedikit lebih unik. Cocok buat kamu yang pengen tampilan modern tapi nggak terlalu standar.

font-family: "Trebuchet MS", sans-serif;

Serif (dengan kait)

Font serif cocok buat tampilan yang lebih formal atau elegan.

1. Times New Roman

Font klasik yang sering dipakai di dokumen resmi atau koran. Banyak dipakai karena sudah familiar di mata pembaca.

font-family: "Times New Roman", serif;

2. Georgia

Alternatif Times New Roman yang lebih lebar dan lebih nyaman dilihat di layar digital.

font-family: "Georgia", serif;

3. Garamond

Font serif bergaya klasik dengan bentuk huruf ramping. Cocok buat tampilan elegan atau vintage.

font-family: "Garamond", serif;

Monospace (lebar huruf sama)

Font monospace biasa dipakai buat kode atau tampilan terminal.

1. Courier New

Font dengan gaya mesin ketik jadul. Cocok buat menampilkan potongan kode atau tampilan retro.

font-family: "Courier New", monospace;

Cursive (gaya tulisan tangan)

Font cursive biasanya digunakan untuk tampilan artistik atau aksen dekoratif.

1. Brush Script MT

Font cursive yang terlihat seperti tulisan tangan dengan kuas. Nggak cocok buat paragraf panjang, tapi bagus untuk judul atau hiasan.

font-family: "Brush Script MT", cursive;

Contoh Kode CSS Sederhana

Berikut contoh penggunaan internal CSS di HTML untuk menerapkan web safe fonts:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Web Safe Fonts</title>
  <style>
    h1 {
      font-family: "Georgia", serif;
    }

    p {
      font-family: "Verdana", sans-serif;
    }

    code {
      font-family: "Courier New", monospace;
    }

    .judul-artistik {
      font-family: "Brush Script MT", cursive;
    }
  </style>
</head>
<body>

  <h1>Selamat Datang di Blog Saya</h1>
  <p>Ini adalah contoh paragraf menggunakan font Verdana. Font ini enak dibaca dan tampil bagus di layar.</p>
  <p>Kode berikut ditulis menggunakan font monospace:</p>
  <code>console.log("Hello, world!");</code>
  <p class="judul-artistik">Tulisan dengan gaya kuas artistik</p>

</body>
</html>

Hasilnya:

Gambar 38.1: Contoh CSS Web Safe Fonts

Penutup

Pemilihan font bisa memengaruhi keseluruhan nuansa website. Dengan menggunakan Web Safe Fonts, kita bisa memastikan tampilan tetap konsisten di berbagai perangkat. Jangan lupa sertakan fallback fonts ya, biar tampilannya tetap aman kalau font utama nggak tersedia.

Selamat mencoba dan happy styling!

filesop.com