Idea
EVERY LETTER ISA DECISION ABOUT35 LIGHTS.
每一个字母,都是对 35 盏灯的一次决定:哪些亮,哪些不亮。Punctum 把这个决定做成一款可以安装的字体。
5x7
大写和小写共用一张 5 × 7 的点阵。小写的 g j p q y 另有两行真正的下伸部,不用压扁。
100
点距 100 单位,横竖相同。字距和行距也是整数个点,所以一整段文字落在同一张网格上。
1
一个可变字体文件。点的大小和点的形状是两条独立的轴,可以任意组合。
System网格与度量
ONE GRID
字宽 600,行高 1000,正好是 6 个和 10 个点距。相邻的字母和相邻的行,所有的点都对齐在同一张网格上,排出来的文字像一整块显示屏。
Hxgy
100Pitch
600Advance
1000Line
700Cap height
500x-height
-200Descender
Axes两条轴
SIZE x SHAPE
横向是 wght:点从针孔大小长到彼此相接。纵向是 ROND:圆点逐渐变成方形像素。左边的点阵就是整个设计空间,每个点都按它所在的位置画出来。拖动它。
wght 100← Size →wght 900
Rag5
Glyphs字符集
108 GLYPHS
完整的 ASCII,加上一组标牌常用的符号。整张字符表铺在一张连续的点阵上。指向或点选任意字符,左边会显示它的结构。
- Glyph
- g
- Unicode
- U+0067
- Set
- Lowercase
- Lit
- 18 / 45
- Rows
- x-height · descender
Board翻牌屏
ROLL CALL
一块由 Punctum 驱动的显示屏。每个字位像翻牌一样滚过一圈字符,再停在目标上,从左上到右下错开出发。世界时钟每分钟只翻动变化的字位。点一下屏幕,全部重翻。
Tester试排
TYPE HERE
直接在下面打字。字号以 10 px 为一档,这样点阵底纹和字形能逐点对齐;关掉底纹,就是字体在页面上原本的样子。
font-variation-settings: "wght" 400, "ROND" 100;In use四种显示材料
IN THE WILD
同一套点阵,放进四种真实的显示材料:电梯里的红色 LED、音响上的 VFD 荧光屏、热敏小票、反射式液晶。每块都只调了两条轴。
↑12
FLOOR
TRACK 07 03:42 PUNCTUM - SIDE A
PUNCTUM TYPE SHOP ------------------ LATTICE 5x7 35.00 AXIS wght 9.00 AXIS ROND 1.00 GLYPHS x108 0.00 ------------------ TOTAL 45.00 THANK YOU ♥
HI 004500 ♥♥♥ LV 07
Films影像
FILMS
三支短片,画面和声音都是代码生成的:这个网页的产品演示、把字体当作乐谱的 35 LIGHTS,以及用 WebGL2 做的 3D 点光发布片。
| Units per em | 1000 | 每个点位 100 × 100 |
|---|---|---|
| Advance | 600 | 等宽,5 个点加 1 个点的字距 |
| Line | 800 / −200 | 行距为 0 时点阵上下连续 |
| Cap · Ascender | 700 | 7 个点 |
| x-height | 500 | 5 个点 |
| Descender | −200 | 2 个点:g j p q y , ; _ |
| wght | 100–900 | 点直径 24 → 100,Black 时点与点相接 |
| ROND | 0–100 | 0 方形像素,100 圆点(默认) |
| Named styles | 18 | Thin–Black 九个字重 × Round / Pixel |
| Character set | 108 | ASCII + ° · • … × — ← ↑ → ↓ ♥ ■ |
Download · 下载
Punctum.zip可变字体、10 个静态字重、网页字体github.com/sundyme/punctum源文件与构建脚本src/glyphs.py点阵源数据,改这里重新构建
Web
font-variation-settings: "wght" 400, "ROND" 100;CSSline-height: 1;点阵连续