CSS Font

CSS Font adalah bagian dari CSS yang digunakan untuk mengatur tampilan teks pada halaman web. Dengan CSS Font, kita dapat mengatur jenis font, ukuran, gaya, dan efek lainnya untuk meningkatkan estetika serta keterbacaan teks. Berikut ini adalah penjelasan dasar mengenai berbagai properti font di CSS beserta contoh penggunaannya.

1. Properti font-family

Properti font-family berfungsi untuk menentukan jenis font yang akan digunakan pada elemen teks. Saat mendefinisikan font-family, sebaiknya kita menambahkan beberapa opsi font cadangan sebagai antisipasi jika font utama tidak tersedia di perangkat pengguna.

font-family: "Nama Font Utama", "Font Cadangan", generic-family;

Contoh:

h1 {
    font-family: "Arial", "Helvetica", sans-serif;
}

2. Properti font-size

font-size digunakan untuk mengatur ukuran font. Satuan yang umum digunakan adalah px (piksel), em (relatif terhadap font parent), dan % (relatif terhadap ukuran default).

font-size: ukuran;

Contoh:

p {
    font-size: 16px;
}

3. Properti font-weight

font-weight berfungsi untuk mengatur ketebalan teks. Nilainya bisa berupa kata kunci seperti normal, bold, atau angka seperti 100, 400, 700, di mana 400 adalah normal dan 700 adalah bold.

font-weight: nilai;

Contoh:

h2 {
    font-weight: bold;
}

4. Properti font-style

font-style digunakan untuk mengatur gaya font, seperti normal, italic, atau oblique. Gaya italic dan oblique memberikan kemiringan pada teks.

font-style: nilai;

Contoh:

em {
    font-style: italic;
}

5. Properti line-height

line-height mengatur tinggi baris pada teks, yang berguna untuk mengatur spasi vertikal antara baris teks, terutama pada paragraf.

line-height: nilai;

Contoh:

p {
    line-height: 1.5;
}

6. Properti letter-spacing

letter-spacing berfungsi untuk mengatur jarak antar karakter pada teks. Dengan mengatur jarak antar karakter, kita bisa membuat teks lebih rapi atau mendapatkan efek khusus.

letter-spacing: nilai;

Contoh:

h3 {
    letter-spacing: 2px;
}

7. Properti text-transform

text-transform digunakan untuk mengatur kapitalisasi teks. Properti ini memiliki beberapa nilai, seperti uppercase (huruf besar semua), lowercase (huruf kecil semua), dan capitalize (huruf pertama setiap kata besar).

text-transform: nilai;

Contoh:

h4 {
    text-transform: uppercase;
}

8. Properti font-variant

font-variant digunakan untuk membuat teks tampil dalam small-caps, yaitu karakter kapital kecil yang ukurannya lebih kecil dari kapital biasa. Nilainya adalah normal atau small-caps.

font-variant: nilai;

Contoh:

p.intro {
    font-variant: small-caps;
}

9. Properti Shorthand font

Kita dapat menuliskan beberapa properti font sekaligus dengan menggunakan properti shorthand font. Properti yang bisa dimasukkan adalah font-style, font-weight, font-size, line-height, dan font-family.

font: style weight size/line-height family;

Contoh:

p {
    font: italic bold 16px/1.5 "Times New Roman", serif;
}

Contoh Keseluruhan Penggunaan Font di CSS

Berikut ini adalah contoh kode CSS yang mengatur berbagai properti font pada elemen HTML:

body {
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

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

p {
    font-style: italic;
    font-variant: small-caps;
}

Kesimpulan

Properti font dalam CSS adalah salah satu elemen dasar yang penting untuk memperindah tampilan teks di halaman web. Dengan memahami dan memanfaatkan properti seperti font-family, font-size, font-weight, dan lainnya, kita dapat membuat halaman web yang estetis serta mudah dibaca oleh pengguna.