Tipografi

Satu keluarga huruf, sepuluh langkah ukuran, dan empat berat — dipakai sama di seluruh komponen.

Nunito

Seluruh library memakai satu keluarga huruf, Nunito, lewat token --font-sans. @nuxt/fonts membaca token itu dan menyediakan berkasnya sendiri dari server aplikasi — tidak ada permintaan ke Google Fonts saat halaman dibuka, dan tidak ada kedipan huruf pengganti.

Aplikasi tidak perlu memasang apa pun. Kalau sebuah halaman butuh huruf lain untuk kebutuhan khusus, atur di halaman itu; jangan mengganti --font-sans, karena seluruh komponen ikut berubah.

Waste4Change

Nunito · 0123456789 · Timbangan 2,1 ton · PU-0042

Skala

Tujuh langkah, dan semuanya token bernama. 15px, 13px, dan 11px pernah ada sebagai nilai arbitrer lalu dihapus (#077): tiga ukuran yang hanya berbeda satu-dua piksel tidak menambah kejelasan, hanya menambah keputusan yang harus diambil setiap kali. text-2xs satu-satunya langkah yang ditambahkan sendiri di atas skala Tailwind, karena 12px masih terlalu besar untuk label di dalam penanda dan label navigasi bawah.

Token	px / tinggi baris	Dipakai untuk	Contoh
`text-2xl`	24 / 32	Angka besar StatCard ukuran md	Timbangan 2,1 ton
`text-xl`	20 / 28	Judul section di situs docs, angka besar StatCard ukuran sm	Timbangan 2,1 ton
`text-lg`	18 / 28	Judul varian lg dan teks pengantar yang perlu menonjol	Timbangan 2,1 ton
`text-base`	16 / 24	Hanya varian lg sebuah komponen — diminta pemakainya	Timbangan 2,1 ton
`text-sm`	14 / 20	Ukuran kerja: isi, label form, baris tabel, tombol md, judul kartu dan dialog, blok kode	Timbangan 2,1 ton
`text-xs`	12 / 16	Label kecil, hint, meta, badge, tombol sm, judul kelompok	Timbangan 2,1 ton
`text-2xs`	10 / 14	Label pada varian sm, angka di dalam penanda, label navigasi bawah	Timbangan 2,1 ton

Tidak ada langkah di atas text-2xldi dalam komponen. Judul halaman adalah pekerjaan aplikasi, bukan library, dan angka yang lebih besar dari itu biasanya tanda bahwa satu kartu sedang mencoba menjadi seluruh halaman.

Ukuran display

Situs ini sendiri memakai ukuran yang lebih besar untuk judul halamannya: text-3xl sampai text-5xl di halaman utama dan judul halaman docs. Itu ukuran display — untuk halaman yang dibaca, bukan untuk antarmuka yang dipakai — dan tidak ada satu komponen pun yang memakainya.

Aturan yang sama berlaku di aplikasi: judul halaman adalah pekerjaan halaman, jadi silakan pakai ukuran display di sana. Yang tidak boleh adalah memakainya di dalam komponen — kartu, tabel, dan dialog punya skalanya sendiri supaya semua halaman tetap terasa satu keluarga.

Berat

Ringkasan penjemputanfont-normalIsi kalimat dan nilai data.

Ringkasan penjemputanfont-semiboldLabel, judul panel, tombol, dan apa pun yang dipindai mata lebih dulu.

Ringkasan penjemputanfont-boldAngka ringkasan, judul kartu, nama langkah aktif.

Ringkasan penjemputanfont-extraboldJudul halaman di situs docs ini. Tidak dipakai di dalam komponen.

Tidak ada font-medium. Antara normal dan semibold, Nunito tidak memberi perbedaan yang cukup terbaca pada 12–14px — dan tiga berat yang mirip membuat satu halaman terlihat disusun sepotong-sepotong.

Angka dan data pengguna

Dua kebiasaan yang dipakai seluruh komponen, dan sebaiknya ikut dipakai di halaman aplikasi:

tabular-nums untuk angka yang bisa berubah — nilai StatCard, nomor langkah Stepper, persentase Progress, kolom angka di tabel. Tanpa itu, lebar digit berbeda dan angkanya bergoyang setiap kali diperbarui.
wrap-anywhere pada teks yang datang dari pengguna: alamat, nama berkas, atau catatan tanpa spasi. Tanpa itu satu kata panjang melebarkan kartunya dan menggeser tata letak.

vue

<!-- Angka yang bisa berubah: lebar digit dibuat sama supaya
     tidak bergeser saat nilainya naik. -->
<p class="text-2xl font-bold tabular-nums">{{ jumlah }}</p>

<!-- Data dari pengguna: boleh dipotong di mana saja supaya tidak
     merusak tata letak. -->
<dd class="min-w-0 wrap-anywhere">{{ alamat }}</dd>