---
title: Tipografi
intro: Karakter huruf di materi XSERIES, kandidat font untuk produk digital (gratis dan berlisensi), skala ukuran, dan aturan angka untuk skor serta statistik.
updated: 1 Nov 2026
status: Hipotesis
---

> [!WARNING]
> Nama font resmi XSERIES **belum diketahui** ([V3](/research/pertanyaan-terbuka/#q-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

![FAQ XS-3](/assets/evidence/xs3-faq-cover.jpg "Headline 'HERE'S WHAT YOU NEED TO KNOW ABOUT': grotesk kapital, sangat condensed, tebal. Sumber: highlight FAQ IG @xseries___.")
![Player card](/assets/evidence/xs3-players-1.jpg "Nama pemain (MISTER ALOY, SAFEE SALI, KITINGS, HAMID): condensed tebal, kapital, sedikit miring. Sumber: IG @xseries___.")

Kelompokkan cara huruf dipakai di materi, dan terlihat ada dua suara yang sudah ada, ditambah satu yang belum ada.

```viz-compare
## Suara 1: condensed
tone: stage
sub: Keras, untuk nama dan headline
- Headline | Grotesk kapital, sangat condensed, tebal, kadang miring. "HERE'S WHAT YOU NEED TO KNOW ABOUT", "INDONESIA ARENA"
- Nama pemain | Condensed tebal, miring, ukuran paling besar di kartu. "MISTER ALOY", "SAFEE SALI"
## Suara 2: extended
tone: stage
sub: Lebar, khusus wordmark
- Wordmark | Huruf lebar (extended) dengan gradasi, bukan font teks. "X SERIES-3"
## Suara 3: teks
tone: neutral
sub: Masih tipis di materi, perlu ditambah untuk produk digital
- Label kecil | Sans kapital kecil dengan tracking lebar. "CONFIRMED FOR", "SUPER SAFEE"
- Body FAQ | Sans 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.

```viz-fonts
## Barlow Condensed
family: 'Barlow Condensed', sans-serif
role: Display (pengganti sementara)
sample: SAFEE SALI 16–15
italic: yes
- Headline, nama pemain, skor besar
- Banyak bobot dan italic, gratis (OFL)
- Ganti dengan font resmi begitu [V3](/research/pertanyaan-terbuka/#q-v3) terjawab
## Inter
family: 'Inter', sans-serif
role: Teks
sample: Kartu bisa membalik skor
- UI, berita, 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](https://fonts.google.com/specimen/Anton) | Gratis (OFL) | Paling dekat dengan headline XS-3. Hanya satu bobot |
| [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed) | Gratis (OFL) | Banyak bobot dan italic. Aman untuk sistem |
| [Oswald](https://fonts.google.com/specimen/Oswald) | Gratis (OFL) | Variable font. Lebih lembut |
| [Druk](https://commercialtype.com/catalog/druk) | Berlisensi (Commercial Type) | Standar poster olahraga premium |
| [Tusker Grotesk](https://www.thedesignersfoundry.com/tusker-grotesk) | Berlisensi (The Designers Foundry) | Banyak lebar. Kuat untuk nama pemain |

### Teks (UI, berita, aturan, FAQ)

| Font | Lisensi | Catatan |
|---|---|---|
| [Inter](https://fonts.google.com/specimen/Inter) | Gratis (OFL) | Angka tabular, sangat terbaca di ukuran kecil |
| [Mona Sans](https://github.com/github/mona-sans) | Gratis (OFL) | Punya lebar condensed sampai expanded dalam satu keluarga |
| [Geist](https://vercel.com/font) | 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, keputusan font sementara](/visual-direction/log-keputusan/#vd-06).

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

```viz-typescale
- display-xl | 120/114 | 800 · mobile 56px | Safee Sali | display
- display-l | 72/70 | 800 · mobile 40px | The Unorthodox | display
- display-m | 48/48 | 800 · mobile 32px | Jadwal laga | display
- title | 28/32 | 700 · mobile 22px | Grim Reaper | display
- body-l | 20/30 | 400 · mobile 18px | Legenda dunia, pemain pro, dan kreator di satu lapangan. | text
- body | 16/24 | 400 · mobile 16px | Satu tim tidak boleh menguasai bola lebih dari 24 detik. | text
- label | 13/16 | 600 · mobile 12px | CONFIRMED FOR · TRACKING +0,08EM | text
```

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:

- Semua token display selalu **kapital**, tracking -0,01em. Ukuran besar (`display-xl`, `display-l`, `display-m`) memakai line-height 0,9–1,0. `title` lebih longgar (28/32, sekitar 1,15) supaya judul kartu dua baris tidak bertabrakan.
- 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) atau `Rp225.000`. Pilih satu dan pakai konsisten.
- Skor besar memakai font display. Statistik memakai font teks.

## Dasar riset

- Highlight FAQ, TICKET, dan PLAYERS di [Instagram @xseries___](https://www.instagram.com/xseries___/)
- [Google Fonts](https://fonts.google.com/), [Commercial Type](https://commercialtype.com/), [The Designers Foundry](https://www.thedesignersfoundry.com/)