Pengatur Jarak Antarhuruf

Memilih jarak antarhuruf dengan mata, lalu mengubahnya ke nilai CSS, Figma, dan Photoshop

Pengatur jarak antarhuruf ini membantu Anda memilih jarak antarhuruf (letter-spacing), yaitu ruang di antara dua huruf yang berdampingan, sambil melihat langsung contoh teks pada ukuran aslinya. Setelah nilainya ditentukan, alat ini membuat kode CSS dan kelas Tailwind, lalu menampilkan nilai yang sama dalam satuan yang dipakai Figma, Photoshop, dan Word. Misalnya, letter-spacing: -0.02em; pada huruf 16px mengurangi jarak 0.32px di setiap huruf. Nilai itu setara dengan −2% di Figma, tracking −20 di Photoshop, dan −0,24pt di Word untuk huruf 12pt.

Jika Anda mengetik kalimat sendiri pada kolom contoh, kaca pembesar menggambar beberapa huruf pertama dalam ukuran besar dan menandai dengan garis miring tempat jarak itu ditambahkan. Tangga perbandingan menjajarkan enam baris di atas dan di bawah nilai saat ini agar mudah dipilih dengan mata. Grafik acuan menurut ukuran menampilkan jarak antarhuruf yang ditetapkan Apple SF Pro, Inter, dan Material 3 untuk setiap ukuran huruf, berdampingan dengan nilai Anda.

Mengapa dan kapan jarak antarhuruf perlu diatur

Setiap font sudah membawa jarak bawaan yang ditetapkan perancangnya, sehingga sebagian besar teks tidak perlu diubah. Namun jarak bawaan itu disetel untuk ukuran dan penggunaan tertentu. Pada huruf yang sangat kecil atau sangat besar, dan pada teks yang seluruhnya huruf kapital, jaraknya bisa terlihat janggal. Pengaturan jarak antarhuruf berarti melebarkan atau merapatkan sedikit ruang di antara huruf agar teks lebih nyaman dibaca.

• Saat memindahkan desain ke web: Menulis −2% dari Figma atau −20 dari Photoshop langsung ke CSS menghasilkan nilai yang sama sekali berbeda. Masukkan nilai desain ke kolom konversi di bawah, maka nilai em dan px langsung muncul.
• Saat judul besar terlihat renggang: Semakin besar hurufnya, semakin besar pula ruang di antara huruf dan semakin mencolok. Merapatkannya sedikit sering membuat judul tampak lebih padat, tetapi hasilnya bisa sebaliknya tergantung font, jadi bandingkan nilai di atas dan di bawahnya pada tangga perbandingan.
• Teks kecil dan label kapital: Keterangan foto, catatan kaki, tombol, dan label yang seluruhnya kapital terlihat tidak terlalu menggumpal jika jaraknya dilebarkan sedikit. Panduan tipografi Google Fonts juga menyebutkan bahwa huruf kapital lebih mudah dibaca dengan jarak yang lebih lebar.
• Logo dan wordmark: Ini kasus ketika beberapa huruf pendek direnggangkan lebar demi suasana tertentu. Jika jaraknya 0.1em atau lebih, periksa apakah perataan tengah bergeser akibat jarak yang ikut ditambahkan setelah huruf terakhir.
• Saat memadatkan dokumen ke satu baris atau satu halaman: Pada dokumen Word, satu atau dua huruf yang melompat ke baris berikutnya kadang diatasi dengan merapatkan jarak sedikit. Satuan dan menunya berbeda di setiap aplikasi, jadi dirangkum di bawah.

Cara memakai

1. Pilih contoh yang paling mirip dengan kebutuhan Anda di atas (teks isi, teks kecil, judul, judul besar, label kapital, huruf logo), atau tentukan sendiri font, ukuran huruf, ketebalan, dan jarak baris. Font yang tidak terpasang di perangkat ini ditandai "tidak ada di perangkat ini" dalam daftar.
2. Ketik kalimat yang ingin Anda uji pada kolom contoh ukuran asli. Kaca pembesar dan tangga perbandingan ikut memakai baris pertama kalimat itu.
3. Geser penggeser jarak antarhuruf, atau klik baris yang paling nyaman dibaca pada tangga perbandingan. Nilai yang diklik pindah ke tengah, sehingga setelah beberapa kali klik Anda sampai pada nilai yang diinginkan. Selisih antar anak tangga dapat dipilih: 0.005em, 0.01em, atau 0.025em.
4. Jika sudah punya nilai dari desain, masukkan ke tabel "Nilai di aplikasi lain" pada kolom yang sesuai (Figma %, tracking Photoshop, pt Word, dan lainnya). Isi kolom mana pun, kolom lainnya ikut berubah.
5. Pilih satuan keluaran CSS, em atau px, lalu salin seluruh CSS, satu baris letter-spacing, atau kelas Tailwind. Contoh teks juga dapat disimpan sebagai gambar, atau tautan berisi pengaturan saat ini dapat disalin untuk dibagikan.

