Lompat ke konten utama
←

Dasar Desain Visual

Pelajaran 8 dari 16

Tipografi

Anatomi huruf: baseline, x-height, ascender, descender

Setelah pelajaran ini kamu bisa menamai garis dan bagian huruf serta membedakan huruf serif dan sans-serif.

±14 menitDiperiksa 27 Sep 2026

Materi

Setiap huruf di sebuah fon duduk pada garis yang sama, disebut baseline atau garis dasar. Pedoman desain karakter Microsoft menjelaskan bahwa huruf kecil yang datar, seperti x, u, dan z, rata dengan x-height di atas dan baseline di bawah. x-height adalah tinggi huruf kecil tanpa tangkai; spesifikasi CSS mencatat namanya berasal dari tinggi huruf x, dan satuan CSS ex setara dengan x-height fon yang dipakai.

Bagian yang naik melewati x-height disebut ascender, seperti tangkai pada b, d, f, h, k, dan l. Bagian yang turun di bawah baseline disebut descender, seperti ekor pada g, j, p, q, dan y. Microsoft memberi f sebagai contoh ascender bulat, serta g dan j sebagai contoh descender. Dua fon dengan ukuran huruf yang sama dapat tampak berbeda besar karena x-height-nya berbeda.

IstilahArtinyaContoh huruf
BaselineGaris tempat huruf dudukDasar a, n, x
x-heightTinggi huruf kecil tanpa tangkaix, u, z
AscenderBagian yang naik di atas x-heightb, d, h, l
DescenderBagian yang turun di bawah baselineg, p, q, y

Keluarga huruf dikelompokkan dari ujung goresannya. MDN menjelaskan kelompok serif sebagai huruf dengan goresan akhir, ujung melebar atau meruncing, atau kait kecil di ujung, contohnya Palatino; kelompok sans-serif sebagai huruf dengan ujung goresan polos, contohnya Open Sans dan Fira Sans. Pada kata “kopi”, tangkai k adalah ascender dan ekor p adalah descender.

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 1 dari 3

Pada kata “gajah”, huruf mana yang punya descender?

Pilih satu jawaban

Latihan 2 dari 3

Pada kata “sapu”, huruf s, a, dan u sama-sama berdiri di atas satu garis, sedangkan ekor p turun melewatinya. Apa nama garis itu?

Pilih satu jawaban

Latihan 3 dari 3

Sebuah fon punya ujung goresan yang polos tanpa kait. Kata kunci keluarga generik CSS mana yang menggambarkannya?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke