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

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

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

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

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

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

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

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

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

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

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

標(biāo)題字重 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；（段落間有一個(gè) 30px 的間隔）

標(biāo)題字重 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；（段落間有一個(gè) 30px 的間隔）

標(biāo)題字重 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；（段落間有一個(gè) 30px 的間隔）

標(biāo)題字重 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；(段落間有一個(gè) 30px 的間隔）

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

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

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

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

若是有相關(guān)經(jīng)驗(yàn)的客戶，上述提及之 px 這個(gè)單位勢(shì)必不會(huì)太陌生，一般使用於電腦螢?zāi)唬傅氖敲恳粋€(gè)「像素」（pixel）；pt 則是印刷使用之單位，在電腦中切勿使用。

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

BONUS 手機(jī)字型與電腦版不同

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

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

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