本文來自微信公眾賬號設(shè)計(jì)君鞋既，在此只做記錄榄攀。
【純干貨】網(wǎng)頁設(shè)計(jì)字體設(shè)計(jì)規(guī)范
網(wǎng)頁設(shè)計(jì)常用字號 最好用偶數(shù)字號
1卦睹、Header導(dǎo)航文字12號或14號；
2籍嘹、Menu導(dǎo)航文字14—18號烫映；
3、Sidebar文字12號或14號噩峦，
4锭沟、一級菜單使用14號、二級菜單使用12號
或一級菜單使用12號加粗识补、二級菜單使用12號
5族淮、Footer 文字12號或14號
6、正文：大標(biāo)題文字24—32號凭涂；標(biāo)題文字16或18號祝辣；正文文字12號或14號
7、標(biāo)題文字字號切油，18px蝙斜，20px，24px澎胡，28px孕荠，32px， 盡可能使用雙數(shù)
8攻谁、按鈕文字：比如登錄稚伍、注冊頁面按鈕或其他按鈕，文字14—16號戚宦，可根據(jù)實(shí)際情況調(diào)整大小或加粗个曙。
9、同一層級的字號搭配應(yīng)該保持一致受楼。比如垦搬，同一層級的版塊中標(biāo)題文字和內(nèi)容文字大小的一致性
在蘋果官網(wǎng)中，產(chǎn)品展示文字以64號和32號搭配艳汽，文字內(nèi)容簡短有力猴贰，可讀性強(qiáng)，同時(shí)非常具有視覺沖擊力骚灸，突出顯示了品牌特征糟趾。
字體排版規(guī)范
一、最佳易讀性規(guī)范
1.行寬
傳統(tǒng)圖書排版每行最佳字符數(shù)是55—75，實(shí)際在網(wǎng)頁上每行字符75—85更流行义郑。中文在14號字體時(shí)蝶柿，建議35—45個(gè)文字
2.行高
網(wǎng)頁設(shè)計(jì)中，文字間距一般根據(jù)字體大小選1—1.5倍作為行間距非驮，1.5—2倍作為段間距
比如12號字體交汤，行間距是12px—18px，段落間距則是18px—24px劫笙。
另外芙扎，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見的填大。
3.行對齊
通常情況下戒洼，建議在頁面上只使用一種文本對齊，盡量避免兩端對齊
4.文字留白
在排版文字時(shí)允华，在版面需要留出空余空間圈浇，留白面積從小到大應(yīng)該遵循的順序是：字間距、行間距靴寂、段間距磷蜀。此外，在排版內(nèi)容區(qū)之前百炬，需要根據(jù)頁面實(shí)際情況給頁面四周留出余白褐隆。
5、CRAP原則（carp）
對比（Contrast）剖踊、重復(fù)（Repetition）庶弃、對齊（Alignment）、親密性（Proximity）
字體選擇
字體：中文：宋體蜜宪，微軟雅黑虫埂，方正系列（無狀態(tài)）
字號：網(wǎng)頁中正文／導(dǎo)航字號在12px－18px之間
英文可以偏小一些 10px－16px
再小識別性就不是特別好了
中規(guī)中矩，經(jīng)典通用
中易宋體
Win最常見的字體圃验，小字體點(diǎn)陣，大字體TrueType缝呕，但是大字體并不好看澳窑，所以最好別做標(biāo)題。
微軟雅黑
大段的微軟雅黑字體排列略顯厚重供常，如果是在網(wǎng)頁上長時(shí)間瀏覽摊聋，會(huì)讓人的眼睛產(chǎn)生不適。相比而言栈暇，襯線字體裝飾性強(qiáng)麻裁，具有易讀性，所以宋體更適合知乎網(wǎng)站這種大段文字網(wǎng)站
微軟雅黑給人的感受包括平和、干凈煎源、簡單色迂、平靜、專業(yè)
華文細(xì)黑
Mac下的默認(rèn)中文手销。
英文
Helvetica:
被評為設(shè)計(jì)師最愛的字體歇僧，Realist風(fēng)格，簡潔現(xiàn)代的線條锋拖，非常受到追捧诈悍。在Mac下面被認(rèn)為是最佳的網(wǎng)頁字體，在Windows下由于Hinting的原因顯示很糟糕兽埃。
Arial:
Helvetica的「克隆」侥钳，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別柄错。如果字號太小慕趴，文字太多，看起來會(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)格毫捣，在小字號下仍可以清楚顯示详拙，但是字體細(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：
是一套無襯線字體矿微，由于它在小字上仍有結(jié)構(gòu)清晰端整、閱讀辨識容易等高品質(zhì)的表現(xiàn)尚揣，因而在1996年推出后即迅速成為許多領(lǐng)域所愛用的標(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)頁banner字體
網(wǎng)頁banner的字體選用方法是要根據(jù)banner的主題晋南，去挑選字體，因?yàn)樽煮w本身也是有性格的
第一類羔砾，穩(wěn)定型（協(xié)調(diào)负间，齊全，穩(wěn)定姜凄，高質(zhì)）
微軟雅黑政溃、冬青黑體、宋體态秧、華文細(xì)黑董虱、方正正中黑、方正蘭亭系列
第二類申鱼，剛硬愤诱，銳利，清晰捐友，強(qiáng)烈
造字工坊力黑體淫半、造字工坊版黑體、造字工坊勁黑體匣砖、銳字逼格銳線體簡科吭、張海山銳線體、華康儷金黑脆粥、蒙納超剛黑體
（更適用大氣砌溺，熱烈，權(quán)威变隔，聲明等主題）
第三類，輕松蟹倾，手寫匣缘，可愛猖闪，童趣，親切
方正經(jīng)黑肌厨、華康海報(bào)培慌、漢儀小麥、方正稚藝柑爸、新蒂下午茶吵护、漢儀歪歪體、新蒂小丸子
（適用于表鳍，游戲娛樂活動(dòng)海報(bào)馅而，h5廣告頁面，兒童／女性主題）
第四類譬圣，靈動(dòng)瓮恭，清新，秀雅厘熟，精致屯蹦，古韻
方正清刻本悅宋簡體、方正宋刻本秀楷體绳姨、方正宋刻本登澜、秀楷體、漢儀全唐詩飘庄、簡康熙字典體脑蠕、祥南行書體、造字工房竭宰、刻宋
（適用于復(fù)古空郊，典雅，傳統(tǒng)切揭，品質(zhì)狞甚，靈動(dòng)等主題）
