網(wǎng)頁(yè)文字設(shè)計(jì)

時(shí)間：2023-10-07 03:42:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-07 03:42:01 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)文字設(shè)計(jì)：文字不僅是網(wǎng)站信息傳遞的重要載體，也是網(wǎng)頁(yè)中必不可少的視覺符號(hào)，因此，網(wǎng)頁(yè)文字的設(shè)計(jì)不僅影響網(wǎng)頁(yè)的信息傳播效果，而且直接影響頁(yè)面的視覺美感。

認(rèn)識(shí)字體

字體是指文字的風(fēng)格特征。使用不同字體的文字，其筆畫粗細(xì)、結(jié)構(gòu)、形態(tài)等都不同。在計(jì)算機(jī)中，字體主要分為中文字體和西文字體兩種類型。其中，中文字體包括宋體、黑體、仿宋體等；西文字體包括Times New Roman、Arial Black等。除書法體外，無論哪種字體，都是由襯線體和非襯線體演化而成的。

1．襯線體

襯線體在筆畫始末的地方有額外的裝飾，且粗細(xì)會(huì)因筆畫的不同而有所區(qū)別。此外，襯線體強(qiáng)調(diào)筆畫的走勢(shì)及前后聯(lián)系，從而使前后文有更好的連續(xù)性，適合作為正文字體。

宋體與Garamond字體分別是最具代表性的中文和西文襯線體。宋體具有字形方正、橫細(xì)豎粗、撇如刀、捺如掃、點(diǎn)如瓜子等特點(diǎn)。宋體是通用的印刷體，用大號(hào)字時(shí)公正肅穆，不失變化，用小號(hào)字時(shí)清秀典雅，便于識(shí)別。Garamond兼具美觀性和易讀性，被譽(yù)為“襯線之王”，適合用于長(zhǎng)時(shí)間閱讀的文字，西方文學(xué)著作常用Garamond字體作為正文。如圖所示為宋體和Garamond字體的對(duì)比。

2．非襯線體

非襯線體筆劃粗細(xì)基本一致，適合用作標(biāo)題之類需要醒目地方。通常書籍、文檔的正文內(nèi)容很少用非襯線體，而設(shè)計(jì)作品的正文內(nèi)容有時(shí)會(huì)使用非襯線體。

黑體與Arial字體分別是典型的中文和西文非襯線字體。黑體也稱等線體，包括雅黑、美黑、仿黑等，具有橫豎粗細(xì)一致、方頭方尾的特點(diǎn)，文字渾厚有力、樸素大方。Arial字體是西文中常用的無襯線體，其字形干凈、清晰，易于辨認(rèn)。如圖所示為黑體與Arial字體的對(duì)比。

無論是襯線體還是非襯線體，字體都是具有性格的，不同字體的性格存在鮮明的區(qū)別。網(wǎng)頁(yè)美工設(shè)計(jì)師應(yīng)根據(jù)網(wǎng)站風(fēng)格、產(chǎn)品特點(diǎn)選擇合適的字體。如圖所示的文字中選擇分別適合“男人”和“女人”的2種字體并簡(jiǎn)述原因

網(wǎng)頁(yè)文字字體設(shè)計(jì)

文字是傳遞信息的重要媒介，如何選擇字體樣式、筆畫粗細(xì)、字號(hào)與顏色等是網(wǎng)頁(yè)文字設(shè)計(jì)的重要部分。優(yōu)秀的網(wǎng)頁(yè)文字設(shè)計(jì)和排版不僅能夠準(zhǔn)確地傳達(dá)設(shè)計(jì)者的意圖，而且還能使瀏覽者在閱讀時(shí)更加輕松。

1．字體選擇——筆畫粗細(xì)

