Cara Marketer Indonesia Pasang CSS text-spacing-trim di Next.js untuk Hero & Heading CJK, Pangkas Kerning Manual dan Hilangkan 4 Override Tailwind di 2026

TL;DR: CSS text-spacing-trim adalah properti baseline yang merapikan ruang kosong di awal dan akhir karakter CJK (Tionghoa, Jepang, Korea) serta tanda baca bahasa Indonesia yang dipakai berdampingan. Dengan satu baris CSS di global stylesheet Next.js, marketer dapat menghilangkan 3 sampai 4 override Tailwind kerning manual di hero dan heading multi-bahasa.

Dalam beberapa proyek website klien terakhir yang menyasar pasar Asia Tenggara, pola masalah berulang: hero atau heading yang mencampur Bahasa Indonesia dengan kutipan Jepang atau merek dengan karakter Tionghoa terlihat tidak rapi. Spasi di sekitar tanda baca CJK terasa berlebihan dan tim desain biasanya menambal dengan letter-spacing manual atau utility Tailwind tracking-tight di beberapa tempat. Hasilnya inkonsisten dan kode menjadi sulit dirawat.

CSS text-spacing-trim mengatasi ini di level browser. Properti ini termasuk Baseline 2026 dan sudah didukung Chromium, Safari Technology Preview, dan Firefox Nightly.

Apa Masalah yang Diselesaikan

Tanpa text-spacing-trim, karakter CJK yang punya internal sidebearings menambah ruang ekstra ketika berpadanan dengan huruf Latin. Hasil visual: spasi 4-8 piksel terlihat di sebelum atau setelah tanda baca. Solusi lama: tambah letter-spacing -0.05em di hero, lalu reset di paragraf, lalu override lagi untuk Bahasa Inggris. Lihat alur masalah serupa di dokumentasi MDN tentang text spacing.

Cara Pasang di Next.js

Buka app/globals.css, tambahkan satu blok ke selector root:

:root {
  text-spacing-trim: trim-start;
}

h1, h2, h3 {
  text-spacing-trim: space-first;
}

Cukup itu. Tidak perlu plugin, tidak perlu utility tambahan, dan kompatibel dengan Tailwind v4 di Next.js 15 App Router. Detail spek tertaut di draft CSS Text Module Level 4.

Studi Kasus Implementasi

Saat memperbarui hero situs Atmo LMS yang menampilkan kutipan filosofi belajar dalam huruf Jepang berdampingan teks Bahasa Indonesia, sebelumnya hero memakai 4 utility Tailwind kerning manual dan satu CSS variable untuk gap karakter. Setelah migrasi ke text-spacing-trim, 4 override dihapus dan total CSS hero turun sekitar 1,2 KB tanpa kompres. Tampilan visual lebih konsisten lintas browser modern.

Pendekatan serupa juga dipakai di proyek Yuanita Sekar (personal branding coaching) yang menulis blog bilingual Indonesia-Mandarin sederhana. Sebelumnya tim desain menulis CSS khusus untuk paragraf tertentu. Dengan text-spacing-trim di root, kebutuhan CSS khusus per paragraf hilang.

Pertanyaan Umum

Apakah text-spacing-trim mempengaruhi performa rendering?

Tidak signifikan. Properti ini dievaluasi sekali saat layout dan tidak memicu reflow tambahan. Dampak pada Largest Contentful Paint tidak terdeteksi di pengukuran lapangan.

Apakah perlu fallback untuk browser lama?

Browser yang belum dukung akan mengabaikan properti dengan aman. Tidak ada layout shift. Tetap bisa dipasang di production.

Apakah cocok untuk konten tanpa CJK?

Aman. Untuk konten Latin murni, properti ini tidak menghasilkan perubahan visual. Tidak ada penalti.

Apakah berbeda dari letter-spacing atau kerning?

Berbeda. Letter-spacing mengatur jarak antar semua karakter. text-spacing-trim hanya membersihkan ruang ekstra dari karakter CJK yang punya internal sidebearings.

Penutup: Properti Kecil, Dampak Maintain Besar

Detail tipografi sering dianggap nice to have. Kenyataannya, override manual yang berserakan adalah utang teknis yang menumpuk seiring pertumbuhan konten. Satu baris CSS standar lebih sehat daripada lima utility class tersebar.