Typography
Patepang Sans is Patepang’s own typeface: six weights, upright and italic. Version 0.5 is a release candidate, and the app and patepang.com move to it next.
Patepang Sans
#Patepang Sans is drawn for Patepang and belongs to it. It is one family for everything: the app, the sites, a slide, a sticker. There is no second typeface.
It has six weights, from 300 to 800, each upright and italic. The italic is the upright shape leaned 9 degrees, with its dots kept round. The family holds 607 glyphs for 576 characters, enough for 339 languages written in Latin script, Vietnamese among them.
It was drawn to the proportions of Plus Jakarta Sans, the face the app and the sites have used until now, and sets the same words between 94.6% and 97.7% as wide. A layout made for one holds for the other.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?’“”()&@#%
Six weights
#An interface uses four weights and no more: 400 to read, 500 for the app’s captions, 600 for labels and emphasis, 700 for headings. The sites draw with three of them: 400, 600 and 700.
300 and 800 exist for large sizes. No screen and no page uses them yet.
The scale
#Text takes its size from a named step, never from a number of its own. The app has eleven steps, each with a line height that is a multiple of four so that text sits on the spacing grid.
The sites’ headings grow with the screen between two sizes; their text is 16 px, and 17 px in a document from tablets up.
--fs-display40–68 · Bold--fs-h132–44 · Bold--fs-home-h226–34 · Bold--fs-h222–26 · SemiBold--fs-h318 · SemiBold16 px16 · RegularFigures and signs
#Figures are proportional unless asked otherwise. The face carries the rest as features, turned on where they help and nowhere else.
| Feature | Plain | With it | Use it for |
|---|---|---|---|
| Tabular figures | 11.111 88.888 | 11.111 88.888 | Tables, prices, times, a PIN: figures that must line up. |
| Slashed zero | A0B10 O0 | A0B10 O0 | Codes, so that 0 is not read as O. |
| Fractions | 1/2 3/4 | 1/2 3/4 | Real fractions only: 24/7 would change too. Dates such as 11/11/2026 do not. |
| Marks for capitals | (BOGOR) ¿A–Z? | (BOGOR) ¿A–Z? | Words set in capitals, where a name requires them. |
The face also holds small figures above and below the line (m², H₂O), ready-made fractions (½ ⅓ ¾), and these signs:
✓ ✕ ★ ☆ ↔ ↕ ↖ ↗ ↘ ↙ € ₱ ฿ ₹ ₩ ₽
Rules
#Do
- Write headings and labels as sentences: a capital at the start and on names.
- Keep a line of reading text to about 75 characters.
- Use tabular figures wherever figures stand in columns.
- Let large headings sit a little tighter; leave the spacing of text and labels alone.
Do not
- Set words in capitals, or add letter spacing to a label.
- Set reading text under 13 px on a site, or under the caption step in the app.
- Turn off text scaling on anything that is read.
- Bring in a second typeface, or type the wordmark with this one.
When the face is not there
#While the face is on its way, and where it cannot go, something else draws the words.
On the sites, Arial and Roboto stand in, tuned to Patepang Sans in width and in line height, so a page does not jump when the face arrives.
Characters the face does not hold, such as emoji and other scripts, come from the phone’s own fonts.
Most mail apps do not load a web font. An email names the face first and Arial after it, and a reader who sees Arial sees what was meant.
font-family: "Patepang Sans", Arial, Helvetica, sans-serif;
Where the files go
#The package PatepangSans carries one folder for each place the face is used. The files are not offered on this site: the license covers Patepang’s own products and communications.
| Where | Folder | What to do |
|---|---|---|
| Patepang’s sites | web/ | Import the stylesheet and preload its latin file. In the sites’ repository this is one import of @patepang/ui/system/patepang-sans. |
| Another site | web/ | One preload and one stylesheet, served from the site itself. |
| The app | aplikasi/ | Twelve static files, built in. One family name, Patepang Sans, with the weight and the style chosen by number. |
| Figma, slides, documents | desain/ | Install the twelve static files, or the two variable ones, never both. |
| Link preview images | desain/ | The static files: the drawing tools take no variable font. |
Before it is final
#Version 0.5 is a release candidate. Before it is final:
- It is tested on real phones and computers, in the app and in browsers.
- The sites are compared before and after the change, page by page.
- Its license, still a draft, and its name are reviewed by a lawyer.