網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧

本文格式為Word版，下載可任意編輯——網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧

字體是網(wǎng)站最根本也是最重要的一個(gè)元素，選擇一個(gè)群眾化的字體，符合視覺(jué)美觀的大小，設(shè)置恰到好處的顏色其實(shí)是一個(gè)不能忽略的網(wǎng)站優(yōu)化要點(diǎn)，下面我就為大家介紹網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧，來(lái)看看吧，就跟隨我一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們我!

上網(wǎng)在線閱讀，是大多人獲取信息的重要途徑。用戶(hù)會(huì)在網(wǎng)上閱讀到大量的新聞及各類(lèi)文章，更加是網(wǎng)絡(luò)小說(shuō)，這些頁(yè)面表示的主體就是通篇大段的文字。對(duì)于這種看似簡(jiǎn)樸的文字堆砌的頁(yè)面，有沒(méi)有人怨恨過(guò)："這樣的頁(yè)面還需要出效果圖啊?'作為網(wǎng)頁(yè)設(shè)計(jì)師的你是怎樣處理這樣的界面的?

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

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

熟悉網(wǎng)頁(yè)設(shè)計(jì)中的"字'

首先，我們簡(jiǎn)樸將網(wǎng)頁(yè)里的文字分為可替換和不成替換兩個(gè)片面。

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

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

下面這個(gè)設(shè)計(jì)中所使用的字體就經(jīng)過(guò)了確定的設(shè)計(jì)，字體更換并不特別輕易。

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

字形的查看

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

在挑揀字體之前，首先查看圖片里的形態(tài)特征。假設(shè)配圖是以插畫(huà)的方式呈現(xiàn)，那么插畫(huà)里的風(fēng)格細(xì)節(jié)，以及此類(lèi)風(fēng)格所表達(dá)出的年頭感和空間空氣，都供給給你挑揀與其所搭配字體的依據(jù)。譬如英文中的無(wú)襯線體通常較為現(xiàn)代，而襯線體較為古典。

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

如下設(shè)計(jì)里的配圖都是零散的矩形，因此與此相應(yīng)采用的字體為graphik，這個(gè)字體的特點(diǎn)也是表現(xiàn)出分外明顯的幾何邊緣。

以上的字形所帶來(lái)的形態(tài)特征與配圖相響應(yīng)即是一個(gè)能讓圖文實(shí)現(xiàn)完備搭配的方式之一，此外，我們知道一些特殊的風(fēng)格化字體也能表達(dá)出更加的空氣。

網(wǎng)頁(yè)設(shè)計(jì)中字體和文字搭配的技巧

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

從這幾款英文字體的實(shí)例圖文配中，我們需要配以對(duì)"形'的查看解構(gòu)才能。也同時(shí)需要對(duì)字體所承載的風(fēng)格特征作出確定的歸類(lèi)。非但英文需要精挑細(xì)選，中文也需要專(zhuān)心的斟酌，而不能以期望偶遇一款好看的字體，以好看為目的舉行設(shè)計(jì)，最終結(jié)果都是失敗之作。

字體還可以經(jīng)過(guò)確定的設(shè)計(jì)，在原有的字體根基上舉行確定的"變形'，這當(dāng)然就更不能頻繁更換。根據(jù)主題而舉行確定的"微調(diào)'，讓空氣表達(dá)得更加充實(shí)立體。

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

字距和行距

查看字形，用你敏銳的設(shè)計(jì)師的眼光來(lái)識(shí)別不同字體的特征，這是挑揀對(duì)比大的字體時(shí)需要具備的才能。因此，分外適合用在首圖、Banner等需要將文字做成圖片所表示的處境下。而我們的字體還有形成段落舉行表示的時(shí)候。這時(shí)，形的特征逐步隱去，我們更多關(guān)注字與字之間的關(guān)系，即字距。

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

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

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

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

當(dāng)字體變?yōu)榇怪北硎緯r(shí)，更理應(yīng)拉寬上下字距。這是由于我們?nèi)搜鄄⒉皇熘O上下依次的閱讀習(xí)慣，假設(shè)字距較近那么輕易形成字與字的視覺(jué)粘連。

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

較大的行距和較大的字距一樣都能傳遞出緊湊和輕松的不同之感，同時(shí)，行距也關(guān)聯(lián)著字體本身的色調(diào)、字距以及字體大小以及字體最終的形態(tài)。英文的行距可以以1.5倍作為標(biāo)準(zhǔn)尺度，然而一切規(guī)矩都是依靠