《網頁設計》舒適的中文文章CSS排版設定（附加思源黑體注意事項）

文章除了標題要吸睛、內容要精彩之外，閱讀的舒適度也是非常重要的，唯有讓讀者眼睛感到舒服了，他們也才更願意看下去。如果說標題是為了吸引人看你，那第一個段落就是讓人更想了解你，而內文的舒適度則決定讀者願不願意繼續和你相處。（本篇需要懂一點HTML、CSS語法）

何謂閱讀舒適度

我個人對於舒適的看法，是文章內有適度的留白，給予讀者空間喘息，降低閱讀上的壓力，更加願意滑完整篇文章，就算是達成舒適這項標準了。

至於要如何達成適度的留白，也是我這篇文章要分享的CSS排版設定，基本上只要從主標題、副標題、小標題、字型、字重、字距、行高（行距）、段落間距來著手，就可以讓閱讀舒適度不會太差。（至少要能夠一眼區分出標題、段落與文章重點）

當然文章也可以使用素材來做喘息的安排，像是插入圖片、影片、表格...等等，都可以讓閱讀上的節奏感更趣味、不疲乏一些，但就不是本篇文章要談的部分了，未來有機會再來分享我的看法。

本篇文章著重在基本設定，也就是所謂的基本功吧，把基底打好，舒適度就不會太差了。雖然你目前看的這篇文章已經是我的CSS設定呈現，但接下來我會把細節公開。（對於網站的SEO也有幫助）

名詞解釋

• 主標題H1
  文章的主題名稱，通常只有一個。就像是書名一樣，用來吸引讀者好奇翻一翻，進來看一看文章在說什麼。
• 副標題H2
  類似一本書的目錄章節吧，會有好多個。每個章節都是圍繞著主題來撰寫內文，讓你更明白主題所要闡述的事。
• 小標題H3 H4 H5 H6
  每個副標題裡面，又有一些小標題段落來闡述副標題，讓你更了解副標題所要說明的事。（通常我只用到H4而已，H5H6幾乎沒用到）
• 字型
  
  文章字型給人的感受就很因人而異了，有人喜歡有襯線字型（新細明體、宋體），有人喜歡無襯線字型（微軟正黑體、思源黑體）。
  
  但最重要的是要在網頁上能夠呈現，就得注意讀者的電腦有沒有這個字型（Apple蘋果使用者可能就沒有微軟正黑體），因此用內建字型很可能造成Mac或Windows系統的讀者看到的字型不同，影響閱讀體驗。
  
  我選用Google的網路字型「思源黑體」，只要使用者能夠上網，就能夠在瀏覽我的網站時自動下載思源黑體使用。這樣就能降低不同系統間閱讀體驗不一樣的情形。
• 字重
  
  簡單說就是字體的粗度，通常標題或重點標示會比較粗。
• 字距
  字跟字之間的距離，通常不會特別去設定。
• 行高（行距）
  
  行跟行之前距離，也就是每行的高度要多少。這個英文和中文就有差別了，英文通常比較窄，中文需要寬一些。
• 段落間距
  段落跟段落之間，要比行跟行之間還要寬，這樣才好區分不同段落，都非常靠近的話就顯得擠成一坨，難以閱讀。

我的文章CSS排版設定

原始碼：Codepen

CSS設定細節說明

首先要先引入字型

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,500,700&display=swap&subset=chinese-traditional" rel="stylesheet">

字重（font-weight）不宜過多，太多會讓網頁讀取的速度變慢，所以我這邊只載入300、500、700三個。
300：用於一般內文
500：可以用來畫重點，或是小提醒使用
700：主標題、副標題、小標題

其他字重可參考：Noto Sans TC - Google Fonts

html字體大小初始化設定

html {
  font-size: 62.5%;
}

font-size: 62.5%;
這邊的用意是讓初始設定回歸到10px（原本是16px，乘以62.5%後就為10px），後面以相對單位rem來設定字體大小的時候，較好計算和判斷。

因為我的字體大小都是用相對單位rem，比起使用絕對定位的px更好修改整體大小，當要變動時只要改變html的大小設定，就能夠整體一起改變而不影響標題和內文之間字體大小的差距，不用再一個一個調整了。

body全局字體基本設定

body {
  font-family: 'Noto Sans TC', sans-serif, Arial, Microsoft JhengHei !important;
  font-size: 1.7rem;
  line-height: 1.75;
  color: #1a1a1a;
  font-weight: 300;
}

font-family: 'Noto Sans TC';
字型的設定（font-family），最主要就是這個「Noto Sans TC」要排在最前面，後面的字體都是「Noto Sans TC」字型不能使用時，要指定的替代字型。

font-size: 1.7rem;
前面提到說將初始設定回歸到了10px，這邊1.7rem的意思就是將10px*1.7， 也就是17px，所以我們的文字大小（font-size）基本設定就是17px。（本來我是設定為16px，但礙於思源黑體在mac呈現上有點太細，會導致看得很辛苦，所以我改為17px。）

line-height: 1.75;

行高（line-height）為1.75，這邊的意思是說每行的高度為「字體的大小*1.75」，如果我的內文字體大小設定是1.7rem（17px），那我的每行高度就是29.75px（17px*1.75）。

font-weight: 300;
字體的粗細，我通常預設是設定300。標題、畫重點需要加粗在個別調整就好。

h1、h2、h3、h4、h5、h6標題共同設定

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  margin-bottom: 0.5rem;
}

font-weight: 700;
不管是主標題、副標題還是小標題，字重都用700較好與內文對比。

line-height: 1.5;

行高我是設定1.5，因為通常標題緊接著會是內容，我會讓他們（標題和內文）接近一些，看起來就比較清楚是屬於同一個段落。

margin: 0;
margin的部分因為我有套用bootstrap的框架，他基本就有一些設定，所以我先把它歸0會比較好處理。
也可以適當的加一些margin-bottom來做微調！

h1、h2、h3、h4、h5、h6標題個別字體大小

h1 {
  font-size: 3.2rem;
}
h2 {
  font-size: 2.8rem;
}
h3 {
  font-size: 2.4rem;
}
h4 {
  font-size: 2.2rem;
}
h5 {
  font-size: 2.0rem;
}
h6 {
  font-size: 1.8rem;
}

不管是哪一個標題設定，都要比內文大，這樣才好區分與內文的差異。雖然h5、h6很少會用到，但還是設定一下。

b粗體

b {
  font-weight: 500;
}

一般b的字重（font-weight）設定是bold，bold預設字重是700，在這裡我調整成500，讓他跟標題有個差別，但是又能夠看得出來與內文不同，可以用來凸顯重點。

p段落

p{
  margin-bottom: 2.5rem;
}

margin-bottom: 2.5rem;
段落與段落之前一定要有足夠的間隔，除了較好區分不同段落之外，這樣閱讀上也有喘息的空間。（礙於編輯器關係，我自己習慣用br）

ol、ul項目清單

ol,
ul {
  padding-left: 1.7rem;
}

這個就因人而異了，我自己是習慣把項目符號跟主要文字貼齊，不太喜歡預設的設定（會讓左邊多出一大塊空白）。

參考資料

中文 CSS 排版原則指南
深入 CSS 之 line-height 應用
font-size - 金魚都能懂的CSS必學屬性
CSS Property: font-weight

我是鐵，希望這篇文章能夠幫助到對文章排版有困難的朋友！