有人說，網頁設計其實沒有字體設計這一環節，因為能應用於網頁的字體非常有限，這會給網頁的美感帶來折損。雖然網頁可使用的字體的確是局限於幾款字體中，但這並不表示我們可以隨意選用字體，而是透過文字的形態特徵、字距、行距，為網頁設計和圖片風格找到協調的字體，那麼，如何為網頁設計挑選合適的字體?

認識網頁設計中的「字」

在網頁設計中，文字可分為可替換和不可替換兩個部分。

可替換文字：指在後台管理上直接進行編輯的文字(如Blog文章、產品說明等)。由於可替換文字只能使用網頁所允許而定的字體，因此字體選擇面上會相對較窄。

不可替換文字：指在網頁製作過程中所定下，後台管理並不提供文字編輯條件，而是需要通過網頁代碼修改的文字(如導航、Banner等)。不可替換文字可通過圖片等方式展示，因此字體的使用和排版會相對更為靈活，能給設計師提供足夠的創作自由度。

如何為網頁設計挑選合適的字體?

字體首先是一種圖形，然後才是可承載信息的文字，因此為網頁設計挑選合適字體時，需要觀察文字的形態特徵與網頁風格和圖片風格是否協調。

① 觀察文字的形態特徵

如果配圖是以插畫方式呈現，那麼插畫里的風格細節以及所表達的年代感和空間氛圍感，就會成為字體選擇的依據，比如現代感強的插畫可以選擇無襯線字體，古典味重的插畫則可考慮襯線字體。

▲ 頁面中的配圖經過曲線造型，搭配採用Adelle無襯線字體，可以看出字體中的圓弧處理與配圖中曲線的流轉轉型相呼應。

▲ 網頁設計中的配圖由零散的矩形組成，與此相應選用表現出清晰幾何邊緣的Graphik字體。

除了針對配圖風格考慮合適的字形形態特徵，我們還可以利用一些特殊的風格化字體表達出特別的氛圍：

▲ 圖中的機械人看上去非常有年代感和科技感，因此選擇像素文字是最適合不過。

另外，字體設計還可在原有的字體基礎上，根據網頁主題進行微調，讓氛圍表達的更加豐滿立體。

▲ 將圓圓的字母中空的部分填實，不僅讓界面增添可愛感，還與配圖的角色形象非常搭配。

總體上說，要為網頁設計挑選合適的文字，我們需要對字形有較強的觀察和解構能力，同時需要對字體所承載的風格特徵作出一定的歸類。無論是英文，還是中文，亦或是其他語言文字，都需要精挑細選、認真斟酌，而不是好看的目的進行設計，這隻會給網頁的美感帶來折損。

② 考慮文字的字距

在網頁設計過程中，我們需要用敏銳的眼光來觀察字形，並區分不同字體的特徵，這是在挑選較大文字時需要具備的能力，比如首圖、Banner等文字。但在進行段落設計時，字形特徵會逐漸隱去，此時我們更多是關注字與字之間的關係，即字距。

一般情況下，字距的考慮，是根據字體本身以及它與空間的關係來決定。當字距較小時，UI設計會展現一種緊湊感;相反，當字距顯得寬鬆時，則會表達出一種輕鬆感。

▲ 由於大型字體本身已經佔據整體空間，如果在字體間增加空間會讓整個界面顯得非常「滿」;同時，配圖以較為集中感的方式展示，所有箭頭的指向引導用戶的視線聚焦於界面中的文字，因此縮小字距能增加文字的集中感。

▲ 相對於較小的文字可以透過拉大字距，使界面凸顯出輕鬆與閑適的視覺感受;加上，與之搭配的木材圖片，讓人輕易聯想到木匠的自然愜意感。

③ 考慮文字的行距

行距的考慮與字距不同，通常需要考慮行距時，這意味界面中的文字已變成成片出現的段落，此時我們需要關注的是整個段落的灰度，即文字間的疏密。

行距和字距一樣都能傳遞出緊湊和輕鬆的不同之感，同時行距還關聯着字體本身的色彩、字距、字體大小以及字體最終形態。

▲ 配合圖片中的兒童教育成長主題，文字選用較為圓潤的字體，字距和行距也略顯寬鬆，展現出輕鬆的分為。字體採用與Logo一樣的色彩，這比黑色字體更容易透露出趣味。

總之，對不同風格的字體形態有大概的了解，理清字距所創造的疏密，以及行距展現的灰度，才會在圖文搭配時得心應手，而非在使用時手忙腳亂地尋找合適字體。