CSS Typography Variables Pseudo Classes Pseudo Elements

Definisi

Topik ini membahas tiga lapis styling yang sering dipakai bareng di CSS:

Typography: aturan untuk ukuran font, line-height, panjang baris, dan jarak antar teks.
CSS custom properties: variabel yang dipakai untuk menyimpan token desain seperti warna, spacing, ukuran font, dan radius.
Pseudo-class dan pseudo-element: selektor khusus untuk memberi style berdasarkan keadaan elemen atau bagian elemen tertentu.

Kalau dipakai dengan benar, tiga hal ini membantu CSS jadi lebih konsisten, lebih mudah dirawat, dan lebih gampang diubah tanpa bongkar banyak file.

Kenapa penting

Banyak UI yang terlihat “rapi” di awal, tapi mulai berantakan saat isi bertambah, komponen dipakai ulang, atau tema berubah. Biasanya masalahnya bukan pada satu properti CSS saja, melainkan pada fondasi styling yang belum dipisah dengan jelas.

Contoh gejala yang sering muncul:

ukuran font tidak konsisten antar komponen
teks terasa terlalu padat atau terlalu renggang
jarak antar elemen diatur manual satu per satu
perubahan warna atau spacing harus dilakukan di banyak tempat
state interaksi seperti hover, focus, dan disabled tidak punya pola yang seragam

Dokumen ini membahas kapan pakai font sizing, line-height, spacing, custom properties, dan pseudo-selector supaya styling tidak bergantung pada tebakan.

Typography

Typography di CSS bukan cuma soal memilih font-family. Yang lebih penting adalah bagaimana teks dibaca di layout nyata.

Komponen utama yang biasanya diatur:

font-size
line-height
letter-spacing
font-weight
max-width atau ukuran container teks
spacing antar heading, paragraf, dan elemen pendukung

Kapan pakai font sizing

Gunakan font-size untuk menentukan hierarki visual dan skala bacaan.

Pakai ukuran font ketika:

kamu ingin membedakan judul, subjudul, body text, dan caption
komponen punya level teks yang jelas
teks harus mengikuti skala desain sistem
konten dibaca berulang, misalnya artikel, form, dashboard, atau card list

Contoh prinsipnya:

heading lebih besar untuk memberi struktur
body text cukup stabil dan nyaman dibaca
caption atau helper text lebih kecil, tapi tetap terbaca

css

h1 {
  font-size: 2rem;
}
 
h2 {
  font-size: 1.5rem;
}
 
body {
  font-size: 1rem;
}
 
small,
.helper-text {
  font-size: 0.875rem;
}

Kapan pakai line-height

Gunakan line-height untuk mengatur jarak vertikal antar baris teks.

Pakai line-height saat:

teks lebih dari satu baris
kamu ingin membaca paragraf dengan nyaman
label, helper text, atau tombol punya teks yang terasa terlalu rapat
heading multi-line perlu ruang yang cukup

Patokan umum yang sehat:

heading: line-height lebih rapat, tapi jangan terlalu mepet
body text: line-height lebih longgar supaya mudah dipindai
teks kecil: line-height jangan terlalu kecil karena cepat terasa padat

css

h1,
h2 {
  line-height: 1.1;
}
 
p {
  line-height: 1.6;
}
 
.helper-text {
  line-height: 1.4;
}

Kapan pakai spacing pada typography

Spacing di sini mencakup jarak antar elemen teks, bukan sekadar margin acak. Tujuannya untuk menjaga ritme baca.

Gunakan spacing ketika:

heading dan paragraf perlu dipisah jelas
daftar teks harus terlihat terstruktur
blok konten perlu napas visual
komponen form perlu jarak yang stabil antar label, input, dan helper text

Prinsip yang aman:

pakai spacing konsisten antar level teks
jangan beri margin manual yang terlalu banyak variasi
tentukan ritme dari token spacing, bukan dari selera per komponen

css

.article h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
 
.article p {
  margin-bottom: 1rem;
}

Aturan praktis typography

font-size dipakai untuk hierarki dan skala.
line-height dipakai untuk keterbacaan.
spacing dipakai untuk ritme antar blok teks.
max-width sering sama pentingnya dengan ukuran font, karena baris yang terlalu panjang bikin teks capek dibaca.

CSS custom properties

