Tipografi
Patepang Sans adalah huruf milik Patepang sendiri: enam ketebalan, tegak dan miring. Versi 0.5 adalah kandidat rilis, dan aplikasi serta patepang.com menyusul memakainya.
Patepang Sans
#Patepang Sans digambar untuk Patepang dan miliknya sendiri. Ia satu keluarga untuk semuanya: aplikasi, situs, salindia, stiker. Tidak ada huruf kedua.
Ketebalannya enam, dari 300 sampai 800, masing-masing tegak dan miring. Miringnya adalah bentuk tegak yang dicondongkan 9 derajat, dengan titik yang tetap bulat. Keluarga ini memuat 607 glyph untuk 576 karakter, cukup untuk 339 bahasa beraksara Latin, termasuk bahasa Vietnam.
Ia digambar mengikuti proporsi Plus Jakarta Sans, huruf yang dipakai aplikasi dan situs sampai sekarang, dan menyusun kata yang sama antara 94,6% dan 97,7% lebarnya. Tata letak yang dibuat untuk yang satu berlaku untuk yang lain.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,:;!?’“”()&@#%
Enam ketebalan
#Antarmuka memakai empat ketebalan dan tidak lebih: 400 untuk bacaan, 500 untuk keterangan di aplikasi, 600 untuk label dan penekanan, 700 untuk judul. Situs menggambar dengan tiga di antaranya: 400, 600, dan 700.
300 dan 800 ada untuk ukuran besar. Belum ada layar atau halaman yang memakainya.
Skala
#Teks mengambil ukurannya dari langkah bernama, tidak pernah dari angka sendiri. Aplikasi punya sebelas langkah, masing-masing dengan tinggi baris kelipatan empat supaya teks duduk di kisi jarak.
Judul di situs membesar mengikuti layar di antara dua ukuran; teksnya 16 px, dan 17 px di dokumen mulai tablet.
--fs-display40–68 · Bold--fs-h132–44 · Bold--fs-home-h226–34 · Bold--fs-h222–26 · SemiBold--fs-h318 · SemiBold16 px16 · RegularAngka dan tanda
#Angka proporsional kecuali diminta lain. Sisanya dibawa huruf ini sebagai fitur, dinyalakan di tempat yang membutuhkannya dan tidak di tempat lain.
| Fitur | Biasa | Dengan fitur | Dipakai untuk |
|---|---|---|---|
| Angka selebar sama | 11.111 88.888 | 11.111 88.888 | Tabel, harga, jam, PIN: angka yang harus sejajar. |
| Nol bergaris | A0B10 O0 | A0B10 O0 | Kode, supaya 0 tidak terbaca O. |
| Pecahan | 1/2 3/4 | 1/2 3/4 | Hanya pecahan sungguhan: 24/7 ikut berubah. Tanggal seperti 11/11/2026 tidak. |
| Tanda untuk huruf kapital | (BOGOR) ¿A–Z? | (BOGOR) ¿A–Z? | Kata yang ditulis kapital, bila sebuah nama memintanya. |
Huruf ini juga memuat angka kecil di atas dan di bawah baris (m², H₂O), pecahan jadi (½ ⅓ ¾), dan tanda-tanda ini:
✓ ✕ ★ ☆ ↔ ↕ ↖ ↗ ↘ ↙ € ₱ ฿ ₹ ₩ ₽
Aturan
#Lakukan
- Tulis judul dan label sebagai kalimat: kapital di awal dan pada nama.
- Jaga baris bacaan sekitar 75 karakter.
- Pakai angka selebar sama di mana pun angka berdiri dalam kolom.
- Biarkan judul besar sedikit lebih rapat; spasi teks dan label tidak diubah.
Jangan
- Menulis kata dengan huruf kapital semua, atau menambah spasi huruf pada label.
- Menulis bacaan di bawah 13 px di situs, atau di bawah langkah keterangan di aplikasi.
- Mematikan pembesaran teks pada apa pun yang dibaca.
- Membawa huruf kedua, atau mengetik wordmark dengan huruf ini.
Saat hurufnya tidak ada
#Selama huruf ini dalam perjalanan, dan di tempat yang tidak bisa didatanginya, kata-kata digambar huruf lain.
Di situs, Arial dan Roboto menggantikannya, disetel selebar dan setinggi baris Patepang Sans, jadi halaman tidak melompat saat hurufnya tiba.
Karakter yang tidak dimuatnya, seperti emoji dan aksara lain, datang dari huruf bawaan HP.
Kebanyakan aplikasi surel tidak memuat huruf web. Surel menyebut huruf ini lebih dulu lalu Arial, dan pembaca yang melihat Arial melihat yang memang dimaksud.
font-family: "Patepang Sans", Arial, Helvetica, sans-serif;
Memasang
#Paket PatepangSans membawa satu folder untuk setiap tempat huruf ini dipakai. Berkasnya tidak ditawarkan di situs ini: lisensinya hanya untuk produk dan komunikasi Patepang sendiri.
| Tempat | Folder | Caranya |
|---|---|---|
| Situs Patepang | web/ | Impor stylesheet-nya dan muat lebih dulu berkas latin-nya. Di repo situs, ini satu impor @patepang/ui/system/patepang-sans. |
| Situs lain | web/ | Satu preload dan satu stylesheet, disajikan dari situs itu sendiri. |
| Aplikasi | aplikasi/ | Dua belas berkas statis, ditanam saat build. Satu nama keluarga, Patepang Sans, dengan ketebalan dan gaya dipilih lewat angka. |
| Figma, salindia, dokumen | desain/ | Pasang dua belas berkas statis, atau dua berkas variable, jangan keduanya. |
| Gambar pratinjau tautan | desain/ | Berkas statis: alat gambarnya tidak menerima font variable. |
Sebelum final
#Versi 0.5 adalah kandidat rilis. Sebelum final:
- Diuji di HP dan komputer sungguhan, di aplikasi dan di browser.
- Situs dibandingkan sebelum dan sesudah pergantian, halaman demi halaman.
- Lisensinya, yang masih draf, dan namanya ditinjau ahli hukum.