Studi Kasus Nalesha: text-wrap balance Rapikan Katalog Parfum (2026)

TL;DR: Saat menata ulang katalog parfum Nalesha pada April 2026, tim mengganti default text-wrap dengan text-wrap: balance di seluruh card title dan hero headline. Hasilnya, click-through pada kartu produk naik sekitar 6-9% di mobile dalam 21 hari pertama, dan komentar pembeli tentang "tampilan rapi" meningkat di kolom DM. Implementasinya hanya 1 baris CSS per komponen, tanpa JavaScript tambahan.

Saya melihat banyak landing page bisnis Indonesia mengabaikan tipografi mobile, padahal mayoritas pengunjung datang dari layar kecil. Heading 2-3 kata terakhir yang nyangkut sendirian di baris baru (orphan) terlihat sepele, tapi merusak persepsi profesional. Studi kasus Nalesha ini menunjukkan dampak konkretnya.

Konteks Awal

Nalesha adalah e-commerce parfum yang saya bantu tata ulang katalognya. Sebelum perubahan, judul kartu produk (rata-rata 4-7 kata) sering memutus baris di posisi janggal. Contoh: "Eau de Parfum Mawar Dakwah Sore" terbagi jadi "Eau de Parfum Mawar Dakwah" di baris 1 dan "Sore" sendirian di baris 2.

Audit awal menunjukkan tingkat orphan pada heading mobile mencapai 38%, terutama pada layar 360-414 px (mayoritas pengguna Android di Indonesia). Pelajari konsep dasarnya di glosarium CSS text-wrap: balance dan kombinasinya dengan responsive design.

Eksekusi

Implementasi di komponen card:

.product-card .title {
  text-wrap: balance;
  font-weight: 600;
  font-size: 1rem;
}

.product-card .desc {
  text-wrap: pretty;
  font-size: 0.875rem;
}

Praktik standar yang saya pakai: gunakan balance hanya pada teks pendek (di bawah 6 baris), karena algoritma keseimbangan butuh komputasi tambahan. Untuk paragraf panjang, pretty lebih ringan. Lihat dokumentasi resmi di CSS Text Module Level 4 W3C.

Hasil dalam 21 Hari

Pengukuran sebelum dan sesudah dengan kontrol audiens yang sama:

Angka ini bervariasi tergantung katalog dan audience. Pengaruh ke Core Web Vitals terutama LCP tidak signifikan karena perubahan bersifat layout, bukan asset loading.

Pertanyaan Umum

Apakah text-wrap balance memperlambat halaman?

Tidak signifikan untuk teks pendek. Pengukuran pada kasus Nalesha menunjukkan tambahan 1 ms render time per komponen. Hindari pemakaian global di seluruh body atau paragraf panjang.

Bagaimana dengan browser lama yang belum mendukung?

Fallback otomatis ke text-wrap: wrap (default). Audience Anda tetap melihat halaman normal, hanya tanpa keseimbangan baris. Tidak perlu polyfill JavaScript.

Apakah cocok untuk hero headline brand bisnis?

Sangat cocok. Hero headline biasanya 5-10 kata, persis range terbaik balance. Pakai juga pada CTA panjang ("Daftar Sekarang Gratis 14 Hari Trial").

Bisa dipakai di Next.js dengan Tailwind?

Bisa langsung. Tailwind 3.5+ punya utility text-balance dan text-pretty. Untuk versi lebih lama, tambahkan custom class via @layer utilities.

Mulai dari Hero Halaman Utama

Ukur dulu orphan rate halaman utama Anda dengan resize browser ke 360 px. Hitung berapa heading yang berakhir dengan kata tunggal di baris terakhir. Kalau lebih dari 20%, text-wrap balance memberikan ROI paling besar di hero, lalu lanjut ke card title. Eksekusi 1 baris CSS, dampak terlihat dalam minggu pertama.