Memahami Ukuran Teks Dan Font Di CSS

Memahami Ukuran Teks dan Font di CSS

Dalam pengembangan antarmuka web (UI), teks memegang peran yang sangat penting karena menjadi sarana utama penyampaian informasi kepada pengguna. Untuk menciptakan tampilan teks yang konsisten, menarik, dan mudah dibaca di berbagai perangkat, kita perlu memahami bagaimana CSS mengatur ukuran teks dan jenis font.

Artikel ini membahas secara mendalam tentang bagaimana CSS mengontrol ukuran, gaya, dan jenis font dalam desain web modern, termasuk teknik responsif, kombinasi font, serta praktik terbaik.

1. Font Family: Menentukan Gaya Huruf

Properti font-family digunakan untuk menentukan font apa yang akan digunakan pada elemen HTML. Anda bisa menentukan lebih dari satu jenis font sebagai fallback.

Contoh:

body {

  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

}

Kategori Umum Font:

Serif: Times New Roman, Georgia
Sans-serif: Arial, Helvetica, Open Sans
Monospace: Courier New, Consolas
Cursive: Brush Script MT
Fantasy: Papyrus

Gunakan font stack untuk memastikan kompatibilitas lintas perangkat.

2. Ukuran Teks (font-size): Pengaruh, Satuan, dan Responsivitas

Properti font-size menentukan besar kecilnya teks. CSS mendukung berbagai satuan ukuran:

📌 Satuan Ukuran:

Contoh:

html {

  font-size: 16px; /* 1rem = 16px */

}

h1 {

  font-size: 2rem; /* 32px */

}

p {

  font-size: 1em; /* Sama dengan font-size induk */

}

📱 Font Responsif:

@media (max-width: 768px) {

  body {

    font-size: 14px;

  }

}

Gunakan rem untuk konsistensi dan kemudahan skalabilitas.

3. Ketebalan Teks (font-weight)

Properti font-weight mengatur ketebalan karakter.

Nilai Umum:

normal (400)
bold (700)
lighter
bolder
Numerik: 100, 200, ..., 900

Contoh:

h1 {

  font-weight: 700;

}

Tidak semua font mendukung semua nilai numerik. Cek dokumentasi font terlebih dahulu.

4. Gaya Font (font-style)

Untuk mengatur apakah teks ditampilkan miring atau tidak.

Nilai:

normal
italic (miring)
oblique (kemiringan miring)

blockquote {

  font-style: italic;

}

5. Variasi Font (font-variant)

font-variant digunakan untuk efek seperti kapital kecil (small caps).

p.title {

  font-variant: small-caps;

}

6. Properti Gabungan (font)

Properti font adalah shorthand yang menggabungkan beberapa properti sekaligus:

Sintaks:

font: [style] [variant] [weight] [size]/[line-height] [family];

Contoh:

p {

  font: italic small-caps bold 16px/1.5 'Georgia', serif;

}

7. Line Height: Mengatur Jarak Antar Baris

line-height adalah jarak vertikal antar baris dalam teks.

p {

  line-height: 1.6;

}

Tips:

Gunakan angka desimal (1.5, 1.6) agar lebih fleksibel dan responsif.
Hindari satuan mutlak (px) untuk line-height, agar adaptif terhadap font-size.

8. Letter Spacing & Word Spacing

Untuk mengatur jarak antar huruf dan kata:

h2 {

  letter-spacing: 0.05em;

  word-spacing: 0.2em;

}

9. Text Transform

Untuk mengubah huruf besar/kecil secara otomatis:

.uppercase {

  text-transform: uppercase;

}

.lowercase {

  text-transform: lowercase;

}

.capitalize {

  text-transform: capitalize;

}

10. Praktik Terbaik dalam Mengatur Font dan Ukuran Teks

✅ Gunakan font stack dengan fallback (misal: 'Roboto', sans-serif)
✅ Gunakan rem untuk font-size, dan em untuk margin/padding teks
✅ Hindari terlalu banyak jenis font dalam satu halaman (idealnya 2–3 jenis saja)
✅ Pastikan kontras warna teks terhadap latar belakang cukup tinggi (aksesibilitas)
✅ Gunakan sistem tipografi yang konsisten: heading, subheading, body

11. Menggunakan Web Font

Jika ingin menggunakan font dari luar, seperti dari Google Fonts, kamu bisa mengimpornya:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">

<style>

  body {

    font-family: 'Poppins', sans-serif;

  }

</style>

Kesimpulan

Menguasai properti font dan ukuran teks di CSS tidak hanya akan mempercantik tampilan situs, tetapi juga meningkatkan keterbacaan, kenyamanan, dan profesionalisme desain. Memilih font yang tepat, mengatur ukurannya secara responsif, serta memastikan keterbacaan adalah kunci sukses dalam desain UI/UX berbasis teks.

Kalau kamu butuh artikel ini dalam bentuk dokumen Word, PDF, atau ingin disertai ilustrasi dan contoh layout CSS, tinggal beri tahu saja.

# CSS # Tutorial

Postingan

Memahami Ukuran Teks Dan Font Di CSS