Cara Marketer Indonesia Pasang CSS text-wrap balance di Next.js untuk Heading Landing Page yang Selalu Rapi 2026

TL;DR: text-wrap: balance adalah satu baris CSS yang membuat heading landing page Anda rapi otomatis tanpa JavaScript. Cukup tambahkan text-wrap: balance ke h1, h2, h3 di globals.css Next.js atau pakai utilitas Tailwind text-balance. Dukungan browser sudah 92% per April 2026 dan tidak mengganggu Core Web Vitals.

Dalam beberapa proyek landing page yang saya tangani sepanjang 2025, ada satu detail tipografi yang sering luput dari radar marketer: heading hero yang baris terakhirnya cuma berisi satu kata. Secara teknis tidak salah, tapi secara visual terasa "lompat" dan menurunkan persepsi profesional brand.

Saat membangun ulang landing page Nalesha (e-commerce parfum) Oktober 2025, kami mengganti <br> manual di semua heading dengan satu deklarasi text-wrap: balance. Hasilnya: tim copywriter bisa edit headline sebanyak yang mereka mau tanpa khawatir layout rusak. Hemat sekitar 3 jam revisi per kampanye.

Masalah Heading "Yatim" di Landing Page

Heading "yatim" adalah istilah tipografi untuk satu kata yang sendirian di baris terakhir suatu blok teks. Di landing page, ini sering terjadi pada judul hero, judul kartu produk, dan headline pricing tier. Sebelum text-wrap balance muncul, ada tiga cara umum untuk mengatasinya:

Browser modern menghitung pemecahan baris paling seimbang saat render. Tidak ada JavaScript yang dieksekusi dan tidak ada blocking pada LCP. Lihat dokumentasi resmi text-wrap di MDN untuk spesifikasi lengkap.

Cara Pasang di Next.js dan Tailwind

Buka app/globals.css di project Next.js 15 Anda. Tambahkan blok berikut setelah @import "tailwindcss":

@layer base {
  h1, h2, h3 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
}

Penjelasan: balance untuk heading pendek yang butuh keseimbangan visual. pretty untuk paragraf panjang yang ingin menghindari kata "yatim" di baris terakhir saja. Pelajari container queries untuk komponen yang adaptif ukuran kontainer.

Kalau Anda pakai Tailwind 3.4 ke atas, utilitas text-balance dan text-pretty sudah tersedia. Contoh komponen Hero atom:

export function HeroTitle({ children }: { children: React.ReactNode }) {
  return (
    <h1 className="text-4xl md:text-6xl font-bold text-balance">
      {children}
    </h1>
  );
}

Untuk project saya yang masih pakai Tailwind 3.3 atau lebih lama, tambahkan plugin custom di tailwind.config.ts:

plugins: [
  function ({ addUtilities }) {
    addUtilities({
      '.text-balance': { 'text-wrap': 'balance' },
      '.text-pretty': { 'text-wrap': 'pretty' },
    });
  },
],

Studi Kasus dari Portfolio

Saat membangun ulang website Vetmo (pet care platform) untuk landing kampanye vaksinasi 2025, headline hero versi A berbunyi "Vaksinasi Lengkap Kucing Anda Lebih Aman di Rumah". Tanpa text-wrap: balance, di viewport 768px Bahasa Indonesia ini pecah jadi tiga baris dengan baris terakhir hanya berisi "Rumah". Setelah balance dipasang, distribusi jadi dua baris seimbang dan area di bawah heading tetap dapat napas.

Pada landing Yuanita Sekar untuk programa coaching karir, kami pakai text-balance di judul-judul kartu testimoni. Total ada 18 kartu dengan headline panjang berbeda. Sebelumnya tim desainer harus tweak max-width manual per kartu. Dengan balance, satu rule di globals.css selesaikan semua. Lihat juga praktik LCP untuk hero loading optimal.

Pertanyaan Umum

Apakah text-wrap balance memperlambat website?

Tidak signifikan. Pengukuran web.dev menunjukkan dampak di bawah 5 ms per render heading. Bandingkan dengan library JavaScript seperti Balance Text yang menambah 2-4 KB ke bundle dan butuh mounting di client.

Bagaimana fallback untuk browser lama?

Tidak perlu polyfill. Browser yang belum support akan memakai pemecahan baris default. Heading tidak akan rusak, hanya kehilangan efek seimbang. Per April 2026, dukungan global di Can I Use mencapai 92%.

Pakai balance atau pretty untuk paragraf body?

Pakai pretty. balance dirancang untuk teks pendek di bawah 6 baris seperti heading dan tagline. pretty cocok untuk paragraf panjang yang ingin mencegah baris terakhir hanya berisi satu kata.

Apakah perlu disable balance di mobile?

Tidak. Browser otomatis mengoptimalkan kalkulasi untuk setiap viewport. Justru di mobile efek balance lebih terasa karena ruang lebih sempit dan kata "yatim" lebih mengganggu.

Bagaimana cek dampaknya di production?

Buka Lighthouse di Chrome DevTools dan bandingkan skor CLS sebelum dan sesudah. Karena balance dieksekusi sebelum paint, tidak ada layout shift yang terdeteksi. Lihat juga panduan Core Web Vitals di web.dev untuk metrik lengkap.

Penutup: Detail Kecil yang Membuat Brand Terlihat Premium

text-wrap: balance adalah salah satu contoh terbaik bagaimana satu baris CSS bisa menggantikan trial-error desain manual selama berjam-jam. Bagi marketer yang menggarap landing page bisnis di Indonesia, pasang ini di globals.css Next.js sebagai default. Heading hero, judul kartu produk, dan headline pricing akan tampil rapi tanpa intervensi setiap kali copy diubah. Detail seperti ini yang membedakan landing page "buatan tim" dengan landing page "buatan agensi".