活版印字 Typography | Makito Log

活版印字 Typography

說在前面#

在這之前,有一點我必須承認,那就是 —— 我更新博客的頻率實在是太低了。

或許是因爲平日比較忙,我很難抽空坐下來靜靜地寫點自己的文章。因專業的原因,我經常有各種報告要寫,需要翻譯的文章也蠻多。其實,不論是講故事,還是說說自己最近研究的東西,都是我一直嚮往的事情。正如新的博客名字一樣,今後我會多抽些時間寫寫文章,在這裏記錄一下生活。

爲什麼造一個主題?#

用了很多年別人做的主題,但「別人的總歸是別人的」,想讓主題風格跟着自己的胃口走,就只能自己爲自己量身定做。另外,看着一個主題「由抽象的思路慢慢變成可以看到的成品」的這個過程也是一種享受。

來說說設計思路吧#

我的手邊有一本 Pearson 出版的商學教材,在剛拿到書的時候,我就被它的排版風格給吸引住了。說實話,它的排版談不上精巧,但會給人一種「簡潔明晰」的體驗,不需多費力氣便可在字裏行間找到想要的信息。再輔以不同寬度的下劃線標註重點內容,一切都顯得那麼整潔,也在單色印刷的紙面上創造出了有不同層次的錯覺。

我給這個主題起名爲「活版印字」,其實與英文的「Typography」並非是嚴格對應的,單論這一點,「Typewriter」的原理可能更接近「活版印刷」或「活版印字」一些。

到這裏又不得不談一下這個主題的本意 —— 希望閱讀者將視覺的焦點完全放於文字之上。動畫、矢量圖、陰影和圓角等這些東西,恐怕對我們來說已經是很熟悉的元素了。而生活中這種有能吸引視覺焦點至紙上之魔力的物品,也就是印滿文字的紙了。

不過講到這裏,肯定有些人會說,屏幕和紙張是不能相提並論的。沒錯,就衝着屏幕用字體與印刷用字體有着截然不同的設計的這點來說,兩者的風格混用,再不謹慎的話,就會產生違和感,甚至辣眼睛。

主題最早使用「思源宋體 Source Han Serif」作爲主要字體,對於大標題來說,這個字體的確可以寫出活版印刷的味道。不過囿於目前中文 Web font 的解決方案仍不成熟,現有的字體子集化方案也並不能很好的支持所有字體,嵌入子集化後的字體或是使用矢量圖也可以作爲一種方案,但是考慮到難易度、移動端兼容性和「思源宋體」在桌面瀏覽器用戶中的普及度,還是換成了 Sans-serif 類的字體,也免去了視覺上的一些問題。不過喜歡明朝體/宋體的使用者也可以把「ヒラギノ明朝(HiraMinProN)」放在字體列表的首位,Apple 設備中內置了該字體,包括運行 iOS 系統的移動設備。對於中文使用者,尤其是簡體中文使用者來說,會存在未覆蓋的字符,因此這個方案只適合小範圍使用。如果使用日本語書寫博客,全站應用該字體的效果還是不錯的。

最初的背景是純白色的,直到有一天喜歡寫手帳的友人送給我一張她剛買的活頁紙,那上面的背景網格讓我靈光一現,於是就有了現在的背景紋理。

主題內的前景色、背景色以及字體列表提供了自由定製的接口,也可以引入自行子集化的字體。此外,背景網格的深淺取決於背景色的設定,若背景色爲深色,則網格自動使用淺色,若背景色爲淺色,則網格自動使用深色。

這個主題最初是以自用爲目的設計的,因此追求了極簡之風,功能上可能並不會如熱門主題一樣豐富。

更新日誌#

2017/10/8#

  • 對高度的不響應進行修正
  • 樣式微調

2017/9/22#

  • 新增設定首頁文章摘要長度的選項
  • 準備發佈

2017/9/20#

  • 樣式微調
  • 文字抗鋸齒處理
  • 新增對「Disqus」與「LiveRe 來必力」評論系統的支持
  • 移除對「多說」評論系統的支持

2017/9/16#

  • 整體設計基本完成

整體特性#

  • 響應式設計
  • 移動設備友好
  • 整合多種評論系統

下載和使用#

安裝、更新及配置方法請參考 Readme 文件

授權協議#

MIT