現(xiàn)代網(wǎng)頁設(shè)計的一大重點：字體樣式

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

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

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

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

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

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

文字 48px，行高設(shè)定為 30px
文字 48px，行高設(shè)定為 30px

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

實際字體樣式搭配再網(wǎng)頁上呈現(xiàn)的大小

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

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

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

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

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

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

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

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

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

字級影響很多，卻也僅是整體網(wǎng)頁設(shè)計的一部分

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

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

其他網(wǎng)頁字級的單位

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

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

BONUS 手機字型與電腦版不同

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

你是網(wǎng)頁設(shè)計公司的客戶，還是設(shè)計公司？來看看系列文：

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