Typography
The character of the type in XSERIES material, font candidates for the digital product (free and licensed), the size scale, and number rules for scores and stats.
Warning
The official XSERIES font name is not yet known (Official fonts). All identification below is based on visual observation of screenshots, not source files. Ask the client for the font files or brand guidelines before production. The fonts in this page's examples (Barlow Condensed and Inter) are only temporary stand-ins.
What is visible in the material
Grouping how the type is used in the material shows two voices that already exist, plus one that does not exist yet.
Hard, for names and headlines
- HeadlineCapital grotesk, very condensed, bold, sometimes italic. "HERE'S WHAT YOU NEED TO KNOW ABOUT", "INDONESIA ARENA"
- Player nameBold condensed, italic, the largest size on the card. "MISTER ALOY", "SAFEE SALI"
Wide, for the wordmark only
- WordmarkWide (extended) letters with a gradient, not a text font. "X SERIES-3"
Still thin in the material, needs to be added for the digital product
- Small labelSmall-capital sans with wide tracking. "CONFIRMED FOR", "SUPER SAFEE"
- FAQ bodyRegular white sans on black, small size. The content of the FAQ slides
Conclusion: XSERIES uses two voices. The first is condensed and hard, for names and headlines. The second is extended, for the wordmark. The digital product needs a third voice, a sans that is comfortable for long text.
Font candidates
These two specimens are the initial recommendation. See how the display feels hard and italic, while the text stays calm and easy to read.
abcdefghijklmnopqrstuvwxyz
0123456789 16–15 · 24″
- Headlines, player names, big scores
- Many weights and italic, free (OFL)
- Replace with the official font once Official fonts is answered
abcdefghijklmnopqrstuvwxyz
0123456789 16–15 · 24″
- UI, articles, rules, FAQ
- Tabular numbers, readable at small sizes
- Free (OFL), supports Indonesian characters
The full list of candidates, including licensed options:
Display (headlines, player names, big scores)
| Font | License | Notes |
|---|---|---|
| Anton | Free (OFL) | Closest to the XS-3 headline. Only one weight |
| Barlow Condensed | Free (OFL) | Many weights and italic. Safe for a system |
| Oswald | Free (OFL) | Variable font. Softer |
| Druk | Licensed (Commercial Type) | The standard for premium sports posters |
| Tusker Grotesk | Licensed (The Designers Foundry) | Many widths. Strong for player names |
Text (UI, articles, rules, FAQ)
| Font | License | Notes |
|---|---|---|
| Inter | Free (OFL) | Tabular numbers, very readable at small sizes |
| Mona Sans | Free (OFL) | Used in these docs. Has widths from condensed to expanded in one family |
| Geist | Free (OFL) | Modern and neutral |
Tip
Initial recommendation: Barlow Condensed (display) + Inter (text). Both are free, support Indonesian characters, have italic, and are light for the web. If there is budget, Druk or Tusker for display would feel much more premium. The decision is recorded in the Visual decision log.
Size scale (web)
The examples below use desktop sizes, so look at the spacing between levels, not the absolute sizes. Display (display-* and title) uses Barlow Condensed, the rest uses Inter.
Size per device and use:
| Token | Mobile | Desktop | Use |
|---|---|---|---|
display-xl | 56px | 120px | Player name on the profile page, final score |
display-l | 40px | 72px | Hero headline |
display-m | 32px | 48px | Section title |
title | 22px | 28px | Card title, team name |
body-l | 18px | 20px | Lead paragraph |
body | 16px | 16px | Main text |
label | 12px | 13px | Capital label, tracking +0.08em |
Rules:
- Display is always in capitals, line-height 0.9–1.0, tracking -0.01em.
- Italic is only for player names and action moments (goals, active cards). Do not use it for paragraphs.
- Long text is 70 characters per line at most.
Numbers
Scores, stats, the shot clock, and ticket prices are the main content. The rules:
- Use tabular numbers (
font-variant-numeric: tabular-nums) in stats tables and the shot clock so numbers do not shift when they change. - Price format:
IDR 225.000(as in GOERS material) orRp225.000. These examples keep the Indonesian number format on purpose, because they describe how the product UI should show rupiah. Pick one and use it consistently. - Big scores use the display font. Stats use the text font.
Sources
- FAQ, TICKET, and PLAYERS highlights on Instagram @xseries___
- Google Fonts, Commercial Type, The Designers Foundry
How this page connects
Pages this one builds on, and other pages that use it.