創造閱讀體驗的 5 個排版原則

28 February 2023

最近幫網站做了蠻多變動, 主要是遷移到了 Blot, 不過因為要做文章的搬遷, 因手邊沒有程式可以自動化, 所以完全需要土法煉鋼, 一篇篇的搬移。

因為有這樣的機會, 我開始重新檢視每一篇文章。 看到許多當年寫下的文字, 有點不成熟, 但卻又知道那是無法避免。

每一個人的生命, 在不同的階段, 都有不同的人生經驗, 「文字」 幫助我們留下了點什麼。 所以, 我並不會去修改那些字句, 畢竟生命中的每段經歷, 都是難能可貴的獨一無二。

但趁這個機會, 重新思考想要呈現出來的體驗。 其中有很大一塊,在我心中持續有爭辯的就是 「排版」。

大學時代, 有幸參與了吳聰敏教授的課程, 教授除了在經濟學的專業之外, 對很多事情的獨到見解, 讓我心生嚮往。 那是一個需要完成很多作業的年代, 所以排版成為了生活中不可或缺的一環。

教授非常強調這一塊, 而且每一點都有相對應的論述跟經驗談, 我想因此在我心中埋下了伏筆。 那也是我開始在網路創作 (2006) 的起點。

直到 17 年後, 我才完成大致上的輪廓, 摸索出了一套想給讀者的閱讀體驗。

趁著這次網站搬遷, 我把排版重新設計了! 內文排版原則如下:1

  1. 數字統一使用小寫數字, 有高低起伏, 方便快速辨認;
  2. 因應橫式排版的數位體驗, 所有的數字多以阿拉伯數字呈現, 為特殊情況會使用國字數字;
  3. 標點符號統一用半形, 與文字中空一格, 括號與引號則內涵文字頭尾不空格;
  4. 中、 英文字之間空一格, 除特殊的情況, 例如內文引用他人陳述;
  5. 內文的日期簡寫以 2023-2-28 (yyyy-m-d) 格式呈現。

字體的設計請參考關於頁面。

LKW75 的三個元素

依據這樣的排版體驗, LKW75 的版面上, 大致上就提供了三種的視覺體驗。

功能面

本文外主要的字體都使用非襯線, 因為非襯線的字體, 嘗試過後非常不適合當作數位環境的主體。 會有一點使用上的錯置感。 因此, 保持使用上的一體, 功能面上我仍使用襯線字體。

本文中的圖片說明文字、 註解, 因跟本文是不同, 我歸類在功能面的項目。

主要內容

透過字型的編排, 文章的主要內容是用不同的襯線 (serif) 字體搭配, 詳細的字體我都放在關於頁面之中。

而程式碼區塊, 則主要還是依照程式設計的需求, 以等寬字, 也就是寫程式最常用的字體為主。

基本上多數都是襯線字體, 目前螢幕的解析度越來越高, 襯線字體來排版網路文章, 也能夠提供良好的閱讀體驗。 更進一步說, 襯線字體多為正體中文使用, 我很喜歡相互輝映所傳達的美感。

外部內容

有一些技術面克服難度高的, 我直接使用外部頁面, 包含了嵌入的頁面等等, 如果要修改是不行, 但是依照使用頻率, 效益不高。

排版可以掌握閱讀體驗

雖然僅僅列出 5 點, 可能網站上的影響不會太遠。 但因為我的策略是,從原文格式就適用, 這會使編輯的流程、 出版的手續, 有相當程度的影響。 舉例來說, 這種排版的方式, 基本上就不適用正體中文直排的書籍, 需要經過許多轉換。

有一點我是放上述思考之前 「閱讀體驗」。

我必須要說, 現在很多排版非常詭異的網站, 最明顯可以看到沒有一致性, 由於正體與簡體中文差異很大, 沒有統一規格, 更多時候我會歸類在缺乏對讀者的關心。

這幾年, 我不斷地思考想要創造哪一種體驗? 所以大家可能會看到在不同的域名、 平台之間轉換, 這些都是經歷過的嘗試, 直到今年收納出來了 「以自己為主體」。 而把我的所思、 所見, 分享出去。

與其不斷地嘗試大家喜歡什麼, 不如認真把喜歡的事情呈現出來。 也因此, 有了這次的排版設定。 我還能記得當翻閱吳聰敏教授著作時, 心中的舒適與驚喜感。

我也想要把這樣的體驗帶給大家, 既然如此有自己可以創作發表的平台, 就想要把這樣的體驗帶給大家。

曾經心中總覺得, 現在大部分的排版都使用全形標點, 數字都沒有在著重大小寫, 同時也不一定會有空格。

甚或我心中有過矛盾, 私下跟自己對話, 說這個排版很容易被誤認為是簡體中文的排版。

但經過幾次的心理掙扎, 順道查了很多資料, 我才發現其實不然, 而在過程中心裡也茁壯了起來: 我想要的創造, 才是最重要的事情。

所以, 感謝你的閱讀, 讓我有機會把我想要創造給你的體驗, 呈現於此。

有一個小小的好處, 因為我是從原始文章就納入這個概念, 這個排版其實相對複雜, 想想可能會降低想要直接複製的人的意圖吧!

小地方的調教分享

因應這個非常客製化的排版, 所以我連帶改變了使用的字體。 原先使用的是 justfont 的蘭陽明體, 不過對於半形符號的支援程度有落差, 最後改為使用思源宋體。

字體的選擇總讓我掙扎, 一方面 justfont 提供了許多優質、 現代感十足的字體, 但可能有支援度的侷限。 一樣, 回歸到想要帶來的體驗, 完整度也是重要的一塊, 所以就改變吧!

2023-3-22 更新

字體的選擇由 justfont 的字體改為系統預設, 配合 Google Font 設定英文與數字, 一方面是關注了網頁讀取的效率, 另外一方面, 發現電腦上黑體閱讀的舒適感比較好。

#寫作


  1. 本排版跟 W3C 公布的中文排版需求, 部分參考卻也多有相異之處。↩︎










2006 - © 未來六米, made with ♡ by Blot.im