現代網頁設計的一大重點：字體樣式

網站文字大小、字元間距、行高等，在現今偏向較簡潔版面設計，字級相關的細節大大影響著網頁整體的風格與設計感。以各位看到這篇文章的樣式來說，內文設定是 20px 的字體（font-size），30px 的行高（line-height），間距則設定為 1.5px（letter-spacing），字重則為 400（font-weight）。

網站中，因應不同區塊、文案的需求，字體的大小設計，往往還需要扮演著呈現不同的氛圍、功能性的角色。故何處應使用什麼字型、字距、上下留白等，都是相當重要的選擇。

一般網頁設計的作法會是先產出一個圖檔讓客戶調整，最後再將圖檔內容轉換為網頁。這樣的作法好處是可以讓客戶快速看到樣式，但許多時後真實上機的樣式都會讓客戶覺得「不太一樣」，如此溝通下來調整各個文字區塊費時又費工，CTK 這邊就提供一些網頁常見字級元素的大小，供大家參考：

文字 12px 網頁中最小使用的字級
文字 14px
文字 16px 現今網頁常使用的字級大小
文字 18px 現今網頁常使用的字級大小
文字 20px
文字 24px 一般附標題使用之字級大小
文字 26px 一般附標題使用之字級大小
文字 30px
文字 36px 大標題可使用之字級大小
文字 48px
文字 60px

下次與客戶溝通字級大小，就把這篇文章拿給他看吧！

上面的範例為了閱讀體驗，有將行距固定在該字級的 1.5 倍，也就是網頁中字體大小設定為 24 時，行高會自動帶入 36，平均分布在文字上下方。有些網頁語法設定固定字級行高 30px 的話，使用大標題就會變成下面這個樣子：

文字 48px，行高設定為 30px
文字 48px，行高設定為 30px

可怕的樣式就此產生，但客戶看到這種錯誤，應該是沒有理由看不出來，就不在此討論了。

實際字體樣式搭配再網頁上呈現的大小

這邊就示範一些字體樣式的搭配樣式，讓各位實際體驗字體大小、間距、字重等元素，對網頁外觀的影響：

標題字重 600，大小 36px，行距 1.3 倍，字距 2px

內文字重 300，大小 18px，行距 1.2 倍，字距 1px；內文字重 300，大小 18px，行距 1.2 倍，字距 1px；內文字重 300，大小 18px，行距 1.2 倍，字距 1px；內文字重 300，大小 18px，行距 1.2 倍，字距 1px；內文字重 300，大小 18px，行距 1.2 倍，字距 1px；內文字重 300，大小 18px，行距 1.2 倍，字距 1px；（段落間有一個 30px 的間隔）

標題字重 900，大小 36px，行距 1.5 倍，字距 2px

內文字重 400，大小 16px，行距 2 倍，字距 0.8px；內文字重 400，大小 16px，行距 2 倍，字距 0.8px；內文字重 400，大小 16px，行距 2 倍，字距 0.8px；內文字重 400，大小 16px，行距 2 倍，字距 0.8px；內文字重 400，大小 16px，行距 2 倍，字距 0.8px；內文字重 400，大小 16px，行距 2 倍，字距 0.8px；內文字重 400，大小 16px，行距 2 倍，字距 0.8px；（段落間有一個 30px 的間隔）

標題字重 500，大小 26px，行距 1.1 倍，字距 1px

內文字重 500，大小 16px，行距 18px，字距 0.4px；內文字重 500，大小 16px，行距 18px，字距 0.4px；內文字重 500，大小 16px，行距 18px，字距 0.4px；內文字重 500，大小 16px，行距 18px，字距 0.4px；內文字重 500，大小 16px，行距 18px，字距 0.4px；內文字重 500，大小 16px，行距 18px，字距 0.4px；（段落間有一個 30px 的間隔）

標題字重 600，大小 20px，行距 1.2 倍，字距 1.5px

內文字重 400，大小 18px，行距 0.8 倍，字距 1px；內文字重 400，大小 18px，行距 0.8 倍，字距 1px；內文字重 400，大小 18px，行距 0.8 倍，字距 1px；內文字重 400，大小 18px，行距 0.8 倍，字距 1px；內文字重 400，大小 18px，行距 0.8 倍，字距 1px；內文字重 400，大小 18px，行距 0.8 倍，字距 1px；(段落間有一個 30px 的間隔）

字級影響很多，卻也僅是整體網頁設計的一部分

從上面的例子來看，字級對網頁的影響的確佔了很大的比例。但整體的網頁設計，要思考的除了閱讀體驗外，也須思考其功能性和想要達成的目標。

用在「產品描述」、「關於我們」、「品牌理念」、「結帳按鈕」、「表單內填寫資訊」、「首頁 Banner」、「頁尾描述」等，不光是字級，字體的選擇也可能會差異很大。如何讓整個網頁呈現具有一致性，以及各區塊想要的差異，就是網頁設計的重點。

其他網頁字級的單位

若是有相關經驗的客戶，上述提及之 px 這個單位勢必不會太陌生，一般使用於電腦螢幕，指的是每一個「像素」（pixel）；pt 則是印刷使用之單位，在電腦中切勿使用。

網頁設計中另外常見的有：em, rem，或是百分比的表示方式，通常為有一參照值之變化（一般 1 em 設定為 16px ，1.25 em 就是 20px），這些就留到後續說明啦！

BONUS 手機字型與電腦版不同

手機版網頁的顯示文字一般也會依照內文屬性、區塊，做些為的調動，讓整體閱讀體驗更佳，使用者留在網頁的時間自然更長，以下是手機版網頁文字顯示的範例（這裡使用誇張一點的差異，可以縮小視窗來觀看改變情形）：

你是網頁設計公司的客戶，還是設計公司？來看看系列文：

☛ （二）那些你沒有想到/過的網頁功能
☛ （三）網頁完成之際，最常問的問題有
☛ （四）5 個網頁設計不容許錯誤