網頁設計中最基礎的字體排版知識，都在這兒了【內附11個最實用的專業設計網站】

人物 01-22

每日正午十二點，和日美醬說一句：

「

生活美學

」

，會為您推送一條生活物語。我們相約正午，不見不散。

日式の生活美學

隨著互聯網越來越普及

從事網頁設計的設計師也越來越多

對於剛入門的新人而言

如何才能保證自己辛苦設計的網頁

符合網頁設計的要求呢？

首先對最基本的網頁設計規範

要有所認知和了解

【字體的選擇】

對於大多數中國人來說

見過最多的字體應該就是黑體和宋體

這兩種字體是設計的基礎字體

應用在生活的各個場景中

宋體

源於書法體

主要特點是橫細豎粗

筆畫末端帶有三角狀裝飾

字形端莊有力

常運用在文章正文當中

黑體

字的主要特點是橫豎均勻

筆畫相對宋體較為粗壯

常用作文章標題，突出而醒目

但在2006年Windows發布Vista系統時

微軟雅黑體就已代替宋體

成為了新的系統默認字體

why？

因為宋體是一款

襯線字體

受到Windows平台字體渲染技術的限制，

在小字型大小字體渲染方面表現略差，部分字型大小在顯示時會產生鋸齒、模糊，而微軟雅黑是

非襯線字體，

筆畫豐滿、簡潔，常用字型大小的顯示效果相比宋體更為優秀同時識別度更高。

因此，從Vista時代起

微軟雅黑體就作為Windows的系統默認字體

並被沿用至今

常規、加粗、傾斜字形對比

在網頁設計中

為了保證有較好的顯示效果

主要標題的字體可使用微軟雅黑體

次要標題可選用宋體

微軟雅黑體網頁顯示效果

文章的正文可選用宋體

也可使用微軟雅黑體

宋體和微軟雅黑體網頁顯示效果對比

如果網頁設計需要展示英文字元

那麼Arial、Verdana和Tahoma

這幾種系統默認字體是比較推薦的

3種系統默認英文字體

【字型大小使用規範】

網頁設計中一般選用雙數字型大小

字型大小的大小並沒有明確規定

但為了確保正常的閱讀效果

可以參考以下參數

在網頁設計中最小的字型大小一般為12像素；

正文常見字型大小有12像素、14像素和16像素；

標題常見字型大小有18像素、20像素、26像素和30像素。

由於顯示器解析度的不斷提高

12像素的字型大小

在大解析度顯示器中會顯得較小

對用戶閱讀造成一定的困難

因此12像素的字型大小使用頻率比較低

普遍使用的是14像素或16像素

各個字型大小下的宋體、微軟雅黑體顯示效果

雖然兩種都是常用字體

但宋體出現的頻率並不高

實際運用得更為廣泛的

是

微軟雅黑

因為微軟雅黑在設計上

比宋體少了一些裝飾性

看起來更顯粗壯有力

辨識度上也更高

尤其是小字型大小的顯示效果

視覺感更為清晰與明朗

【網頁標題如何設計

看起來會比較舒服？

】

字體清晰疏闊

字型大小醒目易讀

例如網易新聞

標題樣式一般設置為微軟雅黑體字體

36像素的字型大小

騰訊新聞的標題樣式

一般設置為微軟雅黑體字體

26像素的字型大小

【段落、行間距規範】

用戶在網站上獲取信息

主要依賴的就是閱讀

因此好的閱讀體驗非常重要

作為信息展示的主體

漂亮的文字排版

巧妙的留白

都能為整個網頁增色不少

文字排版中

段落中「行長」與「對齊方式」的設置

行長主要指段落文字的寬度，一般行越長，行間距越大，否則用戶在閱讀時很容易串列。在網頁正文中，漢字一般以每行顯示30~40個字為宜，英文一般以每行顯示40~70個字母為宜。

段落對齊方式主要有4種

