Memilih dan mengelola font (jenis huruf) yang tepat adalah salah satu aspek terpenting dalam desain web. Font tidak hanya memengaruhi estetika situs, tetapi juga keterbacaan dan pengalaman pengguna secara keseluruhan. Dengan CSS, Anda memiliki kontrol penuh untuk menyesuaikan font agar sesuai dengan gaya dan tujuan website Anda.
Properti Utama untuk Mengatur Font
Ada beberapa properti CSS yang secara khusus dirancang untuk mengatur tampilan font. Berikut adalah properti-properti yang paling sering digunakan:
1. font-family
Properti font-family menentukan jenis huruf yang akan digunakan. Anda bisa menentukan satu jenis huruf atau daftar beberapa jenis huruf sebagai “fallback” (cadangan). Browser akan mencoba jenis huruf pertama; jika tidak tersedia, browser akan mencoba yang berikutnya, dan seterusnya.
body {
font-family: 'Open Sans', Arial, sans-serif;
}
Tips: Selalu sertakan jenis huruf umum (generic font family) di akhir daftar, seperti serif, sans-serif, atau monospace, sebagai cadangan terakhir. Hal ini memastikan teks tetap bisa dibaca meskipun jenis huruf yang Anda tentukan tidak tersedia di perangkat pengguna.
2. font-size
Properti font-size digunakan untuk mengatur ukuran teks. Menggunakan satuan relatif seperti em atau rem adalah praktik yang baik karena membuat ukuran teks lebih responsif terhadap perubahan pengaturan browser pengguna.
px: Satuan tetap (absolut) dalam piksel.em: Relatif terhadap ukuran font elemen induk.rem: Relatif terhadap ukuran font elemen root (<html>).%: Relatif terhadap ukuran font elemen induk.
h1 {
font-size: 2.5rem;
}
p {
font-size: 1.2em;
}
3. font-weight
Properti font-weight mengatur ketebalan teks. Nilai yang umum adalah normal dan bold. Beberapa font juga mendukung nilai numerik dari 100 hingga 900 untuk tingkat ketebalan yang lebih spesifik.
h2 {
font-weight: bold;
}
.thin-text {
font-weight: 300;
}
4. font-style
Properti font-style mengatur gaya teks. Nilai yang paling sering digunakan adalah normal dan italic (miring).
em {
font-style: italic;
}
Properti Gabungan: font Shorthand
Anda dapat menggabungkan beberapa properti font menjadi satu baris kode yang lebih ringkas menggunakan properti font shorthand. Properti ini mencakup font-style, font-weight, font-size, dan font-family.
/* Sintaks: font: font-style font-weight font-size/line-height font-family */
p {
font: italic bold 16px/1.5 Arial, sans-serif;
}
Menggunakan font shorthand dapat menghemat waktu penulisan kode dan membuatnya lebih mudah dibaca.
Menggunakan Font Eksternal (@font-face)
Untuk menggunakan font yang tidak tersedia secara default di sistem pengguna (seperti Google Fonts), Anda bisa menggunakan @font-face. Aturan ini memungkinkan Anda untuk memuat file font eksternal.
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/my-custom-font.woff2') format('woff2'),
url('path/to/my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Dengan memahami dan menguasai properti-properti di atas, Anda dapat mengontrol penuh tipografi website Anda, menciptakan tampilan yang menarik dan konsisten.
