Eksperimen Font yang Tamat dalam 22 Menit

Barusan ngulik timeline commit, mata saya berhenti di satu baris revert: 9902cb0 ngembalikan font heading ke semula, 22 menit setelah commit yang nge-switch. Dua puluh dua menit. Ide pagi harinya adalah nukar identitas visual semua heading di sebuah company profile, dan eksperimennya resmi tamat sebelum kopi di meja dingin.

Kesan pertama jelas: buang waktu. Nggak ada yang berubah dari halaman, nggak ada yang gagal, cuma bolak-balik ke titik awal. Tapi pas diff-nya dibaca pelan-pelan, justru itu bagian paling menarik. Seluruh eksperimen itu dibuka dan ditutup dengan satu baris kode.

Satu Baris Bolak-Balik

Semua font di project ini di-import dari next/font/google di layout: Open Sans buat body, Poppins buat heading, lalu dua kandidat baru waktu itu, Source Serif 4 dan Inter. Font Google yang lewat next/font di-self-host: asetnya jadi bagian dari deployment kita sendiri, nggak ada request ke server Google pas halaman dibuka [4]. Nambah kandidat font jadi nggak nambah beban runtime sama sekali.

Component masing-masing font cuma nge-expose CSS variable. Lalu semua heading, di mana pun, baca dari satu token. Waktu eksperimen, token itu menunjuk ke serif:

/* tokens.css - commit 73071b9, eksperimen mulai */
--font-heading: var(--font-source-serif);

/* tokens.css - commit 9902cb0, 22 menit kemudian */
--font-heading: var(--font-poppins);

Itu dia seluruh diff-nya. Satu baris pasang, satu baris cabut. Nggak ada cari-dan-ganti nama font di belasan component, karena nggak ada satu pun component yang tau nama font-nya sendiri. Dua commit, dua arah, satu file yang sama persis, dan itulah seluruh biaya eksperimen visual sore itu.

Yang Gagal, dan yang Selamat

Yang bikin saya makin suka sama arc ini: revert-nya nggak mengubur semuanya. Hero slogan masih memakai Source Serif 4 italic lewat [font-family:var(--font-source-serif),Georgia,serif] di satu elemen, dan nav tetap Inter, di-scope lewat arbitrary property. Eksperimen yang dicatat dalam commit kecil itu granular. Bagian yang kalah bisa dibuang, bagian yang menang dipertahankan, tanpa drama.

Bandingin kalo identitas visual ditempel langsung: nama font hardcode di class tiap component. Mau nyoba serif? Sentuh semua file. Mau undo? Sentuh lagi semua file itu, semoga nggak ada yang kelewat. Eksperimen jadi mahal sebelum dimulai, dan mahalnya itu yang bikin orang males mencoba.

Skala yang Bertahan

Layer yang nggak tersentuh sama sekali selama bolak-balik: skala tipografi global di globals.css. Heading h1 kecilnya 1.875rem dan besar maksimal 3.75rem lewat clamp dengan slope viewport di tengah. Saran MDN soal clamp buat teks: nilai maximal minimal dua kali nilai minimalnya, biar pas di-zoom 200 persen teks masih ikut membesar [5]. Headings sendiri duduk di weight 600, line-height 1.2, dan sedikit tracking rapat. Komposisi itu yang bikin halaman tetap punya identitas, meski nama font-nya kebetulan baru berganti dua kali.

Di layer yang sama ada text-wrap: balance buat semua heading. Chrome menargetkan properti ini ke headline, dan browser membatasi ke teks enam baris atau kurang karena proses pencarian pembagian barisnya emang mahal [6]. Buat heading marketing yang isinya dua sampai lima kata, angka enam jauh di atas kebutuhan. Kelas .lead pelengkap paragraf pembuka, dan dia juga awet lewat pergantian font.

Pendapat saya jadi makin tegas setelah kejadian ini: selera boleh dipertanyakan, struktur nggak boleh. Nama Source Serif 4 di heading ternyata kebaca terlalu bookish buat perusahaan keamanan, dan itu opini yang bisa beda di mata orang lain. Tapi kalo struktur token-nya bener, beda selera nggak pernah jadi perdebatan mahal. Ganti satu baris, render, keputusan.

Eksperimen yang tamat dalam 22 menit itu nggak ngehasilin font baru buat heading. Dia ngehasilin sesuatu yang lebih tahan lama: keyakinan bahwa mengganti arah visual di project ini itu murah. Dalam sistem desain, kemampuan untuk salah dengan cepat itu bukan bonus, itu fitur yang sengaja dibangun.

Sumber

[4] Next.js — Font Optimization

[5] MDN — clamp()

[6] Chrome Developers — text-wrap: balance