網頁設計之字體設計規范

相關推薦

網頁設計之字體設計規范

　　網頁字體的選擇，需要按照一定的規范來進行選擇，以下是小編整理的網頁設計之字體設計規范，歡迎參考閱讀!

　　網頁設計常用字號最好用偶數字號

　　1、Header導航文字12號或14號；

　　2、Menu導航文字14—18號；

　　3、Sidebar文字12號或14號，

　　4、一級菜單使用14號、二級菜單使用12號或一級菜單使用12號加粗、二級菜單使用12號。

　　5、Footer文字12號或14號

　　6、正文：大標題文字24—32號；標題文字16或18號；正文文字12號或14號。

　　7、標題文字字號，18px，20px，24px，28px，32px，盡可能使用雙數。

　　8、按鈕文字：比如登錄、注冊頁面按鈕或其他按鈕，文字14—16號，可根據實際情況調整大小或加粗。

　　9、同一層級的字號搭配應該保持一致。比如，同一層級的版塊中標題文字和內容文字大小的一致性。

　　在蘋果官網中，產品展示文字以64號和32號搭配，文字內容簡短有力，可讀性強，同時非常具有視覺沖擊力，突出顯示了品牌特征。

　　字體排版規范

　　一、最佳易讀性規范

　　1.行寬

　　傳統圖書排版每行最佳字符數是55—75，實際在網頁上每行字符75—85更流行。中文在14號字體時，建議35—45個文字

　　2.行高

　　網頁設計中，文字間距一般根據字體大小選1—1.5倍作為行間距，1.5—2倍作為段間距比如12號字體，行間距是12px—18px，段落間距則是18px—24px。另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見的。

　　3.行對齊

　　通常情況下，建議在頁面上只使用一種文本對齊，盡量避免兩端對齊

　　4.文字留白

　　在排版文字時，在版面需要留出空余空間，留白面積從小到大應該遵循的順序是：字間距、行間距、段間距。此外，在排版內容區之前，需要根據頁面實際情況給頁面四周留出余白。

　　5、CRAP原則（carp）

　　對比（Contrast）、重復（Repetition）、對齊（Alignment）、親密性（Proximity）

　　字體選擇

　　字體：中文：宋體，微軟雅黑，方正系列（無狀態）

　　字號：網頁中正文／導航字號在12px－18px之間

　　英文可以偏小一些 10px－16px，再小識別性就不是特別好了，中規中矩，經典通用。

　　中易宋體

　　Win最常見的字體，小字體點陣，大字體TrueType，但是大字體并不好看，所以最好別做標題。

　　微軟雅黑

　　大段的微軟雅黑字體排列略顯厚重，如果是在網頁上長時間瀏覽，會讓人的眼睛產生不適。相比而言，襯線字體裝飾性強，具有易讀性，所以宋體更適合知乎網站這種大段文字網站，微軟雅黑給人的感受包括平和、干凈、簡單、平靜、專業。

　　華文細黑

　　Mac下的默認中文。

　　英文

　　Helvetica:

　　被評為設計師最愛的字體，Realist風格，簡潔現代的線條，非常受到追捧。在Mac下面被認為是最佳的網頁字體，在Windows下由于Hinting的原因顯示很糟糕。

　　Arial:

　　Helvetica的「克隆」，和Helvetica非常像，細節上比如R和G有小小差別。如果字號太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常

　　Lucida Family:

　　Lucida Grande是Mac OS UI的標準字體，屬于humanist風格，稍微活潑一點。Mac下的顯示要比Win下好。

　　Verdana:

　　專門為了屏顯而設計的字體，humanist風格，在小字號下仍可以清楚顯示，但是字體細節缺失嚴重，最好別做標題。

　　Tahoma:

　　也是humanist風格，字體和Verdana有點像，但是略窄一些，counter略小，曾經是Windows的標準字體，Mac 10.5之后默認也有安裝。

　　Verdana：

　　是一套無襯線字體，由于它在小字上仍有結構清晰端整、閱讀辨識容易等高品質的表現，因而在1996年推出后即迅速成為許多領域所愛用的標準字型之一。

　　Georgia:

　　基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還算OK。

　　有些偏藝術類的網站的大字會使用lobster。更藝術的網站就搜索free font，或者font freebie吧

　　Trebuchet、Georgia、Times New Roman、Arial、Lucida等字體在26px或更大像素時效果是比較好的，非常適合作為正文的標題。

　　網頁banner字體

　　網頁banner的字體選用方法是要根據banner的主題，去挑選字體，因為字體本身也是有性格的

　　第一類，穩定型（協調，齊全，穩定，高質）

　　微軟雅黑、冬青黑體、宋體、華文細黑、方正正中黑、方正蘭亭系列

　　第二類，剛硬，銳利，清晰，強烈

　　造字工坊力黑體、造字工坊版黑體、造字工坊勁黑體、張海山銳線體、華康儷金黑、蒙納超剛黑體（更適用大氣，熱烈，權威，聲明等主題）

　　第三類，輕松，手寫，可愛，童趣，親切

　　方正經黑、華康海報、漢儀小麥、方正稚藝、新蒂下午茶、漢儀歪歪體、新蒂小丸子（適用于，游戲娛樂活動海報，h5廣告頁面，兒童／女性主題）

　　第四類，靈動，清新，秀雅，精致，古韻

　　方正清刻本悅宋簡體、方正宋刻本秀楷體、方正宋刻本、秀楷體、漢儀全唐詩、簡康熙字典體、祥南行書體、造字工房、刻宋（適用于復古，典雅，傳統，品質，靈動等主題）

　　特殊字體或藝術字體的設置。

　　如果你需要用一種特殊的字體來體現你的風格，那么特殊字體或藝術字體最好以圖片的方式置入網頁。需要用這種字體的地方用圖片代替，以保證所有人看到的頁面是同一效果。

【網頁設計之字體設計規范】相關文章：

網頁設計規范06-12