CSS custom properties atau --variables dipakai untuk menyimpan nilai yang ingin dipakai ulang.

Contoh sederhana:

css

:root {
  --font-size-body: 1rem;
  --line-height-body: 1.6;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --color-text: #1f2937;
}

Lalu dipakai seperti ini:

css

body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
}
 
.card {
  padding: var(--spacing-4);
}

Kapan pakai CSS custom properties

Pakai custom properties saat:

nilai dipakai ulang di banyak komponen
kamu ingin token desain yang mudah diubah
ada tema light/dark atau variasi brand
skala typography dan spacing perlu konsisten lintas file
kamu ingin mengurangi hard-coded value yang tersebar

Kalau nilainya cuma dipakai sekali dan tidak akan berubah, custom property tidak selalu wajib. Tapi kalau nilainya menyangkut token inti, custom property biasanya lebih sehat.

Kenapa custom properties berguna

perubahan bisa dilakukan di satu tempat
token desain lebih mudah dibaca
tema bisa diubah tanpa rewrite besar
komponen jadi lebih stabil karena tidak tergantung angka lokal yang acak

Dependency token

Di proyek yang rapi, custom properties biasanya dibangun sebagai dependency token. Artinya, token dasar dipakai untuk membentuk token semantik.

Contoh alurnya:

Loading diagram...

Penjelasan alurnya:

Base tokens adalah nilai mentah seperti 8px, 16px, atau warna dasar.
Semantic tokens menjelaskan peran, misalnya --color-text-primary.
Component tokens mengikat token ke kebutuhan komponen tertentu.
UI usage adalah penerapan langsung di CSS.

Pola ini lebih enak dirawat daripada menanam nilai langsung di banyak selector.

Contoh skala token

css

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
 
  --text-xs: 0.75rem;
  --text-sm:

Pseudo-class

Pseudo-class dipakai untuk memberi style berdasarkan keadaan elemen atau posisi elemen di dalam struktur dokumen.

Contoh umum:

:hover
:focus
:focus-visible
:active
:disabled
:checked
:first-child
:last-child
:nth-child()

Peran pseudo-class dalam styling

Pseudo-class penting untuk state styling, bukan dekorasi semata.

Pakai pseudo-class saat:

elemen perlu merespons interaksi user
style bergantung pada state form
kamu ingin memberi highlight pada item tertentu dalam daftar
perlu membedakan elemen berdasarkan urutan atau kondisi struktur

Contoh:

css

.button:hover {
  background: #111827;
}
 
.button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
 
input:disabled {
  opacity: 0.5

Kapan pseudo-class dipakai

Gunakan pseudo-class ketika state itu memang bagian dari perilaku elemen.

Contoh kasus:

tombol berubah saat hover atau focus
input invalid perlu style berbeda
tab aktif perlu penanda visual
item list pertama atau terakhir butuh perlakuan khusus

Pseudo-class jangan dipakai untuk mengganti logika yang seharusnya dikelola oleh class yang eksplisit. Kalau state-nya berasal dari aplikasi, kadang class .is-active atau .is-open lebih jelas daripada bergantung pada struktur DOM semata.

Pseudo-element

Pseudo-element dipakai untuk men-styling bagian tertentu dari elemen, atau menambahkan layer visual yang tidak benar-benar ada di markup.

Contoh umum:

::before
::after
::first-letter
::first-line
::selection
::placeholder

Peran pseudo-element dalam styling

Pseudo-element cocok untuk:

dekorasi ringan seperti ikon kecil, underline khusus, atau badge visual
elemen tambahan yang tidak perlu masuk HTML
highlight bagian teks tertentu
styling placeholder atau bagian awal paragraf

Contoh:

css

.card-title::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 999px

Kapan pseudo-element dipakai

Gunakan pseudo-element saat kamu butuh lapisan visual tambahan, tetapi tidak ingin menambah elemen HTML hanya untuk dekorasi.

Contoh yang masuk akal:

garis kecil di bawah heading
ikon dekoratif di card
highlight awal paragraf
efek background atau accent shape sederhana

Jangan pakai pseudo-element untuk konten yang penting secara semantik. Kalau informasinya harus dibaca screen reader atau diproses sebagai isi utama, taruh di HTML, bukan di content.

Cara memilih: font sizing, line-height, spacing, variables, pseudo-class, pseudo-element