初心者從零開始的部落格紀錄（二）：選擇合適的排版與字體

初心者從零開始的部落格紀錄（二）：選擇合適的排版與字體

夏紹剛

本周日（2017.12.17）由邱品齊主任領銜主辦的「社群經營與創新衛教分享會」，果然我預期，跟前一場同樣的～～有種、有趣、有料！（恩，還是換個台詞不然等下羅胖告我抄襲 XD）

有內涵、有趣味、有啟發！

真的是太不虛此行了 :D，加上敝人自己的隨意窩懶散荒廢了一年多，於前一場「簡報設計／演講技巧分享會」時被激勵到，決定再啟動部落格計畫之後，一個多月下來也累積了很多實作上的疑問，有些在課堂上獲得解決，有些在課後私下向講師討教得到答案，實在太棒了 ^^v

因為本次會議已經陸續出現很多強者的心得文章及影片分享（如王筱涵醫師、歐淑娟醫師、楊博因醫師及如識我聞等），所以「心法」部分暫不多言～～

本篇主要分享本人多方討教學習和自我摸索出來的相關「技法」。

※　※　※　　　　　　※　※　※

三位大神級講師－－黃琬茹醫師（左）、邱品齊主任（中）、游懿聖院長（右），另外三位大神也會在接下來的文章中登場喔 ^^b

文章段落編排的部分，邱品齊主任首先提到現在的人們多半是用手機閱讀，非常視覺導向，善用圖片吸精很重要；而且文章不要長篇大論，要適度增加斷行及分段，盡量不要一大團字糊在那邊，不然點進來的人一看就被嚇到，往往就直接 END 上一頁了。

黃琬茹醫師整理了文獻資料，並且實際地統計了自己的部落格流量數據，與主任同樣提及，使用行動裝置的客群占了大多數，建議大家使用較適合手機閱讀的格式；且在 Blogger 上安裝 Google Analytics 進行統計，可以了解自己的客群（受眾），進而精準寫出合乎讀者胃口的文章。

由於我這個人的個性比較囉嗦（應該說是非常囉嗦 XD），所以先前的文章有越寫越長的趨勢 ORZ （希望這篇開始能改善 QQ ......校稿時看到這一句發現並沒有改善）。我查看流量紀錄時，發現最近的兩篇讀書心得＜最有生產力的一年＞和＜驚悚樂園＞的點擊率明顯高於衛教文章，在PTT的 Fantacy 版和 Book 版的回饋也非常多，文章還被版主加 M ，當然衛教文章是相對生硬些沒錯，但我覺得更重要的一點是......

這兩篇就是介紹書籍和網路小說的文章～～所以發長文當然可以吸引到這些本來有閱讀癖的相關受眾啊 XDDD

游懿聖院長在課後聚會時，也提醒我說 Blogger 內文可善用「子標題」，不但凸顯文章重點，也可增加分段區隔性；其實這段時間內陸續也有很多朋友跟我提醒我的排版問題，所以會後當天我立即決定從善如流，學習大神們的排版法，將先前十四篇文章的版面進行大修整～～

用「子標題」凸顯重點，把段落再拆分開來，閱讀上頓時變得和藹可親很多！

因為子標題一直會吃掉下一段的前兩格空格（之前就是因為這個排版上的麻煩點所以沒用子標題），索性把文章裡面所有的首行空格都手動刪除了，直接空一行當段落，更加簡潔明瞭－－幸虧在少許文章時早點來聽課，不然真的不是兩小時可以改完的 XDDD

另外我在瀏覽很多其他高人氣部落格時發現，內文的重點凸顯方法大多用「加粗字體」的方式，而不是我原本使用的「變色字體」（我選深藍色），而即便有用變色字體也不會太多；我使用了比例較多的變色字體，再加上我文章裡相對較多的超連結文字，這樣看起來版面會有點凌亂 QQ

因此，從本篇起我嘗試改用少量的「加粗字體」來作內文強調，希望大家在閱讀文章後能給我一些回饋 :D

※　※　※　　　　　　※　※　※

