網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧
字體是網(wǎng)站最基本也是最重要的一個(gè)元素,選擇一個(gè)大眾化的字體,符合視覺美觀的大小,設(shè)置恰到好處的顏色其實(shí)是一個(gè)不能忽視的網(wǎng)站優(yōu)化要點(diǎn),下面小編就為大家介紹網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧,來看看吧,就跟隨百分網(wǎng)小編一起去了解下吧,想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
上網(wǎng)在線閱讀,是大多人獲取信息的重要途徑。用戶會(huì)在網(wǎng)上閱讀到大量的新聞及各類文章,特別是網(wǎng)絡(luò)小說,這些頁(yè)面展示的主體就是通篇大段的文字。對(duì)于這種看似簡(jiǎn)單的文字堆砌的頁(yè)面,有沒有人抱怨過:“這樣的頁(yè)面還需要出效果圖啊?”作為網(wǎng)頁(yè)設(shè)計(jì)師的你是怎樣處理這樣的界面的?
有人說,中文網(wǎng)頁(yè)的設(shè)計(jì)其實(shí)沒有字體設(shè)計(jì)這一環(huán)節(jié),因?yàn)樵诰W(wǎng)頁(yè)中能用到的中文字體非常有限,能用的也只有黑體、宋體、微軟雅黑等,這給中文網(wǎng)頁(yè)的美感帶來了折損。相比英文對(duì)字體的斟酌,網(wǎng)頁(yè)上的中文字體顯得太隨意。
當(dāng)然,這種說法有一定的正確性,但我們應(yīng)該換個(gè)角度看。中文的網(wǎng)頁(yè)中的字體的確是局限在這幾款字體中,但不代表中文網(wǎng)頁(yè)就沒有字體設(shè)計(jì)這一環(huán)節(jié)。
認(rèn)識(shí)網(wǎng)頁(yè)設(shè)計(jì)中的“字”
首先,我們簡(jiǎn)單將網(wǎng)頁(yè)里的文字分為可替換和不可替換兩個(gè)部分。
可替換的文字也就是能通過后臺(tái)管理進(jìn)行編輯的文字,例如博客文章、產(chǎn)品說明等。不可替換的文字是在網(wǎng)頁(yè)制作過程中所定下的,后臺(tái)管理并不提供文字的編輯條件,通過網(wǎng)頁(yè)代碼才能修改,例如導(dǎo)航、Banner等。不可替換的文字并非完全不能修改,只是修改一次會(huì)耗費(fèi)一定的成本,因此修改的間隔時(shí)長(zhǎng),比如導(dǎo)航的修改需要經(jīng)過代碼,而Banner里的文字的修改也需要重新設(shè)計(jì)Banner 圖片。
可替換的文字只能使用網(wǎng)頁(yè)所允許給定的字體,因此中文字體的選擇面較窄。但不可替換的文字則可以通過圖片等方式展示,將其制作成透明背景的圖片,這時(shí),字體的使用和排版都是靈活的,設(shè)計(jì)師就會(huì)有足夠的創(chuàng)作自由度。
下面這個(gè)設(shè)計(jì)中所使用的字體就經(jīng)過了一定的設(shè)計(jì),字體更換并不十分容易。
這里所謂的與圖片的搭配,也是指的這類可以經(jīng)過設(shè)計(jì)的文字。
字形的觀察
字體首先是一種圖形,然后再是可承載信息的文字,因此,當(dāng)你挑選一款字體來搭配圖片的時(shí)候,你需要集中去觀察文字的形態(tài)特征是否和圖片協(xié)調(diào)。
在挑選字體之前,首先觀察圖片里的形態(tài)特征。如果配圖是以插畫的方式呈現(xiàn),那么插畫里的風(fēng)格細(xì)節(jié),以及此類風(fēng)格所表達(dá)出的年代感和空間氛圍,都提供給你挑選與其所搭配字體的依據(jù)。比如英文中的無襯線體通常較為現(xiàn)代,而襯線體較為古典。
下面的頁(yè)面中的配圖經(jīng)過曲線造型,因此,與此搭配的文字采用了Adelle無襯線體,可以看出字體中的圓弧處理和配圖中曲線的流轉(zhuǎn)造型相呼應(yīng)。
如下設(shè)計(jì)里的'配圖都是零散的矩形,因此與此相應(yīng)采用的字體為graphik,這個(gè)字體的特點(diǎn)也是表現(xiàn)出非常清晰的幾何邊緣。
以上的字形所帶來的形態(tài)特征與配圖相呼應(yīng)即是一個(gè)能讓圖文實(shí)現(xiàn)完美搭配的方式之一,此外,我們知道一些特殊的風(fēng)格化字體也能表達(dá)出特別的氛圍。