全文约 3600 字,阅读时间约10min

最近构建AI知识库,Obsidian用的频率就变得异常之高。

但越用,越有一种读着很累的感觉,甚至很多时候有一种抗拒。

这不对劲啊,虽然说Obsidian的默认排版一直自带一股原生态的“丑感”,但‘丑’和‘累’是两回事,丑是另一种感觉,而累会直接拉低工作效率,后者我明显更不能忍。

所以,我在上周就花了一天的时间,做了两件事:

1.试图搞清楚为什么Obsidian读着那么累
2.和AI一起把Obsidian的默认排版做了爆改

对比图如下:

Pasted image 20260630124324.pngPasted image 20260630124607.png

下面展开讲讲我爆改的全过程,没有时间围观的朋友可以直接翻到倒数第二节,获取css样式的开源地址。

#话说,Obsidian为什么读着那么累?

我单独让AI帮我认真扒了一遍,发现 Obsidian 的问题不是一个两个——它几乎把能踩的雷全踩了。

大多数人觉得 Obsidian 读起来累,第一反应是"字号太大了"或者"主题不好看"。所以你可以看到,市面上很多朋友 DIY 了各种好看的主题,什么莫兰迪风啊日式风啊等等。

是有一些用,但我总觉得哪里不太对劲。

因为,真正的主因并不是字号,也不是主题配色,而是2个更隐蔽的东西:对比度密度

#1.对比度上踩了大雷

Obsidian的文字对比实在是太大了,纯黑配纯白,把亮度对比拉到了极限。

Pasted image 20260630124724.png

从生理学上看,你的瞳孔要在极亮和极暗之间不停微调,更隐蔽的是一种叫"光晕"的现象——白底会吃掉黑字的边缘,笔画发虚,散光的人尤其明显。

这也是为什么Google的 Material Design 明确:

正文要用 87% 的黑而不是纯黑。

而WCAG(Web 内容无障碍指南)也做了明文规定:

文本对比度在 4.5:1 到 7:1 之间,是适合长时间阅读的区间。

而Obsidian的纯黑配纯白,对比度是多少?21:1。

21:1 什么概念?就是你的眼睛一直在处理“最黑”和“最白”之间的极限反差。短时间没问题,但阅读超过十分钟,人眼疲劳感会成倍往上翻。

这便是为什么Obsidian读着会累的第一大底层原因。

你可能会好奇,真的假的,对比度有那么厉害吗?我来举个极端点的案例。

1997年,《宠物小精灵》出现过一次非常恶劣的播放事故。
在第38集时,皮卡丘用电击打爆了导弹,为了表现电脑世界的视觉冲击,画面使用了红蓝高速交替闪烁。结果,全日本有 600 多名儿童因为观看这段画面出现头晕、呕吐甚至短暂失明,被紧急送往医院。这集动画从此被永久禁播,任天堂股价第二天直接跌了 5%,史称“3D 龙事件”。

Pasted image 20260628132514.png

当然,Obsidian 的对比度远没有那么极端。

但两者的底层原理是相通的:人眼的视觉系统,天生对极限对比敏感。 长时间暴露在高对比度的界面上,和盯着高速闪烁的红蓝光本质上一样——都是在刺激和消耗你的视觉耐受力,只是程度不同。

没有人会像那 600 个孩子一样直接倒下,但大部分人会在不知不觉中感到“累”。

但对比度不只是‘太高’才出问题。相反,如果某些需要区分的信息缺乏对比,大脑反而要花更多力气去分辨——这又是另一种累。

比如Obsidian默认表格的表头,你会发现,表头和数据长一个样,没有任何区分。所以我们就需要消耗更多的认知资源去定位和区分,这也是为什么读着累的另一个原因。

Pasted image 20260628140850.png

再比如,Obsidian引用的文字样式和正文无区分,但引用从定位层级上来说不过是对信息的注释、说明、概括。层级不清晰,同样需要消耗认知资源来区分,自然也容易读着累。