字體設定部分，在網路上的討論非常多，如社技哲學、WFU BLOG、Justfont blog、Jimmysu's logdown、妖精的號角等，文章的含金量都很高，十分值得有興趣的朋友去看看。

字體的可變設定主要為下列這幾項：

１﹒字體尺寸（Font-size）

多以像素（PX）作單位，為求介面簡潔，不建議整體版面用太多不同字體尺寸的變化（應限定在五種以內）；並需考慮到大部分人用手機屏幕閱讀，不應選擇太小的內文字體。

原本 Emporio 預設主題在字體大小的變化較多，我將大部分內文字體改為 16 PX（這也是多數手機瀏覽器預設的內文字體尺寸）；文章標題選擇比較多人推薦的 24 PX。

Blogger 在後台設定區可以直接點擊修改各個部分的字體尺寸（主題 → 自訂 → 進階）。

P.S. 字體尺寸還有其他設定單位，如排印單位（PT，Point）、排印點數（EM，原先的定義是在金屬活字中大寫 M 的寬度，數位印刷後變成一種相對性的單位）及百分比（%）等，在此不贅述，有興趣的朋友可以點連結看比較文。

２﹒行距

行距（Leading）又稱行高（Line-height），是指「從上行的基線到下行的基線」的距離，再說白話一點，就是「一行字本身字體高度加上與上面另一行字之間的空白區」，命名起源來自於鉛（Lead），因為金屬活字時代會將鉛塊插到行與行間來增加空白區域。

行距太密會使文字太過擁擠不易辨識，行距太散又會導致整篇文章過於鬆散，兩者都會影響可讀性！一般會建議將字距設定為字體尺寸的 1.5 - 1.7 倍，如本人用 16 PX 的字體，就應選用 24 - 27 PX 的行距，加上考量手機閱讀的舒適度，實測後我選用 27 PX 的行高。

Emporio 主題的可由後台區直接點擊調整行高（主題 → 自訂 → 進階 → 發表文章 → 文章文字行高）。

３﹒字距

字距（letter-spacing）就是字與字中間的距離，一樣過密過疏都會影響閱讀！

網路上對字距的建議就比較不一，同樣的 16 PX 的字體尺寸，從 0.8 - 1.4 PX 都有人支持；個人認為字距的選擇上，比起行距只需單純考慮字體尺寸來說，應該還需要合併考量到整體版面寬度的對應關係，所以沒有一個特定的黃金數值（所謂的「行距＝ EM / 5」的說法是適用於英文字體排版而不是中文字體喔！）。

字距在大部分 Blogger 主題上，需要使用 CSS 語法修改（主題 → 自訂 → 進階 →新增CSS），簡單有關字體尺寸的設定可以這樣寫：

.post-body {　
　（post-body就是指內文字體）
font-size: 16px;
　（字體尺寸）
line-height: 27px;
　（行距）
letter-spacing: 0.8px;
　（字距）
}

BUT～人生最無奈就是這個BUT！

我一直用 CSS 語法改來改去，怎麼看都覺得不滿意（主要是字列對齊上出問題），後來查到 WFU BLOG 上的文章提到， Emporio 是 Blogger 新推出的自適應主題（RWD，Responsive Web Design，響應式網頁設計），文章版型比例會隨著螢幕大小變換，所以若在 html 或 CSS 裡貿然修改任何與有關寬度的設定都可能會導致版面呈現受到破壞 ORZ

因為我很喜歡 Emporio 主題的呈現方式，而且上篇有提到我已經換過一次主題了，實在不想再忙活一次 @@

所以繞了一大圈，我刪掉所有與字型尺寸有關的 CSS 語法。

４﹒文字顏色

內文文字顏色建議採用預設的黑色（色碼：#000000），而用來強調內文或標題等處的變色文字部分也不應選擇過亮的顏色，會導致閱讀不適；順道一提，版面的背景顏色可考慮用淺灰色（#eeeeee），看起來相對柔和，比一般預設的純白背景，閱讀感更佳，讀者眼睛比較不會疲勞。

版面顏色部分也可在後台設定區可以直接點擊修改，其實 Blogger 主題預設的幾種背景預設配色就很不錯了。

５﹒字體的變體－－加底、斜體與字重（Font-weight，代表字體的粗細）

