一個非創意性質的網頁，最重要的內容，就是文字。出現了文字，就會出現文字排版、字體選擇、字體顏色大小粗細等細節。下面小編為大家整理了網頁設計字體基礎篇，希望能幫到大家！

注：以下內容只針對英文字體

字體之間最大的差異在于字體與字體之間，形體的差異。但是很多字體（特別是英文字體）之間，差異不大，有些新字體甚至是對已有字體進行了細微的改造后產生的。于是，就把字體分成了五個系列：襯線字體（serif）、無襯線字體（sans-serif）、等寬字體（fixed-width fonts）、仿手寫字體（cursive fonts）、裝飾用字體（fantasy fonts）。

1、襯線字體

「襯線」指的是是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同,所以「襯線」又被稱為「字腳」。

優點：襯線字體容易識別，它強調了每個字母筆畫的開始和結束，因此易讀性比較高，在整文閱讀的情況下，適合使用serif字體進行排版，易于換行閱讀的識別性，避免發生行間的閱讀錯誤和產生視覺疲勞。相對于襯線體的機械冰冷，而襯線字體更為嚴肅莊重，更具有溫度，古典的美感。所以在書籍、報紙和雜志中大段落文字的排版，襯線體始終占據著壓倒性的優勢。

2、無襯線字體

無襯線體（sans-serif）專指西文中沒有襯線的字體，與漢字字體中的黑體相對應。與襯線字體相反，該類字體通常是機械的和統一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉角。

優點：因為無襯線的字體結構簡單，在同等字號下，無襯線的字體看上去要比有襯線的更大，結構也更清晰，所以在分辨率較低的電子屏幕，和移動設備上無襯線體有著很明顯的優勢。因為天然的技術感和理性氣質，無襯線字體多為科技型企業所青睞。

3、等寬字體

等寬字體（monospaced font）是指字符寬度相同的電腦字體。在傳統西文印刷中，比例字體可以提高單詞的可讀性。但因早期的電腦顯示器、打字機，由于技術的局限，無法進行字母寬度的比例調整，因此將每個字元都制作成一樣的寬度，從而形成了等寬字體。

優點：精確性高，多用于程序編程。由程序猿的'工作特性：編寫代碼。編寫代碼這種工作具有一個其他文字工作所不具有的特殊要求：就是編寫出來的代碼要求在每一個單個字符的級別上做到100%的精確性。

4、仿手寫字體

仿手寫字體（cursive fonts）顧名思義就是模仿手寫字體。手寫體，比較個性，通常用于標題、logo等等。手寫體是一款優點和缺點都比較明顯的字體。

優點：特征比較明顯、風格多樣化、字體連貫流暢、觀賞性極佳，具有一定的藝術性。多用于節日，藝術性，個性化企業等網頁。

缺點：就是字符占位比較大，識別困難。不利于閱讀，字體文件相對比較大，影響網頁加載速度。

5、裝飾用字體

裝飾用字體。多數用于標題，極具個性。

裝飾用字體極具個性，字體繁多，藝術字體無法對其的大小、形狀下一個統一的定論，所以沒有默認字體，實用性差，在網頁中，也通常很少用到，除非你有特殊的用處創意性的設計。

網頁設計需要將圖片和文字相結合，達到融合的境界，當然文字的設計也是有一定的規范的，下面是關于網頁設計字體設計規范，歡迎參考！

1、header導航文字12號或14號;

2、menu導航文字14—18號;

3、sidebar文字12號或14號，

4、一級菜單使用14號、二級菜單使用12號

或一級菜單使用12號加粗、二級菜單使用12號

5、footer 文字12號或14號

8、按鈕文字：比如登錄、注冊頁面按鈕或其他按鈕，文字14—16號，可根據實際情況調整大小或加粗。

在蘋果官網中，產品展示文字以64號和32號搭配，文字內容簡短有力，可讀性強，同時非常具有視覺沖擊力，突出顯示了品牌特征。

1.行寬

2.行高

比如12號字體，行間距是12px—18px，段落間距則是18px—24px。

另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見的。

3.行對齊

通常情況下，建議在頁面上只使用一種文本對齊，盡量避免兩端對齊

4.文字留白

在排版文字時，在版面需要留出空余空間，留白面積從小到大應該遵循的順序是：字間距、行間距、段間距。此外，在排版內容區之前，需要根據頁面實際情況給頁面四周留出余白。

5、crap原則(carp)

對比(contrast)、重復(repetition)、對齊(alignment)、親密性(proximity)

字體：中文：宋體，微軟雅黑，方正系列(無狀態)

字號：網頁中正文/導航字號在12px-18px之間

英文可以偏小一些 10px-16px

再小識別性就不是特別好了

win最常見的.字體，小字體點陣，大字體truetype，但是大字體并不好看，所以最好別做標題。

微軟雅黑給人的感受包括平和、干凈、簡單、平靜、專業

mac下的默認中文。

helvetica:

被評為設計師最愛的字體，realist風格，簡潔現代的線條，非常受到追捧。在mac下面被認為是最佳的網頁字體，在windows下由于hinting的原因顯示很糟糕。

arial:

lucida family:

lucida grande是mac os ui的標準字體，屬于humanist風格，稍微活潑一點。mac下的顯示要比win下好。

verdana:

專門為了屏顯而設計的字體，humanist風格，在小字號下仍可以清楚顯示，但是字體細節缺失嚴重，最好別做標題。

tahoma:

也是humanist風格，字體和verdana有點像，但是略窄一些，counter略小，曾經是windows的標準字體，mac 10.5之后默認也有安裝。

verdana：

是一套無襯線字體，由于它在小字上仍有結構清晰端整、閱讀辨識容易等高品質的表現，因而在1996年推出后即迅速成為許多領域所愛用的標準字型之一。

georgia:

基本上適合正文屏顯的襯線字體，非georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還算ok。

trebuchet、georgia、times new roman、arial、lucida等字體在26px或更大像素時效果是比較好的，非常適合作為正文的標題。

第一類，穩定型(協調，齊全，穩定，高質)

微軟雅黑、冬青黑體、宋體、華文細黑、方正正中黑、方正蘭亭系列

第二類，剛硬，銳利，清晰，強烈

(更適用大氣，熱烈，權威，聲明等主題)

第三類，輕松，手寫，可愛，童趣，親切

(適用于，游戲娛樂活動海報，h5廣告頁面，兒童/女性主題)

第四類，靈動，清新，秀雅，精致，古韻

(適用于復古，典雅，傳統，品質，靈動等主題)