Teks dan Font CSS: Menata Tipografi untuk Web

Hampir semua isi halaman web itu teks, jadi tampilan teks sangat menentukan apakah sebuah situs terasa rapi atau malah amatiran. Tipografi yang bagus justru tidak kelihatan — pembaca tidak sadar dengan tipografinya, yang mereka rasakan cuma “kok halaman ini enak dibaca”. Sebaliknya, tipografi yang buruk langsung terasa: barisnya berdempetan, fontnya kaku, atau teksnya kekecilan dan terlalu pudar.

Kabar baiknya, bikin teks tampil bagus di CSS itu nggak ribet. Cukup beberapa property saja sudah menutup hampir semua kebutuhanmu. Di artikel ini kita bahas satu per satu, plus cara memakai font kustom.

Memilih font: font-family

Property font-family menentukan jenis huruf yang dipakai. Kamu boleh menyebut beberapa font sekaligus, dipisah koma, dan browser akan memakai yang pertama tersedia:

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Daftar seperti ini disebut font stack, dan setiap koma artinya “coba yang ini; kalau nggak ada, lanjut ke berikutnya.” Browser membaca dari kiri ke kanan sampai ketemu font yang memang terpasang di perangkat pengguna. Item paling akhir sebaiknya selalu berupa keluarga generik sebagai cadangan terakhir:

• sans-serif — font bersih tanpa “kaki” kecil di ujung huruf (seperti Arial). Paling umum untuk layar.
• serif — font dengan goresan dekoratif kecil (seperti Times). Sering dipakai untuk bacaan panjang.
• monospace — font yang setiap karakternya sama lebar (seperti Courier). Biasa dipakai untuk menampilkan kode.

Biasakan menutup font stack dengan salah satu generik di atas. Dengan begitu, walaupun semua font bernama tadi gagal dimuat, browser tetap punya pilihan yang masuk akal dari kategori yang tepat.

Ukuran dan ketebalan font

Ada dua property untuk penyesuaian paling dasar. font-size menentukan seberapa besar teksnya:

p {
  font-size: 16px;
}

Ada beberapa satuan yang akan kamu temui di sini. px (piksel) itu sederhana dan nilainya tetap. Tapi kamu juga bakal sering ketemu rem, satuan yang diukur relatif terhadap ukuran font dasar halaman. 1rem sama dengan ukuran font akar (bawaannya 16px), jadi 1.5rem berarti 1,5 kali ukuran itu. Banyak orang memilih rem karena penskalaannya rapi dan ikut menghormati pengaturan ukuran font dari penggunanya sendiri — ini lebih ramah dari sisi aksesibilitas.

font-weight mengatur seberapa tebal teksnya:

h1 {
  font-weight: 700;   /* tebal */
}

p {
  font-weight: 400;   /* normal */
}

Nilai ketebalan bergerak dari 100 (paling tipis) sampai 900 (paling berat), naik per 100. 400 itu normal dan 700 itu tebal, dan kamu juga boleh langsung menulis kata kunci normal atau bold. Tidak semua font menyediakan semua ketebalan, jadi pakai saja yang memang disediakan font pilihanmu.

Line height: rahasia teks yang nyaman dibaca

Nah, ini property yang dampaknya jauh lebih besar daripada dugaan kebanyakan pemula: line-height. Property ini mengatur jarak vertikal antar baris teks. Kalau jaraknya kurang, paragraf jadi terasa sumpek dan bikin mata cepat capek saat dibaca:

p {
  line-height: 1.6;
}

Nilai tanpa satuan seperti 1.6 artinya “1,6 kali ukuran font” — pilihan yang nyaman dan paling sering dipakai untuk teks isi. Line height yang rapat (sekitar 1) cocok buat judul besar, tapi untuk paragraf kamu biasanya butuh nilai di kisaran 1,5–1,7. Cuma satu property, tapi pengaruhnya besar banget untuk bikin teks terasa enak dan ringan dibaca.

