網(wǎng)站建設中字形合一，網(wǎng)頁(yè)設計中的圖文配發(fā)布者：本站     時(shí)間：2022-03-17 15:03:34

有人說(shuō)，中文網(wǎng)頁(yè)的設計其實(shí)沒(méi)有字體設計這一環(huán)節，因為在網(wǎng)頁(yè)中能用到的中文字體非常有限，能用的也只有黑體、宋體、微軟雅黑等，這給中文網(wǎng)頁(yè)的美感帶來(lái)了折損。相比英文對字體的斟酌，網(wǎng)頁(yè)上的中文字體顯得太隨意。

當然，這種說(shuō)法有一定的正確性，但我們應該換個(gè)角度看。中文的網(wǎng)頁(yè)中的字體的確是局限在這幾款字體中，但不代表中文網(wǎng)頁(yè)就沒(méi)有字體設計這一環(huán)節。

認識網(wǎng)頁(yè)設計中的“字”
首先，我們簡(jiǎn)單將網(wǎng)頁(yè)里的文字分為可替換和不可替換兩個(gè)部分。

可替換的文字也就是能通過(guò)后臺管理進(jìn)行編輯的文字，例如博客文章、產(chǎn)品說(shuō)明等。不可替換的文字是在網(wǎng)頁(yè)制作過(guò)程中所定下的，后臺管理并不提供文字的編輯條件，通過(guò)網(wǎng)頁(yè)代碼才能修改，例如導航、Banner等。不可替換的文字并非完全不能修改，只是修改一次會(huì )耗費一定的成本，因此修改的間隔時(shí)長(cháng)，比如導航的修改需要經(jīng)過(guò)代碼，而B(niǎo)anner里的文字的修改也需要重新設計Banner圖片。

可替換的文字只能使用網(wǎng)頁(yè)所允許給定的字體，因此中文字體的選擇面較窄。但不可替換的文字則可以通過(guò)圖片等方式展示，將其制作成透明背景的圖片，這時(shí)，字體的使用和排版都是靈活的，設計師就會(huì )有足夠的創(chuàng )作自由度。

下面這個(gè)設計中所使用的字體就經(jīng)過(guò)了一定的設計，字體更換并不十分容易

字形合一，網(wǎng)頁(yè)設計中的圖文配

這里所謂的與圖片的搭配，也是指的這類(lèi)可以經(jīng)過(guò)設計的文字。

字形的觀(guān)察
字體首先是一種圖形，然后再是可承載信息的文字，因此，當你挑選一款字體來(lái)搭配圖片的時(shí)候，你需要集中去觀(guān)察文字的形態(tài)特征是否和圖片協(xié)調。

在挑選字體之前，首先觀(guān)察圖片里的形態(tài)特征。如果配圖是以插畫(huà)的方式呈現，那么插畫(huà)里的風(fēng)格細節，以及此類(lèi)風(fēng)格所表達出的年代感和空間氛圍，都提供給你挑選與其所搭配字體的依據。比如英文中的無(wú)襯線(xiàn)體通常較為現代，而襯線(xiàn)體較為古典。

下面的頁(yè)面中的配圖經(jīng)過(guò)曲線(xiàn)造型，因此，與此搭配的文字采用了Adelle無(wú)襯線(xiàn)體，可以看出字體中的圓弧處理和配圖中曲線(xiàn)的流轉造型相呼應。

字形合一，網(wǎng)頁(yè)設計中的圖文配

如下設計里的配圖都是零散的矩形，因此與此相應采用的字體為graphik，這個(gè)字體的特點(diǎn)也是表現出非常清晰的幾何邊緣。

字形合一，網(wǎng)頁(yè)設計中的圖文配

以上的字形所帶來(lái)的形態(tài)特征與配圖相呼應即是一個(gè)能讓圖文實(shí)現完美搭配的方式之一，此外，我們知道一些特殊的風(fēng)格化字體也能表達出特別的氛圍。

例如下圖中的機器看上去非常有80年代的機械感，而這種造型也營(yíng)造一種技術(shù)世界里的懷舊感，因此像素文字最適合與此相搭配。

字形合一，網(wǎng)頁(yè)設計中的圖文配

