设计与产品edwardtufte.github.io
Tufte CSS
Tufte CSS
2015 — 2025,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
Tufte CSS 是数据可视化大师 Edward Tufte 官方发布的 CSS 样式项目,将他在书籍排版中发展的设计理念——如侧边注释、宽幅图表、克制的字体与留白——移植到网页上。页面本身既是样式示例,也是一份关于极简网页排版的说明。
为什么经久不衰:它提供了一套经过时间检验、可直接使用的优雅排版方案,多年来反复登上首页,说明极简、内容优先的网页设计始终有持久吸引力。
HN 评论精选
提醒大家 Tufte CSS 只是参考起点,并非经过验证的最佳设计
> 最后提醒一下这个项目的目标。网页不是印刷品,网页也不是书。因此 Tufte CSS 的目标不是说“网站都应该长成 Tufte 书籍的这个诠释版”,而是“这里有一些 Tufte 在印刷中发展出的技巧,我们发现很有用;也许你能找到让它们在网页上发挥作用的方式”。Tufte CSS 只是一种实现思路的草图。它应该是起点,而不是设计目标,因为任何项目都应该以最适合自身情况的方式呈现信息。上面这段话是关键的前提说明。这只是一种极简设计的可能实现,没有任何研究表明它是最好的、最吸引人的,或任何你想加的形容词。这不是说它不好(完全不是),但它也不是唯一正道™。
ChrisSD查看英文原文
> Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances. The above paragraph is a critical caveat. This is only one possible implementation of a minimalist design. There's no research to suggest it's the best, most engaging, or any other adjective you wish to use. Which is not to say it's bad (not at all) but it's not the One True Way™ either.
分享了将 Markdown 批量转换为 Tufte 风格文档的工具
有兴趣的话,我几个月前做了一个 Markdown 转 Tufte 的转换器。它还很粗糙,但你可以用 Docker 镜像轻松把一批 Markdown 文档转换成 Tufte 风格的书。主要基于 jez/tufte-pandoc-css,后者完成了把 Tufte CSS 适配到 pandoc 的主要工作。
qrv3w查看英文原文
To those interested, I made a Markdown-to-Tufte converter a few months ago. [1] Its still very rough around the edges but you can easily use the Docker image to convert a bunch of Markdown documents into a Tufte-style book. Its mostly based off jez/tufte-pandoc-css [2] which did the heavy lifting of converting the Tufte CSS to be used with pandoc. [1]: https://github.com/schollz/markdown2tufte [2]: https://github.com/jez/tufte-pandoc-css
批评 Tufte 字体跨平台兼容性差,非苹果系统上显示效果糟糕
请别再在网站上到处使用 Tufte 字体了,毫无例外。这些字体只在 Apple 系统上可用,在其他平台上渲染效果很差,文字难以阅读,会赶走你的读者。不用信我,随便问一个推荐 Tufte 字体的网页设计师用什么操作系统,你很快会发现他们全在用苹果。Tufte(1942 年至今)在书籍印刷排版上做了很多工作,可惜他的成果从未被适配或移植到计算机上。
user5994461查看英文原文
Please STOP using tufte fonts for everything that's displayed on a web site. No exception ever. These fonts are only available on Apple OS. They will render poorly on everything else, making the text hard to read and killing your readership. You don't need to believe me, just ask any web designer recommending tufte fonts what operating system he's using? You'll quickly realize that they're all on apple. Tufte (1942 - present) did a lot of work on typesetting for printing books, sadly his work was never adapted or ported to computers.
整理了该项目此前多次登上首页的历史讨论链接
2015 年的讨论:https://news.ycombinator.com/item?id=10012360、https://news.ycombinator.com/item?id=10555319。还有 https://news.ycombinator.com/item?id=10552626。
dang查看英文原文
From 2015: https://news.ycombinator.com/item?id=10012360, https://news.ycombinator.com/item?id=10555319. And there was https://news.ycombinator.com/item?id=10552626 as well.
历次讨论
同类还值得读
贝塞尔曲线入门
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