筆畫較粗的字體能夠傳遞力量感，更易識(shí)別，而筆畫較細(xì)的字體會(huì)更有文藝氣息，更加美觀。網(wǎng)頁(yè)美工設(shè)計(jì)者在選擇字體，設(shè)置筆畫粗細(xì)時(shí)應(yīng)考慮產(chǎn)品特點(diǎn)和網(wǎng)站風(fēng)格。如圖所示Banner的字體以筆畫較細(xì)的宋體為基礎(chǔ)，經(jīng)藝術(shù)化處理后，凸顯產(chǎn)品的文藝氣息和品質(zhì)感，呼應(yīng)“職場(chǎng)”“新品格”的主題

如圖所示Banner的主題是“運(yùn)動(dòng)”“力量”，設(shè)計(jì)師根據(jù)主題選用了筆畫較粗的Arial Black字體，通過顏色變換、圖文層疊的方式將文字與主體進(jìn)行關(guān)聯(lián)，圖文結(jié)合，充分體現(xiàn)了主題的特點(diǎn)。

2．字號(hào)大小

設(shè)置字號(hào)時(shí)應(yīng)考慮文字在網(wǎng)頁(yè)中的閱讀性和美觀性。大號(hào)文字能起到強(qiáng)調(diào)、突出的作用，一般用于標(biāo)題文字；甚至可根據(jù)需要將字號(hào)無限放大，讓文字充當(dāng)背景。小號(hào)文字則適合用于正文或輔助信息。

（1）中文字號(hào)

中文字的結(jié)構(gòu)復(fù)雜且風(fēng)格多變，當(dāng)文字作為網(wǎng)頁(yè)中的正文或輔助信息時(shí)通常在10像素以下便難以識(shí)別，一般需要達(dá)到12像素才能體現(xiàn)出不錯(cuò)的效果。為了兼具閱讀性和美觀性，網(wǎng)頁(yè)中正文常用的中文字號(hào)為10～14像素，如圖所示。

（2）英文字號(hào)

英文字母簡(jiǎn)潔，無復(fù)雜結(jié)構(gòu)，因此在可閱讀的前提下，無論大小，都能顯得簡(jiǎn)潔、清晰。常用的英文正文或輔助信息字號(hào)可設(shè)置為9～13像素，如圖所示。

3．間距大小

間距包括字距與行距2個(gè)方面，它們能影響瀏覽者的視覺體驗(yàn)和心理感受。

字距與行距的比例會(huì)影響瀏覽者視線的移動(dòng)。在設(shè)置正文的文字參數(shù)時(shí)，若字距大于行距，瀏覽者會(huì)在閱讀時(shí)產(chǎn)生疲勞感，容易發(fā)生串行的情況，因此，無論橫排還是豎排文字，字距都應(yīng)小于行距，否則會(huì)使文字內(nèi)容失去延續(xù)性，造成閱讀方向錯(cuò)誤。

當(dāng)文字用于藝術(shù)欣賞、廣告宣傳等時(shí)，文字的不同間距會(huì)產(chǎn)生截然不同的藝術(shù)效果。

（a）是加大文案字距和行距的Banner，給人清新、舒展、時(shí)尚的感覺。

（b）則是緊縮文字間距的Banner，給人壓迫、力量的感覺。該Banner的創(chuàng)意在于將間距較小的文字形成一面墻，從而既生動(dòng)地突出了廣告主題，又傳達(dá)了廣告的主要信息。

4．文字顏色

文字顏色能起到視覺導(dǎo)向作用，甚至通過顏色就能使瀏覽者區(qū)分信息的主次。雖然可以為網(wǎng)頁(yè)文字設(shè)置多種顏色，但黑色和白色始終是使用最廣泛的顏色，特別是在正文文字部分。而廣告中的標(biāo)題、關(guān)鍵詞則可靈活處理。常用的文字顏色選擇方法分別是從網(wǎng)站Logo中提取顏色，如圖

所示；選擇貼近主題的顏色；從產(chǎn)品中提取顏色，如圖

所示。