部落格圖文好讀版: https://doctorhsia.blogspot.tw/2017/12/Font.html 初心者從零開始的部落格紀錄（二）：選擇合適的排版與字體 夏紹剛 本周日（2017.12.17）由邱品齊主任領銜主辦的「社群經營與創新衛教分享會」，果然我 預期，跟前一場同樣的～～有種、有趣、有料！（恩，還是換個台詞不然等下羅胖告我抄 襲 XD） 有內涵、有趣味、有啟發！ 真的是太不虛此行了 :D，加上敝人自己的隨意窩懶散荒廢了一年多，於前一場「簡報設 計／演講技巧分享會」時被激勵到，決定再啟動部落格計畫之後，一個多月下來也累積了 很多實作上的疑問，有些在課堂上獲得解決，有些在課後私下向講師討教得到答案，實在 太棒了 ^^v 因為本次會議已經陸續出現很多強者的心得文章及影片分享（如王筱涵醫師、歐淑娟醫師 及如識我聞等），所以「心法」部分暫不多言～～ 本篇主要分享本人多方討教學習和自我摸索出來的相關「技法」。 ※　※　※　　　　　　※　※　※ 文章段落編排的部分，邱品齊主任首先提到現在的人們多半是用手機閱讀，非常視覺導向 ，善用圖片吸精很重要；而且文章不要長篇大論，要適度增加斷行及分段，盡量不要一大 團字糊在那邊，不然點進來的人一看就被嚇到，往往就直接 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 誠摯希望耐心讀到這邊的您，能給我的版面一些寶貴的建議，讓我有機會能把這個花園弄 得更漂亮 ^^ 也歡迎您隨時過來走走，雖然我花種的不快～～ 但我會用心持續種下去的！ -- 我的臉書：https://www.facebook.com/Doctorhsia 我的網誌：https://doctorhsia.blogspot.tw --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.36.178.138 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Blog/M.1514200024.A.A41.html