Halo, teman-teman! Apa kabar? Kali ini kita akan belajar tentang font CSS. Font adalah elemen penting dalam desain website karena memengaruhi bagaimana teks terlihat dan terbaca. Dengan memahami properti font di CSS, kamu bisa membuat teks di website lebih menarik dan sesuai dengan gaya yang diinginkan. Yuk, kita bahas dari dasar hingga tuntas!

Properti Font di CSS

CSS menyediakan berbagai properti untuk mengatur tampilan teks. Berikut adalah properti utama yang sering digunakan:

1. font-family
   Properti ini digunakan untuk menentukan jenis font yang akan digunakan. Kamu bisa memilih font yang sudah tersedia di perangkat (web-safe fonts) atau mengimpor font dari sumber eksternal seperti Google Fonts.

   Contoh:

   p {
       font-family: Arial, sans-serif;
   }
   

2. font-size
   Mengatur ukuran font. Kamu bisa menggunakan satuan seperti px, em, %, atau rem.

   Contoh:

   h1 {
       font-size: 24px;
   }
   

3. font-weight
   Digunakan untuk menentukan ketebalan font. Nilainya bisa berupa:

   • normal
   • bold
   • lighter
   • Atau angka seperti 100, 200, hingga 900.

   Contoh:

   strong {
       font-weight: bold;
   }
   

4. font-style
   Mengatur gaya font seperti:

   • normal
   • italic
   • oblique

   Contoh:

   em {
       font-style: italic;
   }
   

5. line-height
   Mengatur jarak antar baris teks. Properti ini sangat penting untuk meningkatkan keterbacaan.

   Contoh:

   p {
       line-height: 1.5;
   }
   

6. letter-spacing
   Mengatur jarak antar huruf.

   Contoh:

   h2 {
       letter-spacing: 2px;
   }
   

7. text-transform
   Mengatur kapitalisasi teks. Nilainya bisa berupa:

   • uppercase (semua huruf besar).
   • lowercase (semua huruf kecil).
   • capitalize (huruf pertama setiap kata besar).

   Contoh:

   h3 {
       text-transform: uppercase;
   }
   

Contoh Kombinasi Properti Font

Berikut adalah contoh penggunaan beberapa properti font secara bersamaan:

body {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1 {
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
}

HTML:

Judul Besar
Ini adalah paragraf dengan teks yang menggunakan font Roboto dan warna teks abu-abu.

Menggunakan Google Fonts

Google Fonts adalah sumber populer untuk mendapatkan font gratis. Berikut cara menggunakannya:

1. Pilih font di Google Fonts
2. Salin link font ke dalam file HTML

3. Gunakan font di CSS

   body {
       font-family: 'Roboto', sans-serif;
   }
   

Tips dan Trik

• Gunakan font yang mudah dibaca untuk teks utama, seperti Arial, Verdana, atau Roboto.
• Hindari menggunakan terlalu banyak jenis font dalam satu halaman, cukup 2-3 saja untuk menjaga konsistensi.
• Selalu cek fallback fonts untuk memastikan teks tetap terlihat meski font utama gagal dimuat.

Sekianlah belajar CSS tentang properti font. Dengan menguasai properti ini, kamu bisa membuat teks di website terlihat lebih profesional dan menarik. Artikel ini sangat berguna sebelum Anda melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di tutorial berikutnya, dan jangan lupa untuk terus berlatih! ?