Tentu, ini dia artikel lanjutannya.
Selamat datang di tutorial CSS kelima! Setelah kita berhasil mengatur struktur, latar belakang, dan jarak elemen, kini saatnya kita fokus pada salah satu aspek terpenting dalam desain web: tipografi. Teks adalah konten utama di sebagian besar situs web, dan cara kita menatanya akan sangat memengaruhi keterbacaan, suasana, dan pengalaman pengguna secara keseluruhan.
Di tutorial ini, kita akan mempelajari berbagai properti CSS untuk mengontrol tampilan font dan teks, mulai dari jenis huruf, ukuran, hingga perataan. Mari kita buat teks di website kita menjadi lebih indah dan fungsional! ✍️
Properti Fundamental untuk Font
Ini adalah properti dasar yang paling sering Anda gunakan untuk mengontrol karakteristik font.
font-family
Properti ini digunakan untuk menentukan jenis huruf (font) yang akan digunakan. Praktik terbaik adalah menyediakan beberapa nama font sebagai fallback (cadangan). Jika font pertama tidak tersedia di komputer pengguna, browser akan mencoba font kedua, dan seterusnya.
Selalu akhiri daftar dengan generic family (keluarga generik) seperti serif (font berkait seperti Times New Roman), sans-serif (font tanpa kait seperti Arial), atau monospace (font dengan lebar huruf sama seperti Courier).
p {
/* Browser akan mencoba font Poppins, jika tidak ada, coba Helvetica,
jika tidak ada juga, akan digunakan font sans-serif default di sistem. */
font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
font-size
Mengatur ukuran teks. Ada beberapa unit yang bisa digunakan, namun yang paling umum adalah:
px(pixels): Nilai absolut. Ukuran tetap dan tidak terpengaruh oleh elemen lain. Cocok untuk konsistensi.em: Nilai relatif terhadapfont-sizeelemen induknya.rem(root em): Nilai relatif terhadapfont-sizeelemen root (<html>). Ini adalah unit yang paling direkomendasikan saat ini karena memudahkan penyesuaian skala ukuran font di seluruh situs dan baik untuk aksesibilitas.
body {
font-size: 16px; /* Ukuran dasar */
}
h1 {
font-size: 2rem; /* 2 x 16px = 32px */
}
p {
font-size: 1rem; /* 1 x 16px = 16px */
}
font-weight
Mengatur ketebalan atau keberanian huruf. Anda bisa menggunakan kata kunci atau nilai numerik.
- Kata Kunci:
normal(default),bold. - Nilai Numerik:
100hingga900.normalsetara dengan400danboldsetara dengan700. (Ketersediaan ketebalan lain tergantung pada file font yang digunakan).
.teks-penting {
font-weight: bold; /* atau font-weight: 700; */
}
font-style
Mengatur gaya huruf, biasanya untuk membuatnya miring.
normal: Teks normal.italic: Teks miring.oblique: Teks miring (versi “buatan” browser jika font tidak punya versi italic asli).
.kutipan {
font-style: italic;
}
Properti untuk Menata Teks
Properti ini lebih fokus pada penataan paragraf dan dekorasi teks.
color: Mengatur warna teks.text-align: Mengatur perataan teks secara horizontal. Nilainya bisaleft,right,center, ataujustify(rata kanan-kiri).line-height: Mengatur jarak vertikal antar baris teks. Untuk keterbacaan yang baik, disarankan menggunakan nilai tanpa unit (misalnya1.5), yang berarti 1.5 kali dari ukuran font saat ini.text-decoration: Menambah atau menghapus dekorasi pada teks. Paling sering digunakan untuk menghapus garis bawah default pada link. Nilainya bisanone,underline,overline,line-through.
Contoh Penggunaan:
p.artikel {
color: #333333;
text-align: justify;
line-height: 1.6; /* Jarak antar baris adalah 1.6x ukuran font */
}
a {
color: #007BFF;
text-decoration: none; /* Menghapus garis bawah pada link */
}
a:hover {
text-decoration: underline; /* Menampilkan garis bawah saat kursor di atas link */
}
Shorthand font (Cara Cepat)
Sama seperti background dan margin, ada cara cepat untuk menulis beberapa properti font dalam satu baris menggunakan font.
Urutannya harus spesifik:
font: [font-style] [font-weight] [font-size]/[line-height] [font-family];
Penting: font-size dan font-family wajib ada dalam deklarasi shorthand ini.
Contoh Tanpa Shorthand:
.judul-halaman {
font-style: italic;
font-weight: 700;
font-size: 2rem;
line-height: 1.2;
font-family: 'Georgia', serif;
}
Contoh Dengan Shorthand:
.judul-halaman {
font: italic 700 2rem/1.2 'Georgia', serif;
}
Level Up: Menggunakan Web Fonts (Google Fonts) 🚀
Dulu, desainer web terbatas pada “web-safe fonts” (font yang umum terinstall di semua komputer). Sekarang, kita bisa menggunakan Web Fonts untuk menampilkan hampir semua jenis font di website kita. Cara termudah untuk memulainya adalah dengan menggunakan layanan seperti Google Fonts.
Langkah-langkah Menggunakan Google Fonts:
- Kunjungi fonts.google.com.
- Pilih Font: Cari dan pilih font yang Anda sukai (misalnya, ‘Roboto’).
- Pilih Gaya: Pilih ketebalan (
font-weight) yang Anda butuhkan (misalnya, Regular 400 dan Bold 700). - Salin Kode: Google akan menyediakan kode. Ada dua bagian:
- Tag
<link>: Salin tag ini dan tempelkan di dalam<head>file HTML Anda. - Aturan CSS: Salin
font-familyyang diberikan.
- Tag
- Gunakan di CSS: Gunakan nama
font-familytersebut di file CSS Anda.
Contoh di index.html:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
Contoh di style.css:
body {
font-family: 'Roboto', sans-serif;
}
Selesai! Sekarang website Anda akan menampilkan font Roboto, bahkan jika pengunjung tidak memilikinya di komputer mereka.
Tipografi adalah seni sekaligus ilmu. Dengan properti CSS ini, Anda kini memiliki alat yang Anda butuhkan untuk menyajikan konten teks Anda secara efektif dan indah.
Di tutorial berikutnya, kita akan membahas properti display, yang mengontrol bagaimana sebuah elemen berperilaku dan berinteraksi dengan elemen lain di sekitarnya. Sampai jumpa!
