设计与产品iotic.com
平均字体
The Average Font
2012 — 2025，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
作者尝试把大量字体的字形逐点平均，生成一款“平均字体”Averia。文章记录了他从匹配字体特征、陷入困境，到最终用每个字形取 500 个等距点求平均的完整探索过程，最终产出的字体颇具老式活字印刷的味道。
为什么经久不衰：它展现了纯粹为乐趣而做的黑客式探索：过程本身比结果更精彩，而结果又意外地实用美观，因此多年后仍被反复推荐。
HN 评论精选
赞叹这是黑客精神的典范，并希望作者公开复现步骤
多么精彩的冒险！这是黑客精神的真正体现——作者为了搞懂字体，专门写了个 web 应用来查看字体中的线条、曲线和控制点。我很想知道生成“平均字体”的具体步骤，哪怕是一堆手工操作也好，这样就能在自己的机器上复现。
Stratoscope查看英文原文
What a wonderful adventure! My favorite of all the recent HN posts. This is the true spirit of hacking: > So, this stumped me for a while. I decided I needed to get to know fonts better, so I built a simple web app to view the lines, curves and control points present in the fonts I had. On this basis, I started to consider the ways the features (vertices, curves, stems, serifs etc) might be matched up between fonts. However, this was a rabbit hole I might never get to the bottom of - particularly when considering some of the more unusual varieties of font. Perhaps there was a simpler idea that was evading me. Of course, now what I'd like to see is the source code to generate the "average" font on a different machine. It would be interesting (for me at least!) to see the average font from a font designer's machine - or someone who collects different monospaced fonts - or my own machine. I suppose it's not so much "source code" as it is a bunch of manual steps - but would be interesting to know more about those steps, maybe even enough to repeat them.
指出平均化会产生“粗结”缺陷，并提出加权平均等改进思路
他最终每个字形取 500 个等距点的方案很聪明，但视觉上会在变化大的区域产生不必要的强调——比如大写 Q 的底部或小写 f 的中部出现了粗结，因为对周界点求平均会扩大封闭区域，就像往镖盘上扔的飞镖越多覆盖面积越大。可以按衬线/无衬线分子集，或用“到反向最近点的平均距离”作为线宽权重来做加权平均。总之这是个极好的项目。
chime查看英文原文
His final solution (500 equidistant points per glyph) is very clever though visually, it results in putting unnecessary emphasis in areas of variability. For example, look at the bottom of uppercase 'Q' or the middle of lowercase 'f' - notice how it appears to be a thick knot instead of being the same width as the rest of the letter. This is most certainly because averaging the perimeter points ends up enlarging the enclosed area. The more darts you throw at a dartboard, the larger the area you will cover. While he mentions that he solved the issue of excess variability (lowercase 'g') by selecting a subset of similarly styled glyphs, I don't think he did anything to shrink the knots. Off the top of my head, one thing that could help solve the knot problem is treat the serifs and sans-serifs as two different subsets and make two Average typefaces. Additionally, he could calculate 'average distance to X nearest points in reverse direction'. By that I mean, a point on a curve pointing down should look at all the points that point up (meaning they are on the other side of the filled polygon or hole), and find the 5-10 closest points and take the average. This could tell you how thick the line or hole is at that point. Then use this as the weight to come up with a weighted average of all the other parameters for each point. All-in-all, this is a fantastic project and the weeks and months of independent research is time well spent. Hacking for fun is wonderful.
平均字体好看易读，但像平均人脸一样缺乏辨识度
非常有意思，结果漂亮且易读，但很难留下记忆。这让我想起由多张人脸平均合成的脸——好看，却缺乏个性。无论如何，很棒的工作。
ladon86查看英文原文
This is really interesting. I think the result is very attractive and readable. Yet it's also difficult to recall. It reminds me of a face built of averages (http://www.uni-regensburg.de/Fakultaeten/phil_Fak_II/Psychologie/Psy_II/beautycheck/english/durchschnittsgesichter/w(01-64)_gr.jpg) - attractive, but somehow lacking in character. Great work in any case.
点出页面本身就用生成的字体排版的惊喜细节
这篇文章最妙的是读到约三分之二处才恍然大悟：实验真的产出了一款字体，而且整个页面就是用它排版的。它其实很有吸引力——足够规整所以成其为字体，又恰好不够规整，让人联想到老式活字印刷机的输出。
blahedo查看英文原文
The best part of this post was the dawning realisation about 2/3 of the way through the page that an actual font resulted from the experiment, and the page was displayed in it. It's a really attractive font, actually. Regular enough that it coheres as a font, but just irregular enough to evoke the output of old movable-type printing presses.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com