Mengatur Font dengan CSS

Mengatur Font dengan CSS

Hai teman-teman! Kali ini kodeviolet.com akan membahas tentang mengatur font dengan CSS, sebuah teknik penting agar tampilan website kalian lebih menarik dan mudah dibaca.

Mengapa Font Itu Penting?

Font bukan hanya soal estetika, tapi juga kenyamanan membaca dan branding. Misalnya, font serif seperti Times New Roman cocok untuk kesan formal, sementara sans-serif seperti Arial memberi kesan modern dan bersih.

Cara Mengatur Font dengan CSS

Untuk mengatur font di CSS, ada beberapa properti yang umum digunakan:

Properti CSS Fungsi Contoh penggunaan
font-family Menentukan jenis huruf font-family: Arial, sans-serif;
font-size Menentukan ukuran huruf font-size: 16px;
font-weight Menentukan ketebalan huruf font-weight: bold;
font-style Menentukan gaya huruf (normal, italic, oblique) font-style: italic;
line-height Menentukan tinggi antar garis teks line-height: 1.5;
letter-spacing Mengatur jarak antar huruf letter-spacing: 1px;
word-spacing Mengatur jarak antar kata word-spacing: 3px;
text-transform Mengubah huruf menjadi kapital, kecil, dll text-transform: uppercase;
text-decoration Memberi garis bawah, atas, coret, atau none text-decoration: underline;
text-align Mengatur perataan teks text-align: center;

Contoh Kode Lengkap

Contoh HTML + CSS Lengkap

Berikut contoh file HTML lengkap yang menggunakan semua properti font yang telah dijelaskan:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Pengaturan Font CSS</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 18px;
      font-weight: 400;
      font-style: normal;
      line-height: 1.6;
      letter-spacing: 0.5px;
      word-spacing: 2px;
      text-transform: none;
      text-decoration: none;
      text-align: justify;
      margin: 40px;
    }
    h1 {
      text-align: center;
      text-transform: uppercase;
    }
    p {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Belajar CSS Font</h1>
  <p>Ini adalah contoh paragraf dengan pengaturan font CSS yang lengkap. Kalian bisa melihat bagaimana font, ukuran, ketebalan, spasi huruf, dan perataan memengaruhi tampilan teks secara keseluruhan.</p>
</body>
</html>

Dengan file HTML ini, kalian bisa langsung melihat hasil pengaturan font dalam sebuah halaman web.

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.5px;
  word-spacing: 2px;
  text-transform: none;
  text-decoration: none;
  text-align: justify;
}

Kode di atas akan memberikan tampilan teks yang modern, bersih, rapi, dan nyaman dibaca untuk paragraf website.

Tips Memilih Font yang Tepat

  • Gunakan maksimal 2–3 jenis font dalam satu halaman.
  • Pastikan font yang dipilih mudah dibaca di berbagai ukuran layar.
  • Gunakan font dari Google Fonts untuk aksesibilitas dan konsistensi.
  • Terapkan fallback font agar tetap tampil konsisten jika font utama gagal dimuat.

Menggunakan Google Fonts

Kalian juga bisa mengimpor font dari Google Fonts. Contoh cara penggunaannya:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
body {
  font-family: 'Roboto', sans-serif;
}

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara mengatur font dengan CSS. Dengan memahami berbagai properti font di CSS, kalian bisa mendesain halaman web yang estetis, rapi, dan profesional. Selamat mencoba dan jangan ragu untuk bereksperimen dengan berbagai gaya huruf!

Posting Komentar