網(wǎng)頁(yè)設(shè)計(jì)字體設(shè)計(jì)規(guī)范
網(wǎng)頁(yè)設(shè)計(jì)需要將圖片和文字相結(jié)合，達(dá)到融合的境界，當(dāng)然文字的設(shè)計(jì)也是有一定的規(guī)范的，下面是關(guān)于網(wǎng)頁(yè)設(shè)計(jì)字體設(shè)計(jì)規(guī)范，歡迎參考！
網(wǎng)頁(yè)設(shè)計(jì)常用字號(hào)
最好用偶數(shù)字號(hào)
1、Header導(dǎo)航文字12號(hào)或14號(hào);
2、Menu導(dǎo)航文字14—18號(hào);
3、Sidebar文字12號(hào)或14號(hào)，
4、一級(jí)菜單使用14號(hào)、二級(jí)菜單使用12號(hào)
或一級(jí)菜單使用12號(hào)加粗、二級(jí)菜單使用12號(hào)
5、Footer 文字12號(hào)或14號(hào)
6、正文：大標(biāo)題文字24—32號(hào);標(biāo)題文字16或18號(hào);正文文字12號(hào)或14號(hào)
7、標(biāo)題文字字號(hào)，18px，20px，24px，28px，32px， 盡可能使用雙數(shù)
8、按鈕文字：比如登錄、注冊(cè)頁(yè)面按鈕或其他按鈕，文字14—16號(hào)，可根據(jù)實(shí)際情況調(diào)整大小或加粗。
9、同一層級(jí)的字號(hào)搭配應(yīng)該保持一致。比如，同一層級(jí)的版塊中標(biāo)題文字和內(nèi)容文字大小的一致性
在蘋果官網(wǎng)中，產(chǎn)品展示文字以64號(hào)和32號(hào)搭配，文字內(nèi)容簡(jiǎn)短有力，可讀性強(qiáng)，同時(shí)非常具有視覺(jué)沖擊力，突出顯示了品牌特征。
字體排版規(guī)范
一、最佳易讀性規(guī)范
1.行寬
傳統(tǒng)圖書排版每行最佳字符數(shù)是55—75，實(shí)際在網(wǎng)頁(yè)上每行字符75—85更流行。中文在14號(hào)字體時(shí)，建議35—45個(gè)文字
2.行高
網(wǎng)頁(yè)設(shè)計(jì)中，文字間距一般根據(jù)字體大小選1—1.5倍作為行間距，1.5—2倍作為段間距
比如12號(hào)字體，行間距是12px—18px，段落間距則是18px—24px。
另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見(jiàn)的。
3.行對(duì)齊
通常情況下，建議在頁(yè)面上只使用一種文本對(duì)齊，盡量避免兩端對(duì)齊
4.文字留白
在排版文字時(shí)，在版面需要留出空余空間，留白面積從小到大應(yīng)該遵循的順序是：字間距、行間距、段間距。此外，在排版內(nèi)容區(qū)之前，需要根據(jù)頁(yè)面實(shí)際情況給頁(yè)面四周留出余白。
5、CRAP原則(carp)
對(duì)比(Contrast)、重復(fù)(Repetition)、對(duì)齊(Alignment)、親密性(Proximity)
字體選擇
字體：中文：宋體，微軟雅黑，方正系列(無(wú)狀態(tài))
字號(hào)：網(wǎng)頁(yè)中正文/導(dǎo)航字號(hào)在12px-18px之間
英文可以偏小一些 10px-16px
再小識(shí)別性就不是特別好了
中規(guī)中矩，經(jīng)典通用
中易宋體
Win最常見(jiàn)的.字體，小字體點(diǎn)陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。
微軟雅黑
大段的微軟雅黑字體排列略顯厚重，如果是在網(wǎng)頁(yè)上長(zhǎng)時(shí)間瀏覽，會(huì)讓人的眼睛產(chǎn)生不適。相比而言，襯線字體裝飾性強(qiáng)，具有易讀性，所以宋體更適合知乎網(wǎng)站這種大段文字網(wǎng)站
微軟雅黑給人的感受包括平和、干凈、簡(jiǎn)單、平靜、專業(yè)
華文細(xì)黑
Mac下的默認(rèn)中文。
英文
Helvetica:
被評(píng)為設(shè)計(jì)師最愛(ài)的字體，Realist風(fēng)格，簡(jiǎn)潔現(xiàn)代的線條，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁(yè)字體，在Windows下由于Hinting的原因顯示很糟糕。
Arial:
Helvetica的「克隆」，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別。如果字號(hào)太小，文字太多，看起來(lái)會(huì)有些累眼。Win和Mac顯示都正常
Lucida Family:
Lucida Grande是Mac OS UI的標(biāo)準(zhǔn)字體，屬于humanist風(fēng)格，稍微活潑一點(diǎn)。Mac下的顯示要比Win下好。
Verdana:
專門為了屏顯而設(shè)計(jì)的字體，humanist風(fēng)格，在小字號(hào)下仍可以清楚顯示，但是字體細(xì)節(jié)缺失嚴(yán)重，最好別做標(biāo)題。
Tahoma:
也是humanist風(fēng)格，字體和Verdana有點(diǎn)像，但是略窄一些，counter略小，曾經(jīng)是Windows的標(biāo)準(zhǔn)字體，Mac 10.5之后默認(rèn)也有安裝。
Verdana：
是一套無(wú)襯線字體，由于它在小字上仍有結(jié)構(gòu)清晰端整、閱讀辨識(shí)容易等高品質(zhì)的表現(xiàn)，因而在1996年推出后即迅速成為許多領(lǐng)域所愛(ài)用的標(biāo)準(zhǔn)字型之一。
Georgia:
基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時(shí)細(xì)節(jié)還算OK。
有些偏藝術(shù)類的網(wǎng)站的大字會(huì)使用lobster。更藝術(shù)的網(wǎng)站就搜索free font，或者font freebie吧
Trebuchet、Georgia、Times New Roman、Arial、Lucida等字體在26px或更大像素時(shí)效果是比較好的，非常適合作為正文的標(biāo)題。
網(wǎng)頁(yè)banner字體
網(wǎng)頁(yè)banner的字體選用方法是要根據(jù)banner的主題，去挑選字體，因?yàn)樽煮w本身也是有性格的
第一類，穩(wěn)定型(協(xié)調(diào)，齊全，穩(wěn)定，高質(zhì))
微軟雅黑、冬青黑體、宋體、華文細(xì)黑、方正正中黑、方正蘭亭系列
第二類，剛硬，銳利，清晰，強(qiáng)烈
造字工坊力黑體、造字工坊版黑體、造字工坊勁黑體、銳字逼格銳線體簡(jiǎn)、張海山銳線體、華康儷金黑、蒙納超剛黑體
(更適用大氣，熱烈，權(quán)威，聲明等主題)
第三類，輕松，手寫，可愛(ài)，童趣，親切
方正經(jīng)黑、華康海報(bào)、漢儀小麥、方正稚藝、新蒂下午茶、漢儀歪歪體、新蒂小丸子
(適用于，游戲娛樂(lè)活動(dòng)海報(bào)，h5廣告頁(yè)面，兒童/女性主題)
第四類，靈動(dòng)，清新，秀雅，精致，古韻
方正清刻本悅宋簡(jiǎn)體、方正宋刻本秀楷體、方正宋刻本、秀楷體、漢儀全唐詩(shī)、簡(jiǎn)康熙字典體、祥南行書體、造字工房、刻宋
(適用于復(fù)古，典雅，傳統(tǒng)，品質(zhì)，靈動(dòng)等主題)
【網(wǎng)頁(yè)設(shè)計(jì)字體設(shè)計(jì)規(guī)范】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)之字體設(shè)計(jì)規(guī)范09-28
PC網(wǎng)頁(yè)設(shè)計(jì)規(guī)范09-10
網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)計(jì)12-01
網(wǎng)頁(yè)設(shè)計(jì)字體基礎(chǔ)篇12-04
網(wǎng)頁(yè)設(shè)計(jì)中字體規(guī)范11-20
網(wǎng)頁(yè)設(shè)計(jì)配色及字體規(guī)范09-22
網(wǎng)頁(yè)設(shè)計(jì)中字體規(guī)范總結(jié)09-19
網(wǎng)頁(yè)設(shè)計(jì)規(guī)范中應(yīng)該出現(xiàn)哪些內(nèi)容09-06