Percantik Teks di Website dengan CSS (Font Properties)
Halo teman-teman!
Setelah kemarin kita belajar tentang warna di CSS, kali ini kita akan belajar sesuatu yang tidak kalah serunya, yaitu bagaimana mempercantik tulisan atau teks di halaman website kita dengan CSS.
Kamu tentu pernah melihat tulisan di website yang keren-keren, kan? Ada yang besar, kecil, tebal, tipis, bahkan ada juga yang menggunakan gaya tulisan unik. Nah, semuanya bisa kamu lakukan sendiri loh, dengan CSS!
Mengenal Font dalam CSS
Di CSS, ada banyak cara untuk mengubah tampilan tulisan atau teks. Berikut beberapa hal dasar yang perlu kamu ketahui:
1. Mengubah Ukuran Teks (font-size)
Ketika membuat website, kamu pasti ingin beberapa teks tampil lebih besar, seperti judul, dan beberapa teks lain lebih kecil, seperti isi paragraf. Di CSS, kita pakai yang namanya font-size untuk mengubah ukuran teks.
Contoh penulisannya begini:
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
Kalau kamu tulis seperti itu, judul (h1) akan menjadi lebih besar daripada paragraf (p).
Ukuran dalam Pixel (px) dan Point (pt)
Kamu mungkin penasah nih, apa bedanya px dan pt?
-
Pixel (px): Ini yang paling sering dipakai di website. Ukurannya sangat kecil, sekitar 0,26 mm.
-
Point (pt): Ini sedikit lebih besar dari pixel, sekitar 0,35 mm. Biasanya dipakai dalam dokumen seperti di Microsoft Word.
Misalnya, ukuran font di Word yang sering kamu pakai seperti 12, 14, atau 16, sebenarnya itu pakai satuan point.
Ukuran Relatif: em dan rem
Selain px dan pt, ada ukuran lain yang disebut em dan rem. Ini unik, karena ukurannya tergantung pada ukuran font lainnya.
-
em: Tergantung ukuran teks dari elemen induknya.
-
rem: Tergantung pada ukuran font di elemen paling utama (biasanya elemen HTML).
Contoh pemakaiannya begini:
html {
font-size: 16px; /* ukuran dasar */
}
h2 {
font-size: 2rem; /* 2 kali ukuran dasar = 32px */
}
Kalau ukuran dasar HTML berubah, otomatis h2 juga ikut berubah.
Apa Bedanya em dan rem?
Kalau kamu menggunakan em, ukuran teks akan bergantung pada ukuran elemen induknya. Tapi kalau pakai rem, ukurannya bergantung pada elemen HTML yang paling atas. Jadi, rem biasanya lebih mudah dipakai karena tidak bingung dengan elemen induk lainnya.
Membuat Teks Tebal dengan Font-weight
Nah, kalau kamu ingin tulisan jadi lebih tebal atau tipis, kita gunakan font-weight. Ada beberapa cara untuk menggunakannya:
p {
font-weight: bold; /* teks menjadi tebal */
}
h1 {
font-weight: 900; /* teks menjadi sangat tebal */
}
Nilainya bisa pakai angka dari 100 sampai 900, makin tinggi makin tebal.
Memilih Jenis Huruf dengan Font-family
Pasti kamu pernah lihat ada teks dengan gaya tulisan yang keren seperti di poster atau di majalah online, kan? Di CSS, kamu bisa menentukan gaya tulisan yang ingin kamu gunakan dengan font-family.
Cara Menggunakan Font-family
Kamu bisa memilih jenis huruf seperti Arial, Helvetica, atau Times New Roman. Begini contoh penggunaannya:
h1 {
font-family: "Times New Roman", serif;
}
p {
font-family: Arial, sans-serif;
}
Kenapa ada dua nama? Itu supaya jika font pertama tidak tersedia, browser akan menampilkan font cadangan yang mirip jenisnya.
Jenis Huruf Gratis dari Google Fonts
Kalau kamu ingin menggunakan jenis huruf yang lebih keren lagi, kamu bisa kunjungi fonts.google.com. Di sana ada banyak sekali jenis font keren yang gratis.
Cara pakainya:
-
Pilih font favoritmu di Google Fonts.
-
Salin kode
<link>yang disediakan. -
Tempelkan di bagian
<head>HTML-mu.
Contoh pemakaiannya begini:
<head>
<link href="link-dari-google-font" rel="stylesheet">
</head>
<style>
h1 {
font-family: 'Nama Font', sans-serif;
}
</style>
Sekarang teks kamu bisa tampil keren dengan jenis huruf yang dipilih sendiri!
Merapikan Teks dengan Text-align
Nah, selain ukuran dan jenis huruf, CSS juga bisa mengatur posisi tulisan loh, misalnya kiri, tengah, atau kanan.
Kita gunakan text-align seperti ini:
h1 {
text-align: center; /* teks di tengah */
}
p {
text-align: right; /* teks rata kanan */
}
Kalau ingin kembali ke posisi biasa, pakai left.
Praktik Langsung Yuk!
Coba sekarang kamu buat sendiri contoh sederhana seperti ini di komputer atau laptopmu:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Latihan CSS Font</title>
<style>
html {
font-size: 18px; /* ukuran dasar */
}
h1 {
font-family: 'Arial', sans-serif;
font-size: 2rem; /* dua kali ukuran dasar */
font-weight: 700;
text-align: center;
color: coral;
}
p {
font-family: 'Times New Roman', serif;
font-size: 1rem;
font-weight: normal;
text-align: justify;
color: blue;
}
</style>
</head>
<body>
<h1>Belajar Font di CSS</h1>
<p>
Hari ini aku belajar cara mengubah ukuran, gaya, dan posisi teks menggunakan CSS. Ternyata gampang banget dan seru!
</p>
</body>
</html>
Coba simpan dan buka hasilnya di browser, pasti tampil keren!
Mengapa Penting Mengatur Teks?
Mengatur teks dengan baik sangat penting, karena:
-
Membantu pengunjung nyaman membaca.
-
Tampilan website menjadi lebih menarik.
-
Memudahkan pembaca memahami isi website kamu.
Tips Tambahan dalam Memilih Font
-
Jangan terlalu banyak jenis font dalam satu halaman.
-
Pilih font yang mudah dibaca.
-
Gunakan ukuran font yang cukup besar supaya jelas terbaca.
Sekarang kamu sudah bisa mempercantik tampilan teks dengan CSS. Coba terus berlatih dan bereksperimen dengan berbagai jenis font, ukuran, dan warna yang kamu sukai.
Kalau masih bingung, jangan khawatir. Kamu bisa coba-coba atau tanyakan pada guru atau temanmu.
Semoga artikel ini bermanfaat ya, sampai jumpa di pembahasan seru lainnya!
Selamat belajar!