Konversi satuan: em, px, %, tracking, pt

Satuan jarak antarhuruf berbeda di setiap aplikasi. em pada CSS, % pada Figma, dan tracking pada aplikasi Adobe semuanya sebanding dengan ukuran huruf, sehingga rasionya tetap meski ukuran huruf berubah. Sebaliknya, px dan pt di Word adalah panjang tetap, jadi untuk mempertahankan rasio yang sama Anda harus menghitung ulang sesuai ukuran huruf. Tabel di bawah menunjukkan nilai yang dimasukkan pada setiap aplikasi untuk huruf 16px (12pt) dengan jarak −0.02em.

Ukuran huruf di Word ditentukan dalam pt, jadi untuk menyamakannya dengan ukuran px di web, gunakan 1px = 0,75pt (16px = 12pt). Kern di iOS dan tracking di SwiftUI adalah panjang tetap dalam pt, sehingga jika angka ukuran hurufnya sama, masukkan angka yang sama dengan kolom px. Kelas jarak antarhuruf Tailwind CSS terdiri dari enam tingkat berikut. Alat ini membuat nama kelas bila nilainya persis sama, dan jika tidak, membuat kelas nilai bebas seperti tracking-[-0.02em].

Jarak yang berbeda menurut ukuran huruf

Pada font yang sama pun, jarak yang cocok berubah menurut ukuran. Apple menyediakan tabel tracking per ukuran dari 6pt sampai 96pt untuk font SF Pro, Inter mempublikasikan rumus yang menghasilkan jarak dari ukuran huruf (−0,0223 + 0,185 × e^{−0,1745 × ukuran}), dan Material 3 menetapkan jarak untuk masing-masing dari 15 peran teks. Arah umumnya sama: semakin kecil hurufnya, semakin lebar jaraknya. Rinciannya berbeda. Apple dan Inter bernilai 0 di sekitar 12px, lalu merapatkan dengan nilai negatif pada ukuran teks isi (14 sampai 20px). Material 3 memberi nilai positif (+0.007 sampai +0.045em) pada peran teks isi, label, dan judul kecil (Title Medium dan Small), serta 0 pada Title Large dan peran Headline serta Display (hanya Display Large, yang terbesar, bernilai −0.004em). Pada huruf besar, Inter bertahan di sekitar −0.022em, sedangkan tabel SF Pro kembali positif mulai 24pt dan bernilai 0 pada 80pt ke atas.

Satuan tabel Apple adalah pt dan Material 3 adalah sp, sehingga untuk web keduanya dianggap sebagai px dengan angka yang sama, lalu diubah ke em (tiga angka desimal). Tabel Apple bernilai sama di iOS dan macOS. Arah jarak untuk judul besar berbeda di setiap acuan, jadi cara paling aman adalah membuat contoh dengan font yang akan dipakai dan membandingkannya dengan mata sendiri.

Mengatur jarak antarhuruf di Word, Figma, dan aplikasi Adobe

Dalam penyusunan teks Jepang, huruf dirancang di dalam kotak persegi dan ditempatkan tanpa jarak tambahan. W3C JLREQ (Requirements for Japanese Text Layout) menyatakannya sebagai: "In principle, characters in Japanese composition are designed in a square box and positioned without extra spacing, i.e. solid setting." Artinya, untuk teks CJK, acuan awalnya adalah jarak 0 (solid setting), dan jarak hanya disesuaikan di tempat yang memerlukan, seperti judul atau kolom sempit. Berikut tempat mengatur jarak antarhuruf di setiap aplikasi.

• Word: Pada tab Beranda, buka peluncur kotak dialog Font, pilih tab Tingkat Lanjut, lalu pada kotak Penspasian pilih Diperluas atau Dikonden dan masukkan nilainya dalam pt pada kotak Menurut. Jarak di antara semua huruf yang dipilih berubah sama besar.
• Figma: Masukkan nilai pada Letter spacing di properti teks, dalam % atau px. Dokumentasi Plugin API Figma menetapkan dua satuan untuk nilai ini, yaitu PERCENT dan PIXELS.
• Photoshop, Illustrator, InDesign: Masukkan nilai pada kolom tracking di panel Character. Bantuan Adobe menjelaskan bahwa tracking dan kerning sama-sama diukur dalam 1/1000 em.

Aksesibilitas: tata letak tidak boleh rusak saat pengguna melebarkan jarak

