Typography¶
Four fonts, each with one job. All are free to use on the web (SIL Open Font License).
The fonts may change
A new font is being chosen in chilichip-brand #2. The tokens keep today's fonts until then. Products that use --cc-font-* get the new font with one change.
Fonts¶
Make a game tonight
Display: Syne 800 ·--cc-font-display · Headlines, product names, big numbers. Short lines only.
The chilichip console is a pocket video game console. It comes with a creator, so you can make your own games without code and play them the same evening.
Text: Inter 400 / 600 ·--cc-font-text · Long reading: blog posts, docs, descriptions.
ADD TO CART · 128×128 px · v1.2.0 · €99.00
Mono: IBM Plex Mono 400 / 500 ·--cc-font-mono · The voice of the apps: buttons, labels, tables, prices, code.
PRESS START
Pixel: Press Start 2P ·--cc-font-pixel · Decoration only: a score, a tag, a game title. Never for sentences.
| Font | Weights to load | Source | Licence |
|---|---|---|---|
| Syne | 700, 800 | Google Fonts | OFL 1.1 |
| Inter | 400, 600 | Google Fonts | OFL 1.1 |
| IBM Plex Mono | 400, 500 | Google Fonts | OFL 1.1 |
| Press Start 2P | 400 | Google Fonts | OFL 1.1 |
Host the font files yourself in products (Chili Platform already does). It is faster and sends no data to Google.
Which font where¶
| Product | Headings | Body | Controls and labels |
|---|---|---|---|
| Website and blog | Display | Text | Mono |
| Docs sites | Display | Text | Mono |
| Chili Platform, Chili Creator | Display | Mono | Mono |
| Console | Console font | Console font | Console font |
The console does not use these fonts. It has its own 8 px bitmap font. See Small screens.
Sizes¶
| Token | Size | Use | Sample |
|---|---|---|---|
--cc-text-3xl |
2 to 3.2 rem | Landing page headline | Spicy |
--cc-text-2xl |
1.6 to 2.2 rem | Page title | Spicy |
--cc-text-xl |
1.4 rem | Section title | Spicy |
--cc-text-lg |
1.2 rem | Card title, lead text | Spicy |
--cc-text-md |
1 rem | Body | Spicy |
--cc-text-sm |
0.85 rem | Buttons, inputs, tables | Spicy |
--cc-text-xs |
0.75 rem | Labels, hints | Spicy |
--cc-text-2xs |
0.68 rem | Badges | SPICY |
--cc-text-3xs |
0.58 rem | Pixel font only | SPICY |
The two largest sizes grow with the window (clamp). Body text is never smaller than --cc-text-sm.
Line height and spacing¶
| Token | Value | Use |
|---|---|---|
--cc-leading-tight |
1.2 | Headings, buttons |
--cc-leading-normal |
1.5 | Interface text |
--cc-leading-loose |
1.65 | Long reading |
--cc-tracking-label |
0.08em | Upper case labels and buttons |
--cc-tracking-wide |
0.12em | Badges and very small upper case text |
Rules¶
| Do | Do not |
|---|---|
| Write headings in sentence case. | Write Headings In Title Case. |
| Use upper case for short labels and buttons only. | Set a whole sentence in upper case. |
| Keep lines of body text to 60 to 75 characters. | Let text run the full width of a wide screen. |
| Align text left. | Centre more than two lines. Justify. |
| Use one display headline per screen. | Use Syne for body text. |