Pasted image 20260628141039.png

#2.排版密度上也踩了大雷

过去我做UI设计师的时候,在排版上一直不得要领,直到我接触到了格式塔心理学(Gestalt Psychology)。

格式塔心理学有一条经典原则叫做“接近律”,意思是:

距离相近的元素,会被大脑自动归为同一类。所以,人们会下意识地把距离更近的物体视为一组。

放到排版上,一旦间距过于紧凑,或者行间距和段间距差不多时,大脑就会把几千字识别成一整面密不透风的“文字墙”。这就是为什么Obsidian读着累的第二大原因。

Obsidian踩雷的就在4个地方:

❶Obsidian的行高默认大约 1.5。网页设计里这个值算及格,但在笔记这种需要频繁回行的阅读场景里,1.5 意味着上一行和下一行几乎是“贴”在一起的,视线回行时容易跳错行。

❷段间距和行间距几乎没区别。一段结束和一行结束,视觉上看不出差异。该换气的时候,排版没有给你“换气口”。

❸字间距为 0。中文是方块字,默认字间距为 0 时,一行几十个字排在一起会形成“字墙”,所有字糊成一堵视觉墙面。

Pasted image 20260630124805.png

❹另外,表格的内间距过窄,单元格边框临近文字,没有留白。整个表格就像一张未经排版的 Excel 打印稿。

Pasted image 20260630123548.png

#3.字体压力的细节

还有一块是字体,Obsidian 的默认字体是思源黑体。思源黑体本身没问题,但它的字重偏大。在小字号、高密度的笔记场景里,偏重的字体因为过高的密度,会给人“压眼”的感觉。

Pasted image 20260630124138.png

诊断到这里,我心里有数了。接下来就是逐个解决。

#我是怎么改的?

#针对对比度过高:

我把正文颜色从接近纯黑,改成了暖深灰 #323232。对比度从 21:1 一下子降到了大约 10:1。就这么一个改动,整个笔记的阅读感受立刻松了下来。眼睛终于不用时刻处于应激状态了。

Pasted image 20260628140536.png

#针对呼吸感缺失:

行高拉到了 1.8。不多,但足够让每一行之间有了一个透明的“气道”。段间距被我调得明显大于行间距——不是为了好看,是为了制造思维的换气口。一段讲完,视觉上歇一下,再进下一段。

字间距微调到了 0.03em。你几乎感觉不到它在变化,但文字突然就能透气了,字墙消失了。

这些调整加起来没几行代码,但它们凑在一起,解决了一个根本问题:你的眼睛在阅读时,不再需要无意识地对抗排版。

Pasted image 20260628140222.png

#针对字体偏重:

字体从思源黑体换成了苹方(PingFang SC)。不是苹方比思源高级,而是在字重上,苹方更轻、更通透。

这件事背后的原理其实很简单:人的眼睛处理“重”的笔画,就是比“轻”的更费力。

Kindle 为什么坚持用更轻的衬线字?微信读书为什么专门做字体优化?不是因为它们比 Obsidian 更懂美,而是它们更懂一件事——用户不会因为功能留下,但会因为“看着累”而离开。

#针对表格缺乏信息层级:

这是我改得最狠的地方。

❶表头,横向和纵向都加了浅灰底色,并且默认加粗。这样打开一张表格,不用读内容,光靠视觉层级就知道左边是什么维度、上边是什么维度。用最少的认知资源完成信息定位。

❷另外,字号稍小一点,单行信息更紧凑,眼球横向扫视距离更短,数据差异反而更容易被发现。在这个特定场景里,更小的字号换来的是更快的比对速度。

❸并且,我还给单元格加了点击态。你点哪个单元格,它就会出现一圈很细的 1px 描边。当面对一张十几行、七八列的表格时,这个反馈就是当前注意力的视觉锚点。
点到哪里,哪里就有回应。

Pasted image 20260630125104.png

