第一次將我的網頁項目切換到深色模式時，我以為會很簡單。同樣的字體，只是顏色反轉一下，對吧？但幾秒鐘之內，在淺色模式下看起來優雅的字體就變得模糊而刺眼。襯線變得纖細，白色文字感覺像是在尖叫。
那時我才意識到，深色模式下的字體排版遵循著一套不同的規則。人眼、顯示屏幕以及我們對字重和對比度的感知，在低光照環境下都會發生變化。
如果你從事界面設計，就會知道字體可以成就一個設計，也可以毀掉一個設計。在深色模式下，字體決定了你的眼睛是感到舒適，還是需要一直瞇著眼。了解那些能讓字體在深色模式下表現優異的經驗法則，對于保持設計的高水準大有裨益。
深色模式如何改變字體排版的考量
深色模式已成為許多應用程序、操作系統和網站的標準功能。支持者通常認為它可以緩解視覺疲勞。深色與淺色之間的對比可以使閱讀長篇文本的壓力減小。
然而，對比度的表現并非總是一致。尼爾森諾曼集團的研究表明，在某些情況下，深色界面可能減少眩光。但純白配純黑可能并非最佳選擇，看久了會讓人疲勞。
字重會改變不同顏色的效果。細體字在深色背景上可能顯得過于纖細，而常規字重在深色模式下看起來可能更像細體。
微小的調整可以產生顯著的影響。字體、顏色和行高都會影響可讀性。出色的深色模式設計在于找到恰當的平衡點。設計師必須精心調整字體排版的每一個元素。
優化深色模式字體排版的 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 像素。
在多個屏幕和不同光照條件下測試。
調整字重以提升顯示清晰度。
通過無障礙檢查工具進行測試。
并排比較淺色和深色模式。
根據反饋進行修改，因為您的用戶會告訴您什么感覺是對的。
為什么字體排版很重要
深色模式的字體排版關乎的是將要觀看它的人。我幾年前的深色模式設計與現在的設計看起來不同。最好的設計讓易讀性顯得毫不費力。文字不會發光或褪色，用戶可以舒適地閱讀和滾動。如果你的設計本身"消失"了，而網站訪客專注于體驗本身，那么你作為設計師的工作就完成了。
精選文章：