Kriteria Keberhasilan 1.4.12 Text Spacing (AA) dalam WCAG 2.2 mengharuskan konten dan fungsi tetap utuh ketika pengguna mengubah jarak baris menjadi 1,5 kali ukuran huruf, jarak setelah paragraf menjadi 2 kali, jarak antarhuruf menjadi 0,12 kali, dan jarak antarkata menjadi 0,16 kali. Maksudnya bukan agar nilai itu dipakai dalam desain, melainkan agar huruf tidak terpotong atau bertumpuk ketika pengguna yang kesulitan membaca melebarkan jaraknya. Tanda "WCAG 0.12" pada penggeser jarak menunjukkan nilai itu. Periksa apakah tombol berlebar tetap dan judul yang dipotong menjadi satu baris tetap muat pada nilai tersebut.

Panduan tipografi Google Fonts menyatakan bahwa teks yang seluruhnya kapital lebih mudah dibaca dengan jarak yang dilebarkan, dan jarak negatif tidak dianjurkan kecuali pada ukuran judul yang sangat besar. Untuk teks isi, mulailah dari 0 dan bandingkan nilai di atas dan di bawahnya pada tangga perbandingan.

Cara kerja CSS letter-spacing yang sebenarnya

• em dikunci menjadi px pada elemen yang mendeklarasikannya, lalu diwariskan. CSS Text 3 menetapkan nilai terhitung letter-spacing sebagai panjang absolut. Karena itu, jika induk 16px diberi letter-spacing: 0.1em, anak 32px mewarisi 1.6px apa adanya (nilai yang diukur di Chrome 151). Agar rasionya terjaga pada anak yang ukurannya berbeda, tulis ulang nilai em pada anak itu. Satuan % yang baru ditetapkan CSS Text 4 diwariskan sebagai rasio, dan data kompatibilitas MDN mencatat dukungannya sejak Chrome 145, Firefox 45, dan Safari 7.
• Sebagian peramban menambahkan jarak setelah huruf terakhir. Spesifikasi menetapkan agar jarak tidak ditambahkan di awal dan akhir baris, tetapi di Chrome 151 jarak tetap ditambahkan setelah huruf terakhir. Akibatnya judul rata tengah bergeser ke kiri sejauh setengah jarak antarhuruf. Beri blok judul padding-left dengan nilai yang sama, atau kurangi dengan margin-right bernilai sama pada elemen yang membungkus teks, maka teks kembali ke tengah. Garis miring terakhir yang diwarnai pudar pada kaca pembesar adalah jarak itu.
• Ligatur bisa terlepas. Spesifikasi menganjurkan agar ligatur opsional seperti fi tidak dipakai ketika jarak antarhuruf tidak 0. Jika ligatur tetap diperlukan, aktifkan dengan font-feature-settings, dan spesifikasi juga menyatakan pengaturan itu diutamakan.
• Aksara bersambung seperti Arab tidak diberi jarak. Spesifikasi menetapkan agar jarak antarhuruf tidak ditambahkan di antara huruf pada aksara yang ditulis bersambung.

Kesalahan yang sering terjadi

• Memakai tracking Photoshop langsung sebagai px: Tracking −20 bukan −20px, melainkan −0.02em. Pada huruf 16px nilainya −0.32px.
• Menulis % Figma sebagai em: Menulis −2% dari Figma sebagai −2em membuat huruf saling menumpuk sepenuhnya. Bagi dengan 100 menjadi −0.02em.
• Menetapkan dalam px lalu hanya mengubah ukuran huruf: Nilai −0.32px pada huruf 16px, bila dipakai apa adanya pada judul 32px, menjadi −0.01em, yaitu separuh rasionya. Pakai em pada bagian yang ukurannya berubah.
• Lupa bahwa jarak em induk diwariskan ke anak sebagai px: Jarak em pada judul besar diwariskan sebagai px ke teks kecil di dalamnya, sehingga menjadi terlalu lebar, atau sebaliknya.
• Memberi jarak negatif pada huruf kapital: Label yang seluruhnya kapital sebaiknya dimulai dari sisi yang melebar. Contoh label kapital di alat ini memakai +0.08em.
• Memasang teks tepat pada tombol berlebar tetap: Jika pengguna melebarkan jarak menjadi 0.12em, teks meluap (WCAG 1.4.12). Biarkan lebar tombol menyesuaikan teks.
• Meratatengahkan teks berjarak lebar: Dengan 0.2em seperti pada huruf logo, teks bergeser ke kiri sejauh 0.1em di Chrome. Gunakan juga cara koreksi di atas.

Batasan dan hal yang perlu diperhatikan