從這幾款英文字體的實(shí)例圖文配中，我們需要配以對“形”的觀(guān)察解構能力。也同時(shí)需要對字體所承載的風(fēng)格特征作出一定的歸類(lèi)。非但英文需要精挑細選，中文也需要認真的斟酌，而不能以期待偶遇一款好看的字體，以好看為目的進(jìn)行設計，最終結果都是失敗之作。

字體還可以經(jīng)過(guò)一定的設計，在原有的字體基礎上進(jìn)行一定的“變形”，這當然就更不能頻繁更換。根據主題而進(jìn)行一定的“微調”，讓氛圍表達得更加豐滿(mǎn)立體。

如將圓圓的字母中空的部分填實(shí)增加了可愛(ài)感，與配圖的角色形象也非常搭配。

字形合一，網(wǎng)頁(yè)設計中的圖文配

字距和行距
觀(guān)察字形，用你敏銳的設計師的眼光來(lái)區別不同字體的特征，這是挑選比較大的字體時(shí)需要具備的能力。因此，非常適合用在首圖、Banner等需要將文字做成圖片所展示的情況下。而我們的字體還有形成段落進(jìn)行展示的時(shí)候。這時(shí)，形的特征逐漸隱去，我們更多關(guān)注字與字之間的關(guān)系，即字距。

一般情況下，字距的選擇總是根據字體本身以及其和空間的關(guān)系來(lái)決定，當字距較小時(shí)，傳遞出一種緊湊感，而字距寬松又能表達出一種輕松感。

比如大型展示字體的距離總是以相互靠近為佳，因為字體本身已經(jīng)占據了足夠的空間，如果再在字體間增加空間就會(huì )讓整個(gè)空間被填滿(mǎn)。因此，我們也可以說(shuō)，字距根據整個(gè)空間進(jìn)行調整確定。與此同時(shí)，配圖也是以較為集中感的方式展示，所有箭頭真是“萬(wàn)夫所指”，因此字距縮小，略有集中感。

字形合一，網(wǎng)頁(yè)設計中的圖文配

而相對較小的字體，略帶輕松和閑適，與此搭配的圖片也是一堆木材，聯(lián)想到木匠的自然愜意感。

字形合一，網(wǎng)頁(yè)設計中的圖文配

在中文的世界里同樣適用，然而不同的是，中文字體的距離應該更加遠一點(diǎn)，以保持單個(gè)字體的獨特展示度。因為中文的每個(gè)單字都可以看成一幅圖畫(huà)，擁有一定的意境，因此，保持字距是中文展示能保持美感的一個(gè)關(guān)鍵。

字形合一，網(wǎng)頁(yè)設計中的圖文配

當字體變?yōu)榇怪闭故緯r(shí)，更應該拉寬上下字距。這是由于我們人眼并不熟悉上下順序的閱讀習慣，如果字距較近則容易形成字與字的視覺(jué)粘連。

而行距則不同，當你考察行距時(shí)，這時(shí)字體已經(jīng)變成了段落，成片出現的字體則是段落，你要關(guān)注的就應該是整個(gè)段落的灰度值。所謂灰度值就是字體的疏密。

較大的行距和較大的字距一樣都能傳遞出緊湊和輕松的不同之感，同時(shí)，行距也關(guān)聯(lián)著(zhù)字體本身的色彩、字距以及字體大小以及字體最終的形態(tài)。英文的行距可以以1.5倍作為標準尺度，然而一切規則都是依靠條件而存在，如果在特殊的場(chǎng)合，依然可以選用更大或更小的行距展示。

這一段落的字體等安排配合了配圖中所傳遞出的兒童的教育成長(cháng)這一主題，選用較為圓潤的字體，字距較寬松，體現出輕松的氛圍。字體本身采用和LOGO一樣的色彩，比黑色字體更透露出趣味。

字形合一，網(wǎng)頁(yè)設計中的圖文配

后記
厘清字體的字距所創(chuàng )造的疏密，行距帶來(lái)段落的灰度幾何，配合字體本身的展示形態(tài)，你才能更好的選擇與此相稱(chēng)的配圖。多了解字體，對不同風(fēng)格的字體的形態(tài)有大致的了解，在使用時(shí)才不會(huì )手忙腳亂去盲目找尋適合的字體，平時(shí)對字形的積累極為重要。記得為自己建立一個(gè)字庫，才會(huì )在圖文搭配時(shí)得心應手。