Beranda / CSS / Pemrograman / Web

Mengenal CSS Fonts (Tutorial CSS Part 37)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 37: Logo CSS

Mengenal CSS Fonts: Biar Tampilan Website Makin Keren dan Nyaman Dibaca

Kalau kamu pernah lihat dua website dengan isi yang sama tapi satu terasa enak dibaca dan satu lagi bikin mata capek, bisa jadi masalahnya ada di pemilihan font. Di dunia web, font bukan cuma soal gaya—tapi juga kenyamanan dan kesan visual. Nah, di artikel ini kita bakal bahas hal-hal dasar seputar CSS Fonts dengan cara yang simpel dan santai. Yuk mulai!

1. Font Itu Penting!

Font adalah salah satu elemen yang paling sering dilihat pengunjung website. Gaya huruf yang tepat bisa bikin pengunjung betah membaca, sedangkan font yang kurang pas bisa bikin orang langsung close tab.

Contoh:

  • Font tebal dan kotak cocok buat headline.
  • Font ringan dan rapi enak buat isi artikel.
  • Font lucu cocok untuk website anak-anak, tapi nggak cocok buat berita resmi.

Jadi, pilih font jangan asal-asalan, ya!

2. Generic Font Families

Di CSS, kita bisa pakai generic font families sebagai “cadangan” kalau font utama nggak tersedia di perangkat pengguna. Beberapa jenis keluarga font generik yang sering dipakai:

  • serif: punya kait kecil di ujung huruf (contoh: Times New Roman)
  • sans-serif: tanpa kait, lebih bersih dan modern (contoh: Arial)
  • monospace: semua huruf punya lebar yang sama (contoh: Courier New)
  • cursive: mirip tulisan tangan
  • fantasy: bergaya artistik dan dekoratif

Biasanya kita tulis beberapa font sekaligus, lalu tutup dengan generic font, misalnya: 

font-family: 'Roboto', 'Arial', sans-serif;

Contoh HTML + CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Font Family</title>
  <style>
    body {
      font-family: 'Roboto', 'Arial', sans-serif;
      background-color: #f4f4f4;
      padding: 20px;
    }

    h1 {
      font-size: 28px;
    }

    p {
      font-size: 16px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Contoh Penggunaan Font Roboto</h1>
  <p>
    Ini adalah contoh paragraf yang menggunakan font-family: 'Roboto', 'Arial', sans-serif.
    Jika 'Roboto' tidak tersedia, browser akan menggunakan 'Arial', lalu sans-serif sebagai cadangan.
  </p>
</body>
</html>

Hasilnya:

Contoh CSS Font Family
Gambar 37.1 : Contoh CSS Font Family

3. Perbedaan Serif vs Sans-serif

Nah, ini penting juga nih buat dipahami:

Perbedaan Serif dan Sans-serif
Gambar 37.2: Perbedaan Huruf Serif dan Sans-serif

  • Serif
    Hurufnya punya "ekor" atau hiasan kecil di ujung. Terlihat klasik dan sering dipakai di koran atau buku cetak.
    Cocok buat: artikel panjang, teks cetak, tampilan serius.

  • Sans-serif
    Gaya huruf bersih tanpa ekor. Lebih modern, simpel, dan enak dibaca di layar.
    Cocok buat: tampilan digital, UI/UX, desain minimalis.

Intinya, kalau mau tampil lebih profesional dan tradisional, pakai serif. Kalau mau kesan modern dan simpel, pakai sans-serif.

4. Contoh Beberapa Font

Berikut ini contoh beberapa font yang sering dipakai di web:

Nama Font Gaya Termasuk
Times New Roman Klasik Serif
Arial Modern Sans-serif
Georgia Elegan Serif
Verdana Ringan Sans-serif
Courier New Mesin tik Monospace
Comic Sans MS Lucu/casual Cursive

Kamu bisa mix and match sesuai gaya website kamu.

5. Properti font-family di CSS

Nah ini dia properti utama yang dipakai untuk mengatur font di CSS:

selector {
  font-family: 'Font Utama', 'Cadangan', generic-family;
}

Contoh:

body {
  font-family: 'Open Sans', 'Helvetica', sans-serif;
}

Penjelasan:

  • ‘Open Sans’ akan dipakai kalau tersedia.
  • Kalau nggak ada, lanjut ke ‘Helvetica’.
  • Kalau dua-duanya nggak ada, browser pakai sans-serif default.

Contoh HTML + CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Font Open Sans</title>
  <style>
    body {
      font-family: 'Open Sans', 'Helvetica', sans-serif;
      background-color: #ffffff;
      padding: 30px;
    }

    h2 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
      color: #333;
    }
  </style>
</head>
<body>
  <h2>Font Open Sans</h2>
  <p>
    Ini adalah contoh penggunaan properti <code>font-family</code> dengan Open Sans sebagai pilihan utama,
    lalu Helvetica dan sans-serif sebagai alternatif.
  </p>
</body>
</html>

Hasilnya:

Contoh CSS Font Family
Gambar 37.3: Contoh CSS Font Family

Penutup

Gaya huruf itu bisa bikin website kamu terlihat lebih profesional dan nyaman dibaca. Dengan mengenal berbagai jenis font dan cara pakainya di CSS, kamu bisa mulai mengatur tampilan teks sesuai kebutuhan dan karakter websitemu.

Selamat ngoprek CSS! 😄

Posting Komentar untuk "Mengenal CSS Fonts (Tutorial CSS Part 37)"