Merata dan memberi jarak teks

Ada beberapa property lagi untuk mengatur detail posisi teks di halaman. text-align mengurus perataan horizontal:

h1 {
  text-align: center;
}

Pilihannya ada left (bawaan), right, center, dan justify (meregangkan tiap baris sampai mentok kedua tepi — pakai seperlunya saja, karena bisa memunculkan celah antar kata yang kelihatan janggal).

Beberapa property teks lain yang sering berguna:

.label {
  text-transform: uppercase;   /* MEMBUAT TEKS HURUF BESAR */
  letter-spacing: 1px;         /* jarak antar huruf */
  text-decoration: underline;  /* atau none, untuk menghapus garis bawah tautan */
}

• text-transform mengubah kapitalisasi (uppercase, lowercase, capitalize) tanpa perlu menyentuh HTML-mu sama sekali.
• letter-spacing menambah atau mengurangi jarak antar huruf — sedikit saja sudah bisa bikin judul terasa lebih rapi dan berkelas.
• text-decoration menambah atau menghilangkan garis bawah, paling sering dipakai sebagai text-decoration: none untuk membuang garis bawah bawaan pada tautan.

Memakai web font kustom

Font yang kita pakai sejauh ini termasuk “font sistem” — yaitu font yang sudah terpasang di perangkat pengguna. Tapi kamu nggak harus puas dengan itu saja. Web font memungkinkan kamu memakai hampir semua jenis huruf, caranya dengan menyuruh browser mengunduh fontnya langsung. Cara paling gampang untuk mulai adalah lewat layanan gratis seperti Google Fonts.

Kamu tinggal menempelkan sebuah <link> ke font tersebut di dalam <head> HTML (layanan fontnya sudah menyediakan baris ini untuk kamu salin):

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />

Setelah itu, tinggal panggil font tersebut lewat namanya di CSS, tetap dengan cadangan seperti biasa:

body {
  font-family: "Inter", sans-serif;
}

Sekarang seluruh situsmu memakai Inter, yang otomatis diunduh untuk setiap pengunjung. Begini caranya situs-situs mendapatkan tampilan khas yang konsisten.

Dasar tipografi yang kokoh

Kalau semuanya kita gabungkan, ini sekumpulan style teks yang masuk akal sebagai titik awal untuk hampir semua proyek:

body {
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

Hasilnya, teks isi yang enak dibaca dengan jarak yang nyaman, plus judul yang jelas dan tegas. Dari titik ini kamu tinggal mengutak-atik sesuai selera — tapi karena kamu mulai dari default yang sudah bagus, teksmu langsung enak dibaca sejak baris pertama.

Penutup

Sekarang kamu sudah bisa bikin teks tampak digarap dengan sengaja dan nyaman dibaca:

• font-family menentukan jenis huruf lewat sebuah font stack (daftar dipisah koma yang ditutup generik seperti sans-serif).
• font-size mengatur ukuran (px nilainya tetap; rem ikut skala ukuran dasar dan lebih ramah aksesibilitas).
• font-weight mengatur ketebalan (100–900; 400 normal, 700 tebal).
• line-height (sekitar 1.6 untuk teks isi) jadi kunci utama paragraf yang nyaman dibaca.
• text-align, text-transform, letter-spacing, dan text-decoration mengatur detail perataan dan penataan teks.
• Web font (misalnya Google Fonts lewat sebuah <link>) memungkinkan kamu memakai jenis huruf kustom — tapi tetap jaga jumlah fontnya sedikit demi performa.

Dengan warna, box model, dan sekarang tipografi sudah kamu kuasai, kamu sudah bisa menata tiap elemen dengan rapi. Dua artikel berikutnya menggarap topik besar: tata letak — soal mengatur posisi elemen-elemen itu di halaman. Kita akan mulai dari Flexbox, alat modern untuk menyusun sesuatu ke dalam baris dan kolom tanpa bikin pusing.