2020年9月19日 星期六

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

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

鐵(Tie)
文章除了標題要吸睛、內容要精彩之外,閱讀的舒適度也是非常重要的,唯有讓讀者眼睛感到舒服了,他們也才更願意看下去。如果說標題是為了吸引人看你,那第一個段落就是讓人更想了解你,而內文的舒適度則決定讀者願不願意繼續和你相處。(本篇需要懂一點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

我是鐵,希望這篇文章能夠幫助到對文章排版有困難的朋友!
鐵的 SEO 佈局策略 大公開!

沒有留言:

張貼留言