包括左對齊、右對齊

居中對齊、兩端對齊

國內大段文字的設計

一般是根據中國用戶的閱讀習慣

將對齊方式設置為左對齊

段落中「行間距」的設置

行間距指段落中行與行之間的距離，

作為段落中的留白，行間距讓字與字之間有了可呼吸的空間。過小的行間距會使頁面變得擁擠不堪，增加用戶錯讀的可能性，而過大的行間距則會佔用大量的頁面空間，缺乏美感。選擇適當的行間距不僅可以提升文字的易讀性，也可以最大限度地利用好頁面空間。

傳統中文文檔默認行間距一般為1.5倍

在現階段的網頁設計中

漢字一般使用1.8~2倍的行間距。

不同數值的中文行間距

英文段落一般選擇1.5倍行間距

【網頁設計的標註規範】

網頁設計師與前端開發人員的對接關係

往往非常緊密

而設計圖的標準化標註

可以提高前端開發人員的工作效率

效果圖的標註一般包括以下3個部分

頁面中控制項的顏色、尺寸、交互效果（如按鈕、表單等）。

字體顏色、字型大小。

頁面中各個模塊的尺寸和間距。

效果圖標註中需特別的4個問題

保證標註的文字清晰易讀。

標註所使用的顏色應與背景色區分。

標註應盡量在空白區域，不要對原圖造成視覺干擾。

標註信息應條理清楚，同一模塊的標註應擺放在同一位置，適當留有間隙，方便開發人員閱讀。

某視覺設計稿的效果圖標註

標註工具有很多種

MarkMan（馬克鰻）

支持Windows和Mac雙系統操作

界面簡潔，使用簡單易操作

非常適合設計初學者使用

MarkMan啟動界面

MarkMan操作界面

【專業設計網站推薦】

國內網站

站酷（Zcool）

站酷網是一個人氣設計師互動平台

聚集中國大量的專業設計師

包括平面、網頁以及插畫設計師等

涉及藝術創作、交互設計、影視動漫

時尚文化和廣告創意等領域

花瓣

花瓣網是一個類似Pinterest的網站

為用戶提供簡單的素材採集服務

幫助用戶將自己喜歡的圖片重新組織和收藏

設計師可以從中尋找設計靈感和設計素材

UI中國

UI中國的前身為 Iconfans

是一個專業的界面交互設計平台

主要為設計師們提供交流學習和作品展示

會員均為職業UI設計師，專業性較強

因此也是UI設計師人才流動的集散地

Uehtml

Uehtml是優藝客

（原韓雪冬網頁設計工作室）

旗下的設計師交流平台

專為網頁設計和界面設計而生

擁有較多創意精美的網頁設計作品

優設

國內比較專業的網頁設計師交流學習平台

有許多關於設計師的職業理念

和從業經驗的收集與分享

另有好用的設計小插件可供下載

國外網站

Dribbble

面向創作家、藝術工作者、設計師等

是創意類作品分享的平台

提供作品在線服務

供網友在線查看已經完成的作品

或者正在創作的作品的交流網站

Behance

Behance 是一個設計社區

在這裡創意設計人士可以展示自己的作品

欣賞別人分享的創意作品

還可以通過評論、關注、站內簡訊等方式

與這些設計師進行互動

模板下載網站

Freebiesbug

一個免費PSD資源下載平台

包括APP設計、icon設計

Web展示模板、前端代碼

以及字體等素材資源

PSD REPO

大量精品PSD源文件下載平台

涵蓋目前設計主流方向

如icon、移動端設計、按鈕設計等

且均可免費下載

365PSD

有付費和免費兩大類資源可供下載

種類繁多，方向劃分較為詳細

包括建築、廣告、Logo、動物等

MaterialUp

包含iOS、Android、Web等

平台的相關設計資源

各類素材與當下潮流趨勢緊密貼合

新書推薦