海淘科技的【設(shè)計(jì)資訊】提供網(wǎng)頁(yè)設(shè)計(jì)中字體設(shè)計(jì)要規(guī)范。看完下面這張圖你肯定能明白，網(wǎng)頁(yè)設(shè)計(jì)中字體設(shè)計(jì)也要規(guī)范，來(lái)來(lái)看看這張圖。

看了上面這張圖你感覺(jué)怎么樣，是不是閱讀起來(lái)非常的難受？那就對(duì)了！實(shí)際上折磨你眼睛的問(wèn)題有怎么幾個(gè)點(diǎn)：

1. 字體樣式很多，雜亂無(wú)章
2. 采用的字體不易識(shí)別
3. 字體和內(nèi)容的氣氛搭配

如何避免這樣的結(jié)果發(fā)生呢？總語(yǔ)：通過(guò)字體設(shè)計(jì)規(guī)范可以幫助你做出符合要求的設(shè)計(jì)。

一、字不過(guò)三

許多設(shè)計(jì)者們講過(guò)，字體顏色不能超過(guò)三個(gè)，其實(shí)在同一個(gè)APP或者在一個(gè)設(shè)計(jì)作品中的字體也不要過(guò)三種樣式，一般情況下，在每個(gè)設(shè)計(jì)之中采用一到兩個(gè)字體樣式就可以了，然后通過(guò)對(duì)字體大小或顏色來(lái)強(qiáng)調(diào)重點(diǎn)文案。

瀏覽過(guò)上面這張圖中的三個(gè)界面設(shè)計(jì)，有什么感想，這三個(gè)界面的設(shè)計(jì)規(guī)律是，使用字體的大小來(lái)劃分出界面內(nèi)容中的等級(jí)關(guān)系的。第一張“螞蟻花唄”中的banner圖，只用了一種字體來(lái)區(qū)分主標(biāo)題和副標(biāo)題的關(guān)系。則網(wǎng)頁(yè)設(shè)計(jì)同樣的道理，采用一種字體即可，使用文字的大小來(lái)對(duì)比同樣可以做出很好的構(gòu)圖與設(shè)計(jì)。

文字的樣式使用太多，會(huì)讓別人覺(jué)的你不夠?qū)I(yè)！

二 、字與背景的層次要分明

查看過(guò)上面兩張Banner圖有沒(méi)有發(fā)現(xiàn)了同樣的問(wèn)題，字體與背景融合在一起了，在閱讀時(shí)怎么可能會(huì)方便。這樣的大廣告圖是不可能達(dá)到廣告的效果？同樣在做移動(dòng)端頁(yè)面的時(shí)候也是同理，選擇一個(gè)下面亮面模糊的背景，用戶在使用光量很強(qiáng)的時(shí)候不可能看的清楚。

所以，便于閱讀與便于使用才是用戶的最基本（根本）的訴求!

三、字體樣式與氣氛要匹配

看到上面這張圖，你的第一個(gè)感覺(jué)就是不是，看不懂！認(rèn)真看一下才得知是眼部精華油。漢字的風(fēng)格與圖片或者海報(bào)整體的設(shè)計(jì)風(fēng)格不一致，就不會(huì)帶動(dòng)用戶們的想購(gòu)買(mǎi)的沖動(dòng)。接下來(lái)我們看一下下面這張圖。

我們通過(guò)結(jié)合文案的內(nèi)容，在圖片設(shè)計(jì)風(fēng)格中使用比較明快剛勁的設(shè)計(jì)風(fēng)格，字體風(fēng)格選用比較剛勁有力的造字工坊勁黑體。這個(gè)氣氛都非常的匹配，用戶代入感也非常的強(qiáng)。

活動(dòng)banner圖中的氣氛是這個(gè)活動(dòng)設(shè)計(jì)的重中之重，挑選合適的字體樣式，才能加強(qiáng)目標(biāo)人群的購(gòu)買(mǎi)欲與點(diǎn)擊欲。

以風(fēng)格分類(lèi)常用的字體有以下幾種類(lèi)型

1.平穩(wěn)型字體

方正蘭亭系列的字體樣式，是網(wǎng)站建設(shè)中網(wǎng)頁(yè)設(shè)計(jì)的要使用字體，這個(gè)字體的特征是穩(wěn)重而細(xì)膩，并且富有時(shí)尚科技的感覺(jué)。再來(lái)看一下下面的這張?zhí)O果（吃的蘋(píng)果哦，嘻嘻）網(wǎng)頁(yè)的設(shè)計(jì)，就知道了。采用方正蘭亭超細(xì)的字體的感覺(jué)，是不是很高端！

