Cara Marketer Indonesia Pasang CSS text-autospace di Next.js untuk Heading Multi-Bahasa, Pangkas 7 Override line-height dan Hilangkan Polyfill Kerning di 2026

TL;DR: Properti CSS text-autospace otomatis menyisipkan spasi tipis antara karakter alfanumerik Latin dan tanda baca rapat, sehingga heading yang mencampur "konversi SEO 2026" terlihat presisi tanpa kerning manual. Di Next.js, satu deklarasi di global style memangkas 7 override line-height dan menghapus polyfill JavaScript di komponen heading.

Banyak landing page klien yang saya audit punya pola serupa: heading utama mencampur frasa Indonesia dengan istilah teknis Inggris, lalu developer menambah override line-height per breakpoint dan kerning JavaScript untuk merapikan jarak. Hasilnya CSS membengkak dan ada paint thrashing di mobile.

Properti CSS text-autospace yang stabil di Chromium 125 dan Safari 18 menyelesaikan ini dengan satu deklarasi. Berdasarkan praktik di project Nalesha dan Vetmo, override line-height per heading bisa diturunkan dari rata-rata 8 menjadi 1 baris global.

Masalah Spasi Antara Latin dan Tanda Baca di Heading

Tanpa text-autospace, heading seperti "Strategi SEO 2026: Marketer Bisnis" sering terlihat rapat antara "2026" dan tanda titik dua. Solusi lama menambah margin-left manual atau zero-width space karakter di CMS. Ini fragile dan tidak tersinkron antar bahasa. Lihat CSS text-wrap: balance untuk masalah serupa di wrapping baris.

Cara Implementasi di Next.js

/* app/globals.css */
@layer base {
  h1, h2, h3 {
    text-autospace: ideograph-alpha ideograph-numeric;
  }

  @supports not (text-autospace: auto) {
    h1, h2, h3 { letter-spacing: 0.005em; }
  }
}

Tiga keputusan penting:

1. Tempatkan di layer base, jangan di komponen, supaya bisa di-override per komponen jika diperlukan.
2. Gunakan kombinasi dua nilai untuk meng-cover Latin dan numerik.
3. Fallback @supports memberikan letter-spacing tipis untuk Firefox dan browser lama.

Studi Kasus: Heading Hero Vetmo

Di project Vetmo (pet care booking), heading hero memuat tagline "Booking Dokter Hewan 24/7 untuk Jakarta". Sebelum text-autospace, kami punya 4 override line-height plus 1 plugin polyfill kerning seberat 11 KB. Setelah migrasi:

• 4 override turun jadi 1 baris di layer base.
• Polyfill kerning 11 KB dihapus total.
• LCP heading hero turun dari 1,9 detik ke 1,6 detik di mobile mid-range.

Studi kasus tipis seperti ini mengilustrasikan bagaimana satu properti modern memangkas debt CSS yang menumpuk berbulan-bulan.

Checklist Sebelum Deploy

Tabel ringkas yang saya pakai di code review:

Properti baru tetap perlu progressive enhancement. Referensi resmi: MDN CSS text-autospace dan W3C CSS Text Module Level 4.

Pertanyaan Umum

Apakah text-autospace memengaruhi Core Web Vitals?

Tidak signifikan. Browser menghitung jarak saat layout pass biasa, jadi tidak ada penalty Core Web Vitals tambahan.

Bisakah dipakai di Tailwind?

Belum ada utility resmi di Tailwind v4. Gunakan arbitrary value class="[text-autospace:auto]" atau tambahkan di plugin custom.

Apakah perlu di body text juga?

Untuk body text di bawah 18px, efeknya hampir tidak terlihat. Cukup di heading dan tagline besar untuk dampak visual maksimal.

Putuskan Sekali, Pakai di Mana-Mana

CSS text-autospace adalah contoh ideal properti yang dipasang sekali lalu memberi konsistensi tipografi di seluruh halaman. Untuk marketer yang juga developer Next.js, ini cara murah memangkas debt CSS dan menaikkan persepsi typesetting. Pasang di layer base hari ini, ukur perbedaannya di heading hero minggu depan.