
Hai teman-teman! Kali ini kodeviolet.com akan membahas tentang mengatur font dengan CSS, sebuah teknik penting agar tampilan website kalian lebih menarik dan mudah dibaca.
Mengapa Font Itu Penting?
Font bukan hanya soal estetika, tapi juga kenyamanan membaca dan branding. Misalnya, font serif seperti Times New Roman cocok untuk kesan formal, sementara sans-serif seperti Arial memberi kesan modern dan bersih.
Cara Mengatur Font dengan CSS
Untuk mengatur font di CSS, ada beberapa properti yang umum digunakan:
Properti CSS | Fungsi | Contoh penggunaan |
---|---|---|
font-family |
Menentukan jenis huruf | font-family: Arial, sans-serif; |
font-size |
Menentukan ukuran huruf | font-size: 16px; |
font-weight |
Menentukan ketebalan huruf | font-weight: bold; |
font-style |
Menentukan gaya huruf (normal, italic, oblique) | font-style: italic; |
line-height |
Menentukan tinggi antar garis teks | line-height: 1.5; |
letter-spacing |
Mengatur jarak antar huruf | letter-spacing: 1px; |
word-spacing |
Mengatur jarak antar kata | word-spacing: 3px; |
text-transform |
Mengubah huruf menjadi kapital, kecil, dll | text-transform: uppercase; |
text-decoration |
Memberi garis bawah, atas, coret, atau none | text-decoration: underline; |
text-align |
Mengatur perataan teks | text-align: center; |
Contoh Kode Lengkap
Contoh HTML + CSS Lengkap
Berikut contoh file HTML lengkap yang menggunakan semua properti font yang telah dijelaskan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Pengaturan Font CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: 0.5px;
word-spacing: 2px;
text-transform: none;
text-decoration: none;
text-align: justify;
margin: 40px;
}
h1 {
text-align: center;
text-transform: uppercase;
}
p {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Belajar CSS Font</h1>
<p>Ini adalah contoh paragraf dengan pengaturan font CSS yang lengkap. Kalian bisa melihat bagaimana font, ukuran, ketebalan, spasi huruf, dan perataan memengaruhi tampilan teks secara keseluruhan.</p>
</body>
</html>
Dengan file HTML ini, kalian bisa langsung melihat hasil pengaturan font dalam sebuah halaman web.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: 0.5px;
word-spacing: 2px;
text-transform: none;
text-decoration: none;
text-align: justify;
}
Kode di atas akan memberikan tampilan teks yang modern, bersih, rapi, dan nyaman dibaca untuk paragraf website.
Tips Memilih Font yang Tepat
- Gunakan maksimal 2–3 jenis font dalam satu halaman.
- Pastikan font yang dipilih mudah dibaca di berbagai ukuran layar.
- Gunakan font dari Google Fonts untuk aksesibilitas dan konsistensi.
- Terapkan fallback font agar tetap tampil konsisten jika font utama gagal dimuat.
Menggunakan Google Fonts
Kalian juga bisa mengimpor font dari Google Fonts. Contoh cara penggunaannya:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}
Kesimpulan
Itulah tadi artikel dari kodeviolet.com tentang cara mengatur font dengan CSS. Dengan memahami berbagai properti font di CSS, kalian bisa mendesain halaman web yang estetis, rapi, dan profesional. Selamat mencoba dan jangan ragu untuk bereksperimen dengan berbagai gaya huruf!