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:

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: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
 
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
}

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;
  cursor: not-allowed;
}

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;
  background: #2563eb;
}
 
.note::after {
  content: "*";
  margin-left: 0.25rem;
  color: #dc2626;
}

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

Urutan berpikir yang lebih aman biasanya begini:

1. Tentukan apakah masalahnya ada di teks, jarak, state, atau token.
2. Kalau masalahnya tentang bacaan, mulai dari font-size, line-height, dan spacing.
3. Kalau nilai dipakai berulang, pindahkan ke custom properties.
4. Kalau style bergantung pada state atau posisi elemen, gunakan pseudo-class.
5. Kalau perlu dekorasi tambahan tanpa markup baru, gunakan pseudo-element.

Contoh implementasi

css

:root {
  --font-body: 1rem;
  --font-title: 1.5rem;
  --leading-body: 1.6;
  --leading-title: 1.2;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --color-text: #111827;
  --color-accent: #2563eb;
}
 
.article {
  max-width: 70ch;
  color: var(--color-text);
  font-size: var(--font-body);
  line-height: var(--leading-body);
}
 
.article h1,
.article h2 {
  line-height: var(--leading-title);
  margin-bottom: var(--space-4);
}
 
.article p + p {
  margin-top: var(--space-4);
}
 
.button {
  padding: var(--space-2) var(--space-4);
}
 
.button:hover {
  background: var(--color-accent);
}
 
.button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
 
.section-title::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
}

Catatan implementasi

• Jangan menyamakan semua ukuran font. Hierarki teks membantu pembaca memindai isi.
• line-height sering lebih penting daripada font size kalau teks terasa sempit atau padat.
• Jangan atur spacing secara acak di setiap komponen; pakai skala spacing yang konsisten.
• Custom properties paling berguna saat nilainya punya arti sistemik, bukan hanya angka sekali pakai.
• Pseudo-class cocok untuk state interaksi dan posisi struktural.
• Pseudo-element cocok untuk dekorasi atau layer visual tambahan, bukan konten inti.
• Kalau state berasal dari aplikasi, class eksplisit sering lebih mudah dipahami daripada selector yang terlalu pintar.

Kesalahan umum

• memakai font-size besar tapi line-height terlalu rapat
• memberi margin berbeda di tiap paragraf tanpa skala yang jelas
• menaruh semua nilai langsung di selector tanpa token bersama
• memakai ::before atau ::after untuk konten penting
• bergantung pada :hover untuk semua interaksi, padahal keyboard user juga perlu fokus yang terlihat
• menggunakan pseudo-class untuk logika state aplikasi yang seharusnya diwakili class

Istilah

• Typography: pengaturan teks agar mudah dibaca dan punya hierarki visual.
• Font sizing: penentuan ukuran huruf untuk membedakan level teks.
• Line-height: jarak antar baris dalam satu blok teks.
• Spacing: jarak antar elemen atau antar blok teks.
• CSS custom properties: variabel CSS dengan sintaks --nama-variabel.
• Pseudo-class: selektor berdasarkan state atau posisi elemen.
• Pseudo-element: selektor untuk bagian elemen atau lapisan visual tambahan.

Referensi terkait

• Box Model
• Specificity dan Cascade
• Display, Overflow, dan Containment Sederhana
• Responsive Layout: Media Queries, Fluid Sizing, dan Container Queries