Typography CSS: Menguasai Pengaturan Teks di Web
Apa Itu Typography dalam Web?
Typography berasal dari bahasa Yunani yang berarti "penulisan dengan huruf". Dalam konteks web, typography mengacu pada pengaturan teks agar mudah dibaca, enak dipandang, dan mendukung pesan yang ingin disampaikan.
Dengan typography yang baik:
- Konten menjadi lebih mudah dibaca.
- Hierarki informasi jelas.
- Keselarasan visual meningkat.
- Pengalaman pengguna (UX) menjadi lebih baik.
CSS menyediakan banyak properti untuk mengontrol tampilan teks, mulai dari jenis font, ukuran, warna, hingga spasi antar huruf dan baris.
1. Memilih Jenis Font (font-family)
Properti font-family digunakan untuk menentukan jenis font teks.
Contoh:
p {
font-family: Arial, sans-serif;
}
Jika font pertama tidak tersedia di perangkat pengguna, browser akan mencoba font berikutnya dalam daftar.
Font umum dalam CSS:
- Sans-serif: Arial, Helvetica, Verdana
- Serif: Georgia, Times New Roman
- Monospace: Courier New, Consolas
- Google Fonts: Roboto, Open Sans, Lato (harus dimuat terlebih dahulu)
💡 Selalu tambahkan generic family seperti sans-serif, serif, atau monospace sebagai fallback.
2. Ukuran Font (font-size)
Properti font-size mengatur besar teks. Bisa menggunakan satuan seperti px, em, rem, %, atau vw.
Contoh:
h1 {
font-size: 24px;
}
p {
font-size: 1rem; /* relatif terhadap root */
}
Perbedaan Satuan:
| Satuan | Keterangan |
|---|---|
| px | Tetap, tidak responsif |
| em | Relatif terhadap elemen induk |
| rem | Relatif terhadap ukuran font root (html) |
| % | Persentase dari ukuran default browser |
| vw | Persentase lebar viewport |
3. Gaya Font (font-style, font-weight)
a. font-style
Untuk mengatur gaya teks seperti miring (italic).
Contoh:
.teks-miring {
font-style: italic;
}
b. font-weight
Mengatur ketebalan teks. Nilai umum: normal, bold, bolder, lighter, atau angka seperti 400, 700.
Contoh:
.tebal {
font-weight: 700;
}
4. Mengatur Spasi Teks (letter-spacing, word-spacing)
a. letter-spacing – Jarak antar huruf
.jarak-huruf {
letter-spacing: 2px;
}
b. word-spacing – Jarak antar kata
.jarak-kata {
word-spacing: 5px;
}
5. Tinggi Baris (line-height)
Properti line-height mengatur tinggi baris teks, berguna untuk meningkatkan keterbacaan.
Contoh:
.paragraf {
line-height: 1.6;
}
💡 Umumnya nilai antara 1.4 hingga 1.6 bagus untuk paragraf panjang.
6. Mengatur Rata Teks (text-align)
Properti text-align digunakan untuk meratakan teks secara horizontal.
Contoh:
.teks-tengah {
text-align: center;
}
Nilai umum:
- left
- right
- center
- justify – rata kiri dan kanan
7. Mengubah Huruf Kapital (text-transform)
Properti text-transform mengatur apakah teks ditampilkan dalam huruf kapital atau kecil.
Contoh:
.huruf-besar {
text-transform: uppercase;
}
Nilai umum:
- uppercase – semua huruf besar
- lowercase – semua huruf kecil
- capitalize – huruf pertama tiap kata besar
8. Garis pada Teks (text-decoration)
Digunakan untuk menambahkan garis pada teks, seperti underline.
Contoh:
.tautan {
text-decoration: underline;
}
Bisa juga untuk menghilangkan garis:
a:hover {
text-decoration: none;
}
9. Mengatur Jenis Font Web Eksternal (Google Fonts)
Kita bisa menggunakan font custom dari layanan seperti Google Fonts. Caranya:
- Pilih font di Google Fonts.
- Salin link <link> ke bagian <head> HTML.
- Gunakan font-family sesuai petunjuk.
Contoh:
<!-- Di head -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
/* Di CSS */
body {
font-family: 'Roboto', sans-serif;
}
Contoh Praktis
HTML
<h1 class="judul">Selamat Datang</h1>
<p class="paragraf">Website kami hadir untuk memberikan informasi terbaik dengan desain yang menarik dan mudah dibaca.</p>
CSS
.judul {
font-family: 'Open Sans', sans-serif;
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
letter-spacing: 1px;
margin-bottom: 20px;
}
.paragraf {
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #34495e;
text-align: justify;
padding: 0 20px;
}
Dengan kode ini, kita berhasil membuat tata letak teks yang mudah dibaca dan estetis.
Kesimpulan
Typography adalah salah satu aspek paling penting dalam pengembangan website. Dengan memahami cara mengatur jenis font, ukuran, spasi, warna, dan gaya teks menggunakan CSS, Anda bisa menciptakan tampilan teks yang profesional, mudah dibaca, dan menarik secara visual.
Selanjutnya, kita akan membahas Background CSS, yaitu teknik styling latar belakang elemen HTML.
💡 Tips Praktis
- Gunakan font yang mudah dibaca untuk teks utama.
- Pastikan kontras warna antara teks dan background cukup tinggi.
- Gunakan line-height dan letter-spacing untuk meningkatkan keterbacaan.
- Manfaatkan Google Fonts untuk variasi gaya teks yang lebih kaya.
