A Font Experiment That Ended in 22 Minutes

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.

One Line, Back and Forth

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, experiment starts */
--font-heading: var(--font-source-serif);

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

That was the entire diff. One line to switch, one line to undo. No find-and-replace of a font name across a dozen components, because not a single component knows its own font's name. Two commits, two directions, the exact same file, and that was the full cost of that evening's visual experiment.

What Failed, and What Survived

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.

The Scale That Survived

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 maksimal 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.

My conviction only got firmer after this: taste may be questioned, structure may not. 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.

Sources

[4] Next.js — Font Optimization

[5] MDN — clamp()

[6] Chrome Developers — text-wrap: balance