❹单元格的内间距也整体加大,文字不再紧贴边框,每个单元格都有了自己的呼吸空间。
改完这些之后,Obsidian 里的表格终于不再像 Excel 的打印稿了,完美。

Pasted image 20260628140631.png

#针对那些细碎的色彩阻力:

❶Obsidian的高亮色,我从默认那个偏脏的土黄,换成了更干净、更淡的亮黄色。参考了flomo的色值。

高亮的目的本身是让一段文字从页面里跳出来,但它不应该刺眼。它应该像一束柔和的聚光灯,注意力被自然引导过去,眼睛却不觉得被冒犯。

Pasted image 20260630125301.png

❷Obsidian的引用块做了弱化,将紫色色色块换位浅灰色。文字字色也做了相应弱化,和正文样式完全拉开。

因为对我来说,引用从定位上来说不过是对信息的注释、说明、概括。引用的层级不值得用颜色这么强的样式来强化它。

Pasted image 20260628141232.png

以上。这些改动全加在一起,不过十几行的 CSS。

但它们解决了一个共同的问题:
对比度和密度的问题,让人眼在阅读时更加舒适和放松。

于是,阅读过程中的摩擦力,被一点点磨平了。

Pasted image 20260630124324.pngPasted image 20260630124514.png

#如何把它复制到你的Obsidian?

我把它开源了,Github搜索Quiet Notes就能看到。

网址:https://github.com/andrewchen0623/obsidian-quiet-notes

没别的,我觉得把对我有用的东西开源分享出来,可以帮到一些真正需要的人,帮到的人越多,价值被放大得越多,我觉得这是好事。

怎么安装?推荐直接用Agent(Codex、Claude Code等等)帮你安装,它会自动帮你搞定所有的脏活累活。

咒语:请帮我安装这个 Obsidian CSS Snippet:https://github.com/andrewchen0623/obsidian-quiet-notes

你唯一要做的,就是在 Obsidian 的设置的「外观」中,找到这条CSS片段,点一下“启用”。  

Pasted image 20260630125608.png

如果你不用 Agent 也没关系,可以去 GitHub 查看手动安装步骤,也很简单。

之所以命名为Quiet Notes,因为我的设计理念很简单:

不破坏 Obsidian 本身的界面结构,不搞花里胡哨的重设计,只做一件事——通过改造正文的阅读体验,尽可能降低阅读时感知到的视觉噪音。

就像降噪耳机不是让世界静音,而是滤掉那些让你烦躁的频率。

Quiet Notes 也一样,它滤掉的是默认排版里那些让你“不知不觉累”的东西,让你的阅读体验更舒适、更专注。

#写在最后

聊到这儿,说点和 CSS 无关的事。

在做这件事之前,我对 Obsidian 一直有个偏见。

我觉得它太原始了。界面简陋,排版丑,什么都要自己动手,还得自己安装一大堆的插件,特像一个没有经过工业设计的半成品。

但后来用久了之后,尤其是折腾完Quiet Notes后,我突然释怀了,我开始有点理解了这款软件的顶级浪漫。

正因为 Obsidian 把 CSS 的权限开放给了我,我才可以像一个设计师那样,从最基础的对比度、行高、字距这些参数入手,亲手打磨出一个真正适合自己眼睛的阅读环境。不是别人预设好的“最佳方案”,而是我的方案

其实,市面上的大多数笔记工具,替用户做了所有的设计决策。好看也好,不好看也好,你只能被动接受。这样确实方便,不需要开荒、不需要自己捣鼓。

但换来的代价:你也失去了对它的定义权。

Obsidian 选择了另一种路径。它把权利交还给用户。代价是上手门槛高了一点(但第一次用Obsidian开荒的过程,其实也蛮有意思的),回报是你成为了上游的创造者,拥有了一个真正“属于你”的工具。

而当一个工具可以真正属于你,协作的过程中,你可以体会到真正的合一。