第一次将我的网页项目切换到深色模式时，我以为会很简单。同样的字体，只是颜色反转一下，对吧？但几秒钟之内，在浅色模式下看起来优雅的字体就变得模糊而刺眼。衬线变得纤细，白色文字感觉像是在尖叫。
那时我才意识到，深色模式下的字体排版遵循着一套不同的规则。人眼、显示屏幕以及我们对字重和对比度的感知，在低光照环境下都会发生变化。
如果你从事界面设计，就会知道字体可以成就一个设计，也可以毁掉一个设计。在深色模式下，字体决定了你的眼睛是感到舒适，还是需要一直眯着眼。了解那些能让字体在深色模式下表现优异的经验法则，对于保持设计的高水准大有裨益。
深色模式如何改变字体排版的考量
深色模式已成为许多应用程序、操作系统和网站的标准功能。支持者通常认为它可以缓解视觉疲劳。深色与浅色之间的对比可以使阅读长篇文本的压力减小。
然而，对比度的表现并非总是一致。尼尔森诺曼集团的研究表明，在某些情况下，深色界面可能减少眩光。但纯白配纯黑可能并非最佳选择，看久了会让人疲劳。
字重会改变不同颜色的效果。细体字在深色背景上可能显得过于纤细，而常规字重在深色模式下看起来可能更像细体。
微小的调整可以产生显著的影响。字体、颜色和行高都会影响可读性。出色的深色模式设计在于找到恰当的平衡点。设计师必须精心调整字体排版的每一个元素。
优化深色模式字体排版的 4 个步骤
近三分之二的消费者更倾向于从提供个性化体验的公司购买产品。个性化不仅适用于营销，也适用于界面设计。能够响应浅色和深色模式的字体排版，会让用户感觉设计是贴心为他们考虑的，这能在将网站访客转化为客户的过程中产生微妙而重要的影响。
您对字重、间距和色调的关注不仅仅是为了提高可读性——更体现了您的用心。微小的调整可以极大地让用户感觉这个界面是专门为他们设计的。
完善深色模式设计的很大一部分在于调整您的做法，并通过对比度检查器进行验证。您还应该远离屏幕，从不同距离查看最终效果。以下是一些能带来最佳效果的调整方法。
1. 字重、对比度与不透明度
经过几个开发周期后，我意识到在浅色模式下感觉合适的字体，在深色模式下会显得脆弱，而增加字重改变了一切。对于正文文本，我不得不使用常规或中等字重，以确保在深色背景上清晰可读。我还发现粗体或特粗体很适合标题。在深色模式下阅读斜体文字很困难，因此我不再使用斜体来强调文字。
避免使用刺眼的纯白色文本。相反，选择像 #E0E0E0 这样的米白色。这些色调足够亮眼，但又并非纯白。同样，背景可以使用深炭灰色（如 #121212），而非纯黑色。亮度的细微变化会显著影响字体排版的整体感觉。
2. 行间距与行高
文本在深色模式下感觉更密集，因此增加间距是您的好帮手。当我设计深色模式页面时，我会增加：
+0.02 em 的字间距
段落行高为字体大小的 1.5 倍
文本块周围稍多一些的内边距
额外的空间能提高可读性。在深色背景上，字母看起来像是悬浮着，而空间提供了结构和分隔。间距并非纯粹的装饰，因为宽松的行高能改善用户对大段文本的阅读体验。
3. 字体大小
有时直到深入细节时，我才会注意到一个调整：稍微调整字体大小。小字体在深色模式下可能会变得模糊或失真，因为低对比度使得像素发光效应难以辨认。将基准字体大小增加一到两个像素可能有助于解决此问题。
如果您的正文大小是 16 像素，在深色模式下可以尝试 17 和 18 像素。同时，也要在智能手机设备上测试不同的亮度级别。我喜欢将其视为"视觉缩放"。您并非改变字体排版的比例——而是在帮助用户在不同光照条件下以相同的方式感知它。
4. 字体家族
哪些字体最适合深色模式？随着深色模式越来越普及，我发现我默认的字体效果不佳。纤细的衬线消失了，字体看起来不均匀且断裂。精心绘制的字母变得平平无奇。
要想在深色模式设计中取得成功，您必须选择特征鲜明的字体。合适的字体可以将阅读速度提高 35% 或更多。常见的字体在低对比度下比特殊字体更能保持其基本特征。人文主义无衬线字体，如 Inter、Roboto 或 SF Pro，是不错的选择。它们具有开放的形态和均衡的比例，在浅色和深色模式下都具有良好的可读性。
您仍然可以使用装饰性字体或衬线体，但需要更加克制。设计师可能希望放大标题或加粗处理。网页内容无障碍指南 2.0 建议文字与背景颜色的对比度至少为 3:1。选择结构足够清晰、能保持可见的字体。
我的深色模式字体排版系统
当我创建深色模式主题时，我会在其自身的设计系统语境中思考字体排版。
深色背景（#121212）和米白色文本颜色（#E0E0E0）应与强调色搭配使用。强调色用于高亮链接和次要文本。正文使用简洁的无衬线字体，标题使用形成对比的衬线体或展示字体。在使用所有元素前，检查其无障碍合规性，并测试它们在深色模式下的外观。
使用一致的正文尺寸比例，例如 H1 是正文大小的两倍，H2 是正文大小的 1.5 倍。字重、大小和颜色的差异应该即使在光线昏暗的情况下也能轻松辨别。略微放宽字间距并增加行高。文本不应以大段段落的形式出现。
考虑您的字体排版和颜色选择在不同设置和设备上的显示效果。最好在明亮的光线下查看设计。在您电脑上看起来完美的设计，在手机屏幕上可能体验不佳。
深色模式的最高境界在于其微妙之处。一个设计精良的系统，在不吸引过多注意力时，会显得更加稳固和令人安心。
应用于实际场景
好的设计是贴合语境的。如果用户会在模式间切换，那么字体排版必须同时适应浅色和深色模式。我创建能适应不同参数的设计的一些方法包括：
在深色模式中使用稍重的字重。
以 em 的小数倍来调整间距。
在样式表中设置两套颜色变量。
也要记住长文页面。在博客或文章格式中，深灰色背景和增加的行间距有助于提高可读性。应将文本分成较小的部分，以改善用户的深色模式体验。
即使在深色模式下，也要保持您的品牌风格。如果您有展示字体或高对比度徽标，请尽早测试它们在深色模式下的效果，因为一些在白底上效果很好的设计风格，在颜色反转后可能对比度很差。
如果间距和字重处理得当，厚重的展示字体即使在深色环境下也能有效使用。要有意识地设计品牌元素。创建徽标的深色模式版本或调整描边粗细，以确保其在弱光条件下也能有良好表现。
我如何修复一个设计的深色模式
学习设计的最佳方式之一是听取他人的经验。去年，我受委托重新设计一个 SaaS 仪表盘。客户要求最终设计包含浅色和深色主题，以适应其用户。从浅色模式开始，白色和灰色在几何无衬线字体下显得干净利落——达到了完美的平衡。
我为深色模式反转了颜色，以为能轻松搞定。但整个界面看起来都不对劲。文字感觉模糊，图标似乎在发光，所有元素都失去了层次感。我在浅色模式下喜爱的常规字重文字，在深色背景上显得过于纤细。
在接下来的几个小时里，我不断调整视觉设计。我将黑色背景调亮为炭灰色，将白色文字柔和为 #E0E0E0 灰色，并将常规字重改为中等字重。这些改变为设计注入了新的活力。
我在一个窗口内并排比较两个版本，使两种模式看起来属于同一个家族。浅色模式显得明亮通透，而深色模式则显得锐利专注。两者都具有同等的可读性和一致性。
当我展示模型时，客户说的第一句话是："深色模式让眼睛感觉更舒缓。" 那时我意识到，这不仅仅是颜色的问题，更是要在用户切换模式时找到舒适感和连续性。而完善这种连续性的唯一方法，就是运用您作为经验丰富设计师的眼光，或者获取他人的反馈。
字体排版优化清单
在优化字体排版时，请记住您是为将在浅色和深色条件下访问网站的用户进行设计。精心设计的深色模式字体排版能立即提升可访问性。在完成项目前，请查阅此快速清单，以确保满足要求。
正文使用无衬线字体，标题使用衬线体/展示字体。
将常规字重增加到中等字重，将粗体字重增加到特粗字重。
避免纯白配纯黑。
将行高增加到 1.4 到 1.6 倍，并将字间距增加 +0.02 em。
测试颜色对比度比率，确保文本至少达到 3:1 的标准。
将网页正文尺寸略微放大到约 17 到 18 像素。
在多个屏幕和不同光照条件下测试。
调整字重以提升显示清晰度。
通过无障碍检查工具进行测试。
并排比较浅色和深色模式。
根据反馈进行修改，因为您的用户会告诉您什么感觉是对的。
为什么字体排版很重要
深色模式的字体排版关乎的是将要观看它的人。我几年前的深色模式设计与现在的设计看起来不同。最好的设计让易读性显得毫不费力。文字不会发光或褪色，用户可以舒适地阅读和滚动。如果你的设计本身"消失"了，而网站访客专注于体验本身，那么你作为设计师的工作就完成了。
精选文章：