Halo sobat developer! Lagi belajar CSS tapi bingung gimana caranya mengatur font biar tampilan website kamu makin kece? Tenang aja, artikel ini bakal bantu kamu memahami dasar-dasar CSS untuk font, lengkap dengan cara penggunaannya yang mudah dipahami. Yuk, simak sampai habis!
Apa Itu Font dalam CSS?
Font adalah salah satu elemen penting yang bikin tampilan website jadi lebih menarik dan nyaman dibaca. Dengan CSS (Cascading Style Sheets), kamu bisa mengatur jenis font, ukuran, warna, hingga gaya huruf sesuai kebutuhan desainmu.
Properti Font dalam CSS
CSS punya beberapa properti utama buat mengatur font, seperti:
- font-family
Properti ini digunakan buat menentukan jenis font yang mau dipakai. Kamu bisa pakai font bawaan browser atau font dari library seperti Google Fonts.body { font-family: Arial, sans-serif; } - font-size
Mau ukuran teks yang besar atau kecil? Gunakan properti ini. Kamu bisa set ukurannya dengan satuan seperti px, em, rem, atau %.h1 { font-size: 24px; } - font-style
Properti ini dipakai buat mengatur gaya huruf, misalnya miring (italic).p { font-style: italic; } - font-weight
Properti ini mengatur ketebalan huruf, dari ringan (light) sampai tebal (bold).strong { font-weight: bold; } - line-height
Line height ini penting buat ngatur jarak antar baris teks biar lebih rapi dan enak dibaca.p { line-height: 1.5; } - text-align
Kalau mau teks rata kiri, kanan, tengah, atau justify, kamu pakai properti ini.h1 { text-align: center; }
Tips Memilih Font untuk Website
- Prioritaskan Keterbacaan: Pilih font yang gampang dibaca, terutama buat teks panjang.
- Konsisten: Jangan terlalu banyak pakai jenis font yang beda-beda di satu website.
- Gunakan Web Safe Fonts: Pastikan font yang kamu pilih tersedia di kebanyakan perangkat.
- Manfaatkan Google Fonts: Banyak pilihan font keren yang gratis dan mudah dipakai.
Contoh Kode Lengkap
Biar lebih paham, yuk lihat contoh lengkap HTML dan CSS yang mengatur font:
File HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar CSS Font</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Belajar CSS: Font</h1>
</header>
<main>
<p>Ini adalah contoh paragraf dengan font yang sudah diatur. Belajar CSS itu asyik, lho!</p>
<strong>Kalimat ini menggunakan font tebal (bold).</strong>
</main>
</body>
</html>
File CSS (style.css)
/* Mengatur font secara global */
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
}
/* Header */
header h1 {
font-size: 32px;
text-align: center;
color: #555;
}
/* Paragraf */
p {
font-size: 18px;
font-style: italic;
}
/* Teks tebal */
strong {
font-weight: bold;
color: #000;
}
Kesimpulan
Belajar CSS buat ngatur font itu nggak serumit yang kamu bayangin, kok. Dengan memahami properti seperti font-family, font-size, dan lainnya, kamu bisa bikin tampilan teks website jadi lebih menarik dan profesional.
Yuk, coba praktikkan contoh kode di atas di project kamu sendiri! Kalau ada pertanyaan atau pengalaman menarik, jangan lupa share di kolom komentar. Selamat belajar dan semoga sukses!
Komentar