• Contoh teks hanya digambar dengan font yang terpasang di perangkat ini. Font yang ditandai "tidak ada di perangkat ini" dalam daftar, atau nama yang Anda ketik tetapi tidak ditemukan, tampil dengan font pengganti, sehingga jaraknya dapat berbeda dari font web pada situs yang sebenarnya.
• Ada bagian yang berbeda antarperamban, misalnya jarak setelah huruf terakhir dan pembulatan px desimal. Nilai ukur dalam teks ini berasal dari Chrome 151, dan belum diukur langsung di Safari maupun Firefox. Kaca pembesar mengukur dan menunjukkan apakah peramban yang sedang dipakai menambahkan jarak setelah huruf terakhir.
• Dokumentasi Figma hanya menyebutkan bahwa satuan Letter spacing adalah % dan px, dan tidak menjelaskan acuan %. Alat ini menghitung % sebagai persentase dari ukuran huruf, jadi bandingkan sekali nilai yang muncul saat Anda mengganti satuan ke px di Figma dengan kolom px alat ini.
• Penyimpanan gambar menggambar ulang contoh pada kanvas, sehingga posisi pergantian baris dapat berbeda dari tampilan layar. Pada peramban yang belum mendukung letterSpacing kanvas (menurut MDN, sebelum Safari 18.4), huruf digambar satu per satu sehingga kerning hilang.
• Nilai pada grafik acuan menurut ukuran ditetapkan Apple, Inter, dan Material 3 untuk font masing-masing. Untuk font lain, pakai hanya sebagai titik awal dan periksa dengan contoh teks.

Tanggal acuan 22 Oktober 2026. Berdasarkan W3C CSS Text Level 3 (Candidate Recommendation Draft 2026-08-14) dan Level 4 (Editor's Draft 2026-08-14), WCAG 2.2 (2024-12-12), MDN browser-compat-data 8.1.6, Apple HIG Typography (diperbarui 2025-12-16), androidx Material 3 TypeScaleTokens, W3C JLREQ, serta pengukuran di Chrome 151.

Sumber

• 01W3C: CSS Text Module Level 3Candidate Recommendation Draft 2026-08-14. Definisi letter-spacing (normal | panjang), tidak ditambahkan di awal dan akhir baris, ligatur opsional, aksara bersambung
• 02W3C: CSS Text Module Level 4Editor's Draft 2026-08-14. letter-spacing menerima %, rasio mengacu pada ukuran huruf yang dipakai
• 03MDN: letter-spacingData kompatibilitas browser-compat-data 8.1.6 (2026-10-15): nilai % di Chrome 145, Firefox 45, Safari 7, letterSpacing kanvas di Chrome 99, Firefox 115, Safari 18.4
• 04W3C WAI: Understanding Success Criterion 1.4.12 Text SpacingAA. Konten tidak boleh hilang saat jarak baris 1,5 kali, jarak paragraf 2 kali, jarak antarhuruf 0,12 kali, dan jarak antarkata 0,16 kali
• 05Google Fonts Knowledge: Tracking / letter-spacingHuruf kapital lebih mudah dibaca dengan jarak lebar, jarak negatif hanya pada ukuran judul besar
• 06Apple: Human Interface Guidelines, TypographyTabel tracking SF Pro menurut ukuran (6 sampai 96pt, 1/1000 em), catatan pembaruan 2025-12-16
• 07Inter: Lab (Dynamic Metrics)Tracking = −0,0223 + 0,185 × e^(−0,1745 × ukuran huruf)
• 08AndroidX: Material 3 TypeScaleTokensUkuran dan jarak (sp) untuk 15 peran, dari Display sampai Label
• 09Adobe: Photoshop Line and character spacingTracking dan kerning diukur dalam 1/1000 em (bantuan InDesign dan Illustrator sama)
• 10Microsoft: Mengubah spasi antar teks di WordTab Tingkat Lanjut pada kotak dialog Font, Penspasian: Diperluas atau Dikonden, satuan pt (dokumentasi VBA Font.Spacing)
• 11Figma Plugin API: LetterSpacingSatuan jarak antarhuruf adalah PIXELS dan PERCENT
• 12Android Developers: TextView.setLetterSpacingletter-spacing ditetapkan dalam satuan em
• 13Apple Developer: NSAttributedString.Key.kernSatuan nilai penyesuai jarak antarhuruf adalah pt (tracking di SwiftUI juga pt)
• 14Tailwind CSS: letter-spacingEnam tingkat, dari tracking-tighter −0.05em sampai tracking-widest 0.1em
• 15W3C: Requirements for Japanese Text Layout (JLREQ)Huruf dirancang dalam kotak persegi dan ditempatkan tanpa jarak tambahan (solid setting)

Pertanyaan yang sering diajukan

Alat yang berkaitan