方正蘭亭系列字體，使用在科技產(chǎn)品的網(wǎng)站之中，同樣合適。因?yàn)樗哂蟹€(wěn)重和有科技感嘛。

2.剛勁有力型

張海山的字體屬于剛勁有力類(lèi)型的，年輕有力。

3.可愛(ài)型字體

可愛(ài)型字體實(shí)屬方正經(jīng)黑字體。

漢儀小麥字體設(shè)計(jì)則是給人搞怪的感覺(jué)，有木有... ...

我們想要各種毛筆字體，可以使用毛筆字生成器，用自由的書(shū)法在線生成器在線，在線生成下載，使用這個(gè)方法可以很快的找到需要的書(shū)法字體，這招管用!

二、界面中文字使用的規(guī)則

1.通曉系統(tǒng)字體

1. iOS系統(tǒng)中使用的是蘋(píng)方字體系列，為了加強(qiáng)層次感和層次關(guān)系蘋(píng)方系列，從細(xì)至粗有著不一樣的字體樣式哦。
2. Android的默認(rèn)字體是Roboto和Noto系列，Roboto有6種字樣：Thin、Light、Regular、Medium、Bold 和 Black。
3. Noto有7種字樣：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

2.統(tǒng)一字號(hào)

一個(gè)手機(jī)軟件，不同位置的字體字號(hào)，你能準(zhǔn)確地說(shuō)出來(lái)嗎?若不能，證明你還不通曉字體規(guī)范，沒(méi)有去制定字體的規(guī)范。那么我們首先了解一下常規(guī)的一些大小(應(yīng)用于2倍尺寸中，即iphone5/6)。

導(dǎo)航主標(biāo)題字號(hào)：34/36px

蘋(píng)果默認(rèn)標(biāo)題字號(hào)為34px，而有些軟件也會(huì)用到36px，更加強(qiáng)頁(yè)面位置關(guān)系。例如微信導(dǎo)航標(biāo)題字號(hào)36px，導(dǎo)航字體醒目易于對(duì)應(yīng)頁(yè)面位置。

在內(nèi)文展示中字號(hào)大小又是多大呢?

• 正文字號(hào)32px-34px
• 副文是28px-24px
• 最小字號(hào)不低于20px
• 字在正文字號(hào)使用中，閱讀類(lèi)的APP中更注重文本的閱讀更加便捷性。
• 正文字號(hào)34px，會(huì)選擇性的選用蘋(píng)方粗體的字體。

然而，列表形式和工具的應(yīng)用主要是32 px的主體(由于大體型的趨勢(shì)進(jìn)入屏幕使用34 px),副本是28 px,時(shí)間是24 px， 26 px字體文本大小,也用來(lái)把班級(jí)分成文案提示哦。因?yàn)槲淖窒Ｍ脩糸喿x，但不要抓住主要信息指導(dǎo)的列表。34 px通常用于大型頁(yè)面上的按鈕。為了把按鈕的水平,在加強(qiáng)按鈕向?qū)?將選擇一個(gè)稍大的字體樣式。在選擇字體大小,字體大小的數(shù)量。為什么選擇這個(gè)偶數(shù),因?yàn)樵陂_(kāi)發(fā)的接口,轉(zhuǎn)換的大小除以二。

那網(wǎng)頁(yè)中常用的字號(hào)有哪些呢?

頁(yè)面尺寸最小12個(gè)像素；常用的微軟14像素/ 16像素的文本，大字體是18像素26像素，30、20像素，像素，（注意使用雙店的名字，顯示屏上的奇異的字體時(shí)，會(huì)有一個(gè)Flash），好的設(shè)計(jì)不應(yīng)該總是對(duì)的”人家的設(shè)計(jì)“。

網(wǎng)頁(yè)設(shè)計(jì)中字體設(shè)計(jì)要規(guī)范先介紹到這里，還有什么想知道的盡管提。海淘科技還提供更多行業(yè)的網(wǎng)站建設(shè)服務(wù)，可查看成功案例，例如：互聯(lián)網(wǎng)金融網(wǎng)站建設(shè)案例，五金機(jī)械網(wǎng)站建設(shè)案例，英文網(wǎng)站建設(shè)案例等。

文章下載，點(diǎn)擊：【設(shè)計(jì)資訊】網(wǎng)頁(yè)設(shè)計(jì)中字體設(shè)計(jì)要規(guī)范