Tipografi
Karakter huruf di materi XSERIES, kandidat font untuk produk digital (gratis dan berlisensi), skala ukuran, dan aturan angka untuk skor serta statistik.
Peringatan
Nama font resmi XSERIES belum diketahui (V3). Semua identifikasi di bawah berdasarkan pengamatan visual dari screenshot, bukan file sumber. Minta file font atau brand guideline ke klien sebelum produksi. Font di contoh halaman ini (Barlow Condensed dan Inter) hanya pengganti sementara.
Yang terlihat di materi
Kelompokkan cara huruf dipakai di materi, dan terlihat ada dua suara yang sudah ada, ditambah satu yang belum ada.
Keras, untuk nama dan headline
- HeadlineGrotesk kapital, sangat condensed, tebal, kadang miring. "HERE'S WHAT YOU NEED TO KNOW ABOUT", "INDONESIA ARENA"
- Nama pemainCondensed tebal, miring, ukuran paling besar di kartu. "MISTER ALOY", "SAFEE SALI"
Lebar, khusus wordmark
- WordmarkHuruf lebar (extended) dengan gradasi, bukan font teks. "X SERIES-3"
Masih tipis di materi, perlu ditambah untuk produk digital
- Label kecilSans kapital kecil dengan tracking lebar. "CONFIRMED FOR", "SUPER SAFEE"
- Body FAQSans regular putih di atas hitam, ukuran kecil. Isi slide FAQ
Kesimpulan: XSERIES memakai dua suara. Yang pertama condensed dan keras untuk nama dan headline. Yang kedua extended untuk wordmark. Produk digital perlu suara ketiga, sans yang nyaman untuk teks panjang.
Kandidat font
Dua spesimen ini adalah rekomendasi awal. Lihat bagaimana display terasa keras dan miring, sementara teks tetap tenang dan mudah dibaca.
abcdefghijklmnopqrstuvwxyz
0123456789 16–15 · 24″
- Headline, nama pemain, skor besar
- Banyak bobot dan italic, gratis (OFL)
- Ganti dengan font resmi begitu V3 terjawab
abcdefghijklmnopqrstuvwxyz
0123456789 16–15 · 24″
- UI, artikel, aturan, FAQ
- Angka tabular, terbaca di ukuran kecil
- Gratis (OFL), mendukung karakter Indonesia
Daftar lengkap kandidat, termasuk opsi berlisensi:
Display (headline, nama pemain, skor besar)
| Font | Lisensi | Catatan |
|---|---|---|
| Anton | Gratis (OFL) | Paling dekat dengan headline XS-3. Hanya satu bobot |
| Barlow Condensed | Gratis (OFL) | Banyak bobot dan italic. Aman untuk sistem |
| Oswald | Gratis (OFL) | Variable font. Lebih lembut |
| Druk | Berlisensi (Commercial Type) | Standar poster olahraga premium |
| Tusker Grotesk | Berlisensi (The Designers Foundry) | Banyak lebar. Kuat untuk nama pemain |
Teks (UI, artikel, aturan, FAQ)
| Font | Lisensi | Catatan |
|---|---|---|
| Inter | Gratis (OFL) | Angka tabular, sangat terbaca di ukuran kecil |
| Mona Sans | Gratis (OFL) | Dipakai di dokumentasi ini. Punya lebar condensed sampai expanded dalam satu keluarga |
| Geist | Gratis (OFL) | Modern dan netral |
Tip
Rekomendasi awal: Barlow Condensed (display) + Inter (teks). Keduanya gratis, mendukung karakter Indonesia, punya italic, dan ringan untuk web. Kalau anggaran ada, Druk atau Tusker untuk display akan terasa jauh lebih premium. Keputusan dicatat di Decision log.
Skala ukuran (web)
Contoh di bawah memakai ukuran desktop, jadi lihat jarak antar-level, bukan ukuran absolutnya. Display (display-* dan title) memakai Barlow Condensed, sisanya Inter.
Ukuran per perangkat dan pemakaiannya:
| Token | Mobile | Desktop | Pemakaian |
|---|---|---|---|
display-xl | 56px | 120px | Nama pemain di halaman profil, skor final |
display-l | 40px | 72px | Headline hero |
display-m | 32px | 48px | Judul section |
title | 22px | 28px | Judul kartu, nama tim |
body-l | 18px | 20px | Lead paragraph |
body | 16px | 16px | Teks utama |
label | 12px | 13px | Label kapital, tracking +0,08em |
Aturan:
- Display selalu kapital, line-height 0,9–1,0, tracking -0,01em.
- Italic hanya untuk nama pemain dan momen aksi (gol, kartu aktif). Jangan dipakai untuk paragraf.
- Teks panjang maksimal 70 karakter per baris.
Angka
Skor, statistik, shot clock, dan harga tiket adalah konten utama. Aturannya:
- Gunakan angka tabular (
font-variant-numeric: tabular-nums) di tabel statistik dan shot clock supaya angka tidak bergeser saat berubah. - Format harga:
IDR 225.000(sesuai materi GOERS) atauRp225.000. Pilih satu dan pakai konsisten. - Skor besar memakai font display. Statistik memakai font teks.
Sumber
- Highlight FAQ, TICKET, dan PLAYERS di Instagram @xseries___
- Google Fonts, Commercial Type, The Designers Foundry
Benang merah halaman ini
Halaman yang menjadi dasar halaman ini, dan halaman lain yang memakainya.