這三種變體都是內文的強調方式，個人不建議使用加底，因為它無法作到真正視覺意義上的強調效果；也不建議使用斜體，因為中文字體往往不像英文字體有特別另外製作斜體字型（Italic type），而多是程式演算出的偽斜體，看起來會有些違和，且破壞版面的整齊度。

善用加粗字體可能是較為理想的強調重點方式，當然不建議全篇內文使用正常（預設）以外的字重，會嚴重影響閱讀體驗，應僅在某些重點部位使用加粗字重（Bold），達到吸睛效果，但也不能在內文加粗太多的地方－－太多的強調等於沒有強調－－另外需注意應選用有字重個別設計的字型（如微軟正黑體），不然也會有「偽粗體」問題！

加底、斜體和加粗在 Blogger 編輯文案的上方就可直接點選，使用上很方便。

６﹒字型（Font-family）

選擇適當的字型也是讓文章吸睛的一個大重點，林政賢院長在「簡報設計分享會」中有提到「無／有襯線字型」在選用上的大原則～～

無襯線字型（Sans-serif）－－文字的筆劃端點沒有多餘的裝飾，筆劃粗細一致，給人穩重踏實的感覺，便於辨別，可用於標題和專業性文章。

有襯線字型（Serif）－－文字在筆劃端點進行修飾，筆劃粗細有變化，給人經典優雅的感覺，閱讀起來較為舒適，可用於大部份內文。

大多建議不應在同一個版面上選用三種以上的字型。中文字和英文字一併呈現時，也需對應性的同時選擇有或無襯線的字型，如此可讓版面更為整齊。

BUT～人生最無奈還是這個BUT！！

Blogger 終究是 Google 的免費平台服務（想增加自己曝光度可以給 Google 錢啦，當然我是不會給的XD），因此在內文編排上相對陽春，只能在後台選定單一種內文字型，而不能在編輯文案時進行調整，甚至還沒有提供中文字型的選項！

若讀者的瀏覽器預設字型是微軟正黑體那還好些，但如果跑出來新細明體或標楷體，文章給人的質感就會差很多。如果我們想要優化字型部分，只能從 CSS 語法著手， WFU BLOG 的文章中介紹了排列規則，簡單說就是：

－先英文字型再中文字型
－中文字型要同時列上它的英文名稱，增加被系統辨識機會
－盡可能顧及各個平台，Linux → Mac → Vista → XP → 通用字型

我後續再參考了 PTT 上的這篇建議，實測後感覺不錯，目前我使用的字型 CSS 語法為～～

.post-body {
font-family: Consolas, Ubuntu, Arial, "儷黑 Pro", "LiHei Pro Medium", "文泉驛微米黑", "WenQuanYi Micro Hei", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
}

※　※　※　　　　　　※　※　※

設置部落格的版面，就像打造一個花園。選用系統預設甚至花錢訂製的花園，讓自己專注在種花（產文）上很不錯；而在資（不）源（想）有（花）限（錢）的基礎上，盡量找資料學習（講真的......這些網路語法對我這個非本科生來說實在跟天書一樣啊 @@），完成版面的優化，也是一種樂趣！

人生也是如此，或許在嘗試的過程當中，走了一些歪路，碰了一些牆壁，但我們也因此多看了一些風景啊 :D

誠摯希望耐心讀到這邊的您，能給我的版面一些寶貴的建議，讓我有機會能把這個花園弄得更漂亮 ^^ 也歡迎您隨時過來走走，雖然我花種的不快～～

但我會持續努力的！

※　※　※　　　　　　※　※　※

［同場加映］
１﹒如識我聞：＜邱品齊醫師主辦之社群經營與創新衛教分享會＞
２﹒王筱涵醫師：＜怎麼寫醫療部落格？怎麼經營粉絲專頁？ 【2017社群經營與創新衛教講座心得】＞
３﹒楊博因醫師：＜社群經營早發掘，創新衛教做中學＞

［延伸閱讀］
１﹒初心者從零開始的部落格紀錄（一）：選擇平台、主題、版面
２﹒初心者從零開始的部落格紀錄（三）：簡報的真義、創作的初心