Pernah merasa dua font dengan ukuran 16 px terlihat berbeda besar? Padahal angka ukurannya sama persis.
Salah satunya mungkin terlihat mungil dan elegan, sementara yang lain terasa lebih besar, jelas, dan mudah dibaca. Bukan karena angka font size-nya berbeda — salah satu penyebabnya adalah sesuatu yang disebut x-height.
Istilah ini mungkin terdengar seperti istilah teknis yang hanya dipahami desainer atau tipografer. Padahal, x-height sebenarnya dekat sekali dengan kehidupan kita sebagai pembaca. Setiap kali kita membaca buku, artikel di website, caption, poster, hingga tulisan di layar ponsel, kita sedang berhadapan dengan karakter huruf yang punya x-height tertentu — meski kita jarang menyadarinya.
{getToc} $title={Table of Contents}
Lalu, apa itu x-height? Mengapa x-height penting dalam tipografi? Apakah x-height memengaruhi keterbacaan? Dan bagaimana cara memilih font dengan x-height yang tepat? Mari kita bahas dari dasar sampai penerapannya.
Apa Itu X-Height?
Dalam tipografi, x-height adalah tinggi bagian utama huruf kecil (lowercase), yang secara tradisional diukur menggunakan tinggi huruf "x". Pengukurannya dilakukan dari baseline hingga bagian atas huruf kecil tersebut, tidak termasuk bagian huruf yang naik (ascender) atau turun (descender).
Sederhananya, x-height adalah seberapa tinggi "badan utama" huruf kecil terlihat dalam sebuah font.
Kenapa yang dipakai sebagai acuan justru huruf x? Karena huruf x tidak punya bagian yang menjulang ke atas seperti b, d, h, maupun bagian yang turun ke bawah seperti g, p, y. Karena itu, huruf x bisa jadi acuan yang cukup jelas untuk melihat tinggi badan huruf kecil secara keseluruhan.
Tapi jangan menganggap x-height sebagai ukuran seperti 12 pt, 16 px, atau 20 px. X-height lebih tepat dipahami sebagai proporsi dalam desain sebuah typeface. Dua font yang sama-sama disetel pada ukuran 16 px bisa saja punya x-height yang berbeda — dan itulah yang membuat keduanya terlihat tidak sama besar, meski angkanya identik.
Mengapa Dua Font 16 px Bisa Terlihat Berbeda?
Ini salah satu alasan kenapa memilih font tidak cukup hanya dengan melihat angka ukurannya. Bayangkan ada dua tulisan, Font A dan Font B, yang sama-sama disetel pada 16 px. Secara teknis keduanya menggunakan ukuran yang sama persis. Tapi ketika dilihat langsung, Font B mungkin tampak jauh lebih besar — dan salah satu penyebabnya adalah perbedaan x-height.
Typeface dengan x-height relatif besar membuat bagian utama huruf kecil mengisi lebih banyak ruang vertikal, sehingga tulisan bisa terlihat lebih besar pada ukuran nominal yang sama. Monotype, salah satu foundry tipografi ternama, juga menjelaskan bahwa hubungan antara x-height dengan ukuran body font berpengaruh terhadap seberapa besar teks itu terasa secara visual. Jadi, font size bukan satu-satunya hal yang menentukan seberapa besar sebuah tulisan terlihat di mata pembaca.
Mengenal Baseline, X-Height, Ascender, dan Descender
Supaya lebih mudah memahami x-height, ada baiknya kita mengenal dulu beberapa bagian dasar anatomi huruf.
Baseline adalah garis imajiner tempat sebagian besar huruf "berdiri" — bayangkan seperti lantai, di mana huruf-huruf dalam sebuah baris tulisan seolah berdiri di atas garis tersebut.
X-height adalah jarak dari baseline menuju tinggi utama huruf kecil, yang terlihat jelas pada huruf-huruf seperti x, a, e, o, n, dan m — sebagian besar badan huruf ini berada di area x-height.
Ascender adalah bagian huruf kecil yang naik melewati x-height, seperti pada huruf b, d, f, h, k, dan l. Coba perhatikan kata "buku" — huruf b di situ punya bagian yang menjulang melewati tinggi utama huruf kecil lainnya.
Descender adalah kebalikan dari ascender, yaitu bagian huruf yang turun melewati baseline, seperti pada huruf g, j, p, q, dan y. Misalnya pada kata "pulang", huruf p dan g punya bagian yang turun ke bawah baseline.
Keempat konsep ini — baseline, x-height, ascender, dan descender — merupakan bagian penting dari anatomi sebuah typeface, dan saling berkaitan dalam membentuk karakter visual sebuah font.
Apa Hubungan X-Height dengan Ukuran Font?
Ini bagian yang sering membingungkan. Ketika seseorang bilang "saya menggunakan font 16 px," itu sebenarnya belum sepenuhnya menjelaskan seberapa besar huruf tersebut akan terlihat. Sebab, point size atau font size hanya memberikan ruang ukuran untuk sebuah typeface, sementara proporsi huruf di dalam ruang itu bisa berbeda-beda tergantung desain fontnya.
Adobe Type Primer menjelaskan bahwa x-height merupakan deskripsi proporsional dari ukuran huruf kecil, bukan sebuah satuan ukuran tersendiri. Typeface dengan x-height besar berarti huruf kecilnya secara proporsional lebih besar dibandingkan ascender dan descender-nya. Itulah sebabnya angka 16 px tidak selalu terlihat sama besar di dua font yang berbeda.
X-Height Besar vs X-Height Kecil
Secara sederhana, kita bisa membayangkan dua karakter font yang berlawanan ini.
X-height besar berarti huruf kecil mengambil porsi yang relatif besar dari keseluruhan tinggi typeface. Hasil visualnya cenderung terlihat lebih besar, terasa lebih padat, lebih mudah terlihat pada ukuran kecil, dan cocok untuk berbagai kebutuhan yang membutuhkan keterbacaan tinggi. Tapi x-height yang besar tidak otomatis berarti selalu lebih baik — pada ukuran tertentu, proporsi yang terlalu besar bisa membuat tampilan teks terasa lebih padat atau justru mengurangi karakter khas yang berasal dari ascender dan descender-nya. Materi pengantar tipografi dari City Tech juga mencatat bahwa x-height yang besar memang bisa membantu keterbacaan pada ukuran kecil, tapi dalam kondisi tertentu juga bisa membuat tekstur teks terasa lebih berat atau rapat.
X-height kecil berarti huruf kecil mengambil porsi yang lebih kecil dibanding keseluruhan tinggi typeface. Hasil visualnya sering terasa lebih ringan, lebih elegan, lebih lapang, dan memiliki kontras visual yang lebih kuat antara badan huruf dengan bagian ascender maupun descender-nya. Namun, pada ukuran yang sangat kecil, font dengan x-height rendah bisa terasa lebih sulit dibaca dibanding font dengan x-height lebih tinggi, tergantung desain typeface dan konteks penggunaannya.
Apakah X-Height Memengaruhi Keterbacaan?
Ya, tapi bukan satu-satunya faktor. X-height merupakan salah satu faktor yang berpengaruh terhadap legibility, atau kemudahan mengenali bentuk huruf. Pada ukuran kecil, x-height yang lebih besar umumnya membuat badan huruf terlihat lebih jelas karena bagian utama karakternya mengambil area visual yang lebih besar. Sumber pengajaran tipografi Adobe bahkan menyebut bahwa pada ukuran sangat kecil, font dengan x-height lebih besar cenderung lebih mudah dibaca, dengan asumsi faktor-faktor lain dianggap sama.
Tapi penting untuk tidak menyederhanakannya jadi "x-height besar = selalu paling mudah dibaca" — tidak sesederhana itu. Keterbacaan juga dipengaruhi oleh bentuk karakter, jarak antarhuruf (tracking), jarak antarbaris (leading), panjang baris, kontras warna, ketebalan stroke, ukuran teks, jenis media, kualitas layar atau cetakan, serta konteks pembacaannya sendiri. Karena itu, x-height sebaiknya dianggap sebagai salah satu bagian dari sistem tipografi secara keseluruhan, bukan satu-satunya penentu kenyamanan membaca.
Mengapa X-Height Penting untuk Website?
Ini sangat relevan untuk dunia digital. Ketika membaca website, orang biasanya tidak membaca dengan jarak seperti saat melihat poster — mereka membaca paragraf demi paragraf langsung dari layar, yang sering kali berukuran kecil dan dibaca dalam waktu cukup lama.
Karena itu, pemilihan font untuk web harus mempertimbangkan bagaimana huruf akan terlihat pada ukuran yang relatif kecil. Font dengan x-height yang sesuai bisa membantu membuat teks body terasa lebih jelas, terutama ketika pengguna sedang membaca artikel panjang, blog, berita, deskripsi produk, dokumentasi, halaman informasi, atau teks di perangkat mobile. Panduan aksesibilitas dan keterbacaan juga menempatkan x-height sebagai salah satu faktor penting, karena ia menentukan ukuran visual badan huruf ketika teks dilihat pada jarak baca tertentu.
X-Height dan Mobile: Kenapa Semakin Penting?
Coba bayangkan membaca artikel panjang lewat smartphone — layar kecil, ukuran teks terbatas, dan pembaca mungkin sedang membaca sambil berjalan, duduk di kendaraan, atau dalam kondisi pencahayaan yang berubah-ubah. Di sinilah pemilihan typeface menjadi penting.
Font dengan x-height yang memadai bisa membuat huruf kecil tetap terlihat jelas tanpa harus membuat ukuran fontnya terlalu besar. Tapi sekali lagi, jangan hanya mengandalkan x-height saja — line-height, panjang baris, ukuran font, dan kontras warna tetap harus diperhatikan bersama-sama agar pengalaman membaca di layar kecil tetap nyaman.
X-Height dalam Desain Buku
Bagi pembaca buku, pembahasan x-height juga menarik untuk disimak. Buku biasanya menggunakan teks dalam jumlah sangat banyak, sehingga tipografinya bukan sekadar soal "font-nya bagus atau tidak" — font itu harus bekerja selama puluhan, bahkan ratusan halaman tanpa membuat pembacanya lelah.
Bayangkan sebuah novel 400 halaman menggunakan typeface yang secara visual terlalu kecil atau terlalu rapat. Mungkin pada satu paragraf terlihat baik-baik saja, tapi setelah membaca puluhan halaman, mata bisa terasa jauh lebih cepat lelah. Itulah sebabnya desain huruf dalam buku perlu mempertimbangkan bukan hanya estetika, tapi juga pengalaman membaca secara keseluruhan.
X-Height dalam Tipografi Buku vs Poster
Kebutuhannya bisa sangat berbeda tergantung medianya. Untuk buku, fokus biasanya lebih banyak pada kenyamanan membaca dalam waktu lama, bentuk karakter, ritme paragraf, spasi, panjang baris, dan konsistensi halaman dari awal sampai akhir. Untuk poster, fokusnya bisa bergeser ke dampak visual, keterbacaan dari jarak jauh, hierarki informasi, dan karakter visual yang mencolok.
Typeface dengan x-height besar bisa membantu teks terlihat lebih besar dan jelas pada konteks tertentu, termasuk penggunaan yang membutuhkan keterbacaan dari jarak tertentu seperti poster atau signage. Jadi, font yang cocok untuk novel belum tentu cocok untuk poster, begitu juga sebaliknya.
Apakah X-Height Sama dengan Cap Height?
Tidak, ini dua hal yang berbeda. X-height mengukur tinggi badan utama huruf kecil, contohnya pada huruf x, a, e, o. Sementara cap height mengukur tinggi huruf kapital, contohnya pada huruf H, E, A, T. Kalau x-height berbicara tentang huruf kecil, cap height berbicara tentang huruf kapital — dan hubungan antara keduanya ikut membantu membentuk karakter visual sebuah typeface secara keseluruhan.
X-Height Bukan Cuma Tentang Huruf "X"
Ini juga penting dipahami. Walaupun namanya x-height, bukan berarti hanya huruf x yang dipengaruhi — x-height sebenarnya menggambarkan tinggi badan utama banyak huruf kecil sekaligus, seperti a, c, e, m, n, o, r, s, u, v, w, x, dan z.
Namun, bentuk huruf tertentu bisa sedikit melewati garis x-height karena pertimbangan optis dalam desain typeface. Huruf berbentuk lengkung seperti o atau e, misalnya, dibuat sedikit melewati garis agar secara visual tampak memiliki tinggi yang seimbang dengan huruf-huruf yang lebih datar. Fenomena ini dikenal dengan istilah overshoot.
Bagaimana Cara Mengetahui X-Height Sebuah Font?
Ada beberapa cara sederhana yang bisa dicoba. Pertama, bandingkan secara visual — cara paling sederhana adalah menulis beberapa font pada ukuran yang sama, misalnya 16 px, lalu ketik kalimat seperti "membaca buku setiap hari" dan bandingkan tinggi badan huruf kecilnya satu per satu. Font dengan x-height lebih tinggi biasanya membuat huruf kecil tampak lebih besar dibanding yang lain.
Kedua, perhatikan perbandingan huruf kecil dan kapital — coba bandingkan "a" dengan "A", atau "x" dengan "X". Perbandingan visual semacam ini bisa memberi gambaran tentang karakter x-height sebuah typeface.
Ketiga, gunakan software desain atau font tools — dalam proses desain profesional, informasi mengenai font metrics bisa diperiksa lewat berbagai perangkat lunak desain atau alat analisis typeface. Tapi untuk pengguna biasa, sebenarnya melihat dan membandingkan font secara langsung saja sudah sangat membantu.
Apakah X-Height Menentukan Font Bagus atau Jelek?
Tidak — ini mungkin salah satu hal paling penting dalam memahami tipografi. Tidak ada aturan bahwa x-height besar berarti font bagus, atau x-height kecil berarti font jelek. Keduanya punya karakter dan kebutuhan penggunaan yang berbeda.
Typeface dengan x-height rendah bisa memberikan kesan tertentu yang tidak bisa digantikan oleh font dengan x-height tinggi — misalnya kesan elegan dan lapang. Sebaliknya, typeface dengan x-height tinggi bisa sangat membantu ketika kebutuhan utamanya adalah keterbacaan pada ukuran kecil. Jadi pertanyaannya bukan "mana yang lebih bagus?", melainkan "mana yang paling sesuai dengan kebutuhan desainnya?"
Bagaimana Memilih Font Berdasarkan X-Height?
Kalau kamu sedang membuat website, buku, blog, atau desain konten, beberapa pertanyaan berikut bisa jadi panduan. Seberapa kecil teksnya? Kalau teks akan digunakan dalam ukuran kecil, perhatikan apakah badan hurufnya masih mudah dikenali. Di mana teks akan dibaca — di smartphone, laptop, buku, poster, kemasan, atau signage? Media yang berbeda akan memengaruhi keputusan tipografi secara keseluruhan.
Berapa lama pembaca akan membaca? Untuk teks panjang, kenyamanan biasanya jauh lebih penting dibanding sekadar tampilan yang menarik sekilas. Apakah font memiliki bentuk karakter yang jelas? X-height memang penting, tapi bentuk huruf a, e, g, r, s, dan karakter lainnya juga memengaruhi kemampuan pembaca mengenali sebuah kata secara utuh. Dan terakhir, bagaimana tampilannya ketika menjadi paragraf? Jangan hanya melihat satu kata — coba tes dengan satu atau dua paragraf penuh, karena font yang terlihat keren pada satu judul belum tentu nyaman ketika digunakan untuk 500 kata.
Kesalahan yang Sering Dilakukan Saat Memilih Font
Salah satu kesalahan yang paling umum adalah terlalu fokus pada font size. Banyak orang berpikir, "kalau tulisannya terlalu kecil, tinggal dibesarkan saja." Padahal, mengganti typeface dengan x-height yang berbeda bisa memberikan perubahan visual yang besar meskipun angka ukurannya tetap sama.
Kesalahan lain adalah hanya melihat bentuk font. Font yang terlihat cantik belum tentu nyaman digunakan untuk paragraf panjang. Jangan cuma bertanya "bagus nggak?", tapi tanyakan juga "nyaman dibaca nggak?"
Kesalahan ketiga adalah menggunakan satu font untuk semua kebutuhan. Judul, subjudul, body text, caption, dan elemen navigasi punya fungsi yang berbeda-beda, sehingga sistem tipografi yang baik biasanya mempertimbangkan hierarki, ukuran, berat, spasi, dan karakter typeface secara menyeluruh, bukan menyamaratakan semuanya dengan satu font saja.
X-Height dalam Dunia KataLiterasi
Bagi website bertema buku seperti KataLiterasi.id, pembahasan x-height sebenarnya bukan sekadar teori desain — ini soal pengalaman membaca itu sendiri.
Sebuah artikel bisa saja memiliki tulisan yang sangat bagus, SEO yang sudah diperhatikan, judul yang menarik, dan struktur yang rapi. Tapi kalau tipografinya membuat pembaca cepat lelah, pengalaman membaca tetap bisa terganggu di tengah jalan. Karena itu, ketika memilih font untuk sebuah artikel, jangan cuma mempertimbangkan "font ini estetik nggak?" — pertimbangkan juga "kalau pembaca membaca artikel ini sampai 1.500 kata, masih nyaman nggak?" Di situlah x-height mulai terasa penting, meski sering tidak disadari pembaca secara langsung.
Jadi, Apa Itu X-Height?
Kalau harus diringkas dalam satu kalimat: x-height adalah tinggi badan utama huruf kecil dalam sebuah typeface, yang secara tradisional diukur berdasarkan tinggi huruf "x" dari baseline menuju bagian atasnya.
X-height membantu menjelaskan mengapa dua font dengan ukuran nominal yang sama bisa terlihat sangat berbeda. Ia juga ikut memengaruhi ukuran visual huruf, karakter typeface, serta keterbacaan — terutama ketika teks digunakan pada ukuran kecil. Dan yang menarik, x-height menunjukkan bahwa tipografi bukan sekadar memilih font yang "bagus". Ada banyak keputusan kecil di balik sebuah huruf yang akhirnya menentukan bagaimana mata kita melihat, mengenali, dan membaca sebuah kata.
FAQ Seputar X-Height
Apa arti x-height dalam tipografi?
X-height adalah tinggi badan utama huruf kecil dalam sebuah typeface, biasanya ditentukan berdasarkan tinggi huruf kecil "x" dari baseline hingga bagian atasnya.
Apakah x-height sama dengan ukuran font?
Tidak. Font size menunjukkan ukuran nominal teks, sedangkan x-height menunjukkan proporsi tinggi huruf kecil dalam typeface. Karena itu, dua font dengan ukuran yang sama bisa terlihat berbeda besar satu sama lain.
Apakah x-height memengaruhi readability?
Ya. X-height merupakan salah satu faktor yang bisa memengaruhi keterbacaan, terutama pada ukuran teks kecil. Namun, readability juga dipengaruhi banyak faktor tipografi lainnya, bukan hanya x-height saja.
Apakah x-height besar selalu lebih baik?
Tidak. X-height besar bisa membantu membuat huruf terlihat lebih besar pada ukuran yang sama, tapi pilihan yang tepat tetap bergantung pada typeface, ukuran, media, panjang teks, dan tujuan desainnya.
Apa perbedaan x-height dan cap height?
X-height mengacu pada tinggi badan huruf kecil, sedangkan cap height mengacu pada tinggi huruf kapital.
Penutup
Kita sering membaca sebuah kalimat tanpa pernah memikirkan bagaimana huruf-huruf di dalamnya dirancang. Padahal, di balik kata "buku", "cerita", atau bahkan artikel yang sedang kamu baca ini, ada banyak keputusan tipografi yang bekerja diam-diam di belakang layar.
X-height adalah salah satunya. Ia mungkin tidak terlihat seperti elemen desain yang dramatis — tidak punya warna mencolok, tidak muncul sebagai ilustrasi besar. Tapi proporsi kecil ini ikut menentukan bagaimana sebuah typeface terasa ketika dibaca, dari halaman pertama sampai halaman terakhir.
Dan mungkin, lain kali ketika melihat dua font dengan ukuran yang sama tapi salah satunya terlihat "lebih besar", kamu sudah tahu salah satu penyebab yang mungkin ada di baliknya. Bukan cuma soal ukuran font — bisa jadi, mata kita sedang membaca x-height.
