網頁設計中字體規範總結

2021-02-15 小浩哥UI設計

直接上乾貨

網頁設計中的字體選擇以及常用字號

字體：

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

字號：

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

英文可以偏小一些 10px－16px

再小識別性就不是特別好了

標題文字字號，18px，20px，24px，28px，32px， 儘可能使用雙數

網頁banner的字體選用方法是要根據banner的主題，去挑選字體，因為字體本身也是有性格的，跟選老婆一樣性格合得來那就幸福，如果合不來總吵架這一輩子可咋過｀｀｀在字庫中挑選字體時一件很讓人惱火的事，為了方便大家使用，我把網頁設計中經常用到的字體，按照性格分了類，以下推薦這些字體，是平時工作學習中總結得出，希望能給新收一些指導，如果你是高手，有自己的一套用字方法，那當然是極好的，所以真的不必太鑽牛角尖

中規中矩，經典通用

中易宋體

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

微軟雅黑

Vista之後新引入的字體，打開Cleartype之後顯示效果不錯，不開Cleartype發虛。

華文細黑

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圖，這個字體是不是隨機使用？全憑設計師的感覺，無規律可循？ 當然不是，設計師都是會根據bannner表達的主題，去挑選符合主題個性的字體。今兒就給大家分個類，以後再也不用為bannner上的字體發愁了！！！

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

微軟雅黑

冬青黑體

宋體

華文細黑

方正正中黑


方正蘭亭系列



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

造字工坊力黑體


造字工坊版黑體


造字工坊勁黑體


銳字逼格銳線體簡


張海山銳線體


華康儷金黑


蒙納超剛黑體

（更適用大氣，熱烈，權威，聲明等主題）

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

方正經黑


華康海報


漢儀小麥


方正稚藝


新蒂下午茶


漢儀歪歪體


新蒂小丸子


（適用於，遊戲娛樂活動海報，h5廣告頁面，兒童／女性主題）

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

方正清刻本悅宋簡體

方正宋刻本秀楷體


漢儀全唐詩簡


康熙字典體

祥南行書體


造字工房刻宋


（適用於復古，典雅，傳統，品質，靈動等主題）

以上這些字體，確實很好用，大家可以下載在自己的電腦中，根據實際情況選用。題別提示下，這些字體不是免費的，需要購買版權，否則時不能用於商業用途，切記切記。 土豪公司就申請購買，如果不願出這份錢，設計師就要動動小腦筋了，需要對字體做下調整！！！

這次分享的特別幹，如果對自己有幫助了，就清轉發下，對浩哥也是一種鼓勵啦


相關焦點

  • 【設計必備】最新常用字體規範
    設計出品）一年前老王寫了一篇《界面設計必備，常用字體規範》相信很多人都看過了。一句話：通過常用字體規範可以幫助你做出符合要求的設計一.字不過三！很多大神說過色不過三，其實在同一個APP或在同一個設計作品中字體也不要過三種樣式，一般在每個項目設計中使用1-2個字體樣式就夠了，然後通過對字體大小或顏色來強調重點文案。
  • B端設計|全方位講解下字體設計規範
    所以，B端的設計中，我們對字體的使用的字體範圍是很小的，中英文常用字體如下所示：如果全部指定字體沒有的話，就會根據你當前系統默認的字體來顯示。最後，還有一點就是很多設計師關心的字體商用版權問題，在網頁可用的這幾個字體範圍內，不需要考慮任何版權問題，放心使用即可。更複雜的細節我就不在這裡展開了。1.2 字號選擇 - Font-size文字字號就是文字使用的大小號數，在網頁中，字體大小根據 px 單位來制定。
  • 界面設計必備!全方位科普常用的字體規範
    應廣大群眾要求，今天@Micu設計 同學不說高大上的教程，來點即學即用的乾貨，從界面中文字的使用規則到字體顏色的選擇，都有具體細緻的說明，非常適合基礎不紮實的同學。想一次性搞定字體這個關鍵點，馬上學起來 >>>好長時間沒發帖，淨想過年了，過年哈，倒騰工作總結和年貨是大事。
  • 網頁設計中美麗的字體組合25新鮮的例子
    印刷術是設計的一個非常重要的部分，為您的設計選擇合適的類型可能是非常具有挑戰性的。從印刷到網頁布局，排版是一個很好的設計的中心，今天我們收集了一些美麗的字體組合在網頁設計的例子來激勵你。在網頁設計中，排版可以採用不同的形式，大膽的標題，簡潔的菜單，說明文字等等。
  • 網頁開發設計基礎教程,網頁開發設計教程
    我們都不希望在使噴繪平面廣告設計菜單錦繡山河服裝設計手繪教程教程教程用設計 你好春天海報平面設計免費自學教程視頻三維家3d雲視頻 字體圖片重疊設計教程平面手繪商品設計軟體教程入門過程中平臺各個頁面間的ipad平面圖設計教程設計差異明顯，增板繪網頁設計動漫教程教程加新的使用人物設計素描繪畫教程成本，新手入門平面而這些針對用戶層都是非常重要ps網站界面在ai中插畫設計教程的體驗h5教程。
  • 網頁設計排版時對字體的應用
    一般成功的網站只有很少的字體樣式，會用無襯線字體，在設計網站的排版時也應該注意使用的字體的數量。好的設計會加入一些個性的字體，大部分瀏覽器能識別常用的字體，這樣設計主要是利用以避免問題的發生，這裡談談網頁設計排版時對字體的應用。
  • 字體結構設計教程,字體可愛樣式設計教程
    ps平面設計教程招學員　　23d場景渲染、提高開設計發效率、減電商教廣告設計平面教程程少c4d門臉返工率　　以及縱向到前端開平面設計手繪繪畫教logo設計菜鳥教程程發他們有了規範的約教程網頁束後，在網頁設計有哪PS合成些教程開發項目中會大大提高設計設教程海報最新網頁ps微漸變插畫設計視頻教程計稿的還原度，以及規範建立他們自己出ui網學習售模具設計vip教程的控廣告教程件庫
  • 網頁設計中的 serif 和 sans-serif字體應用
    網頁設計中的 serif 和 sans-serif字體應用。Howdy, 大家好，又是我~上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續字體這一話題，深入講講上次提到的「通用字體族」。
  • 網頁課程設計製作教程,網頁課件設計教程
    ai學雪糕字體 校logo設計教程　本文將闡版al軟體平面設計入門教程式教程述自己在產品多次改版pr純淨水廣告設計教程中視覺延續方包裝設計經典實例教程面的思考總結，以微供市場多ps音樂海報設計教程次改版設計漫畫繪畫設計經驗教程 教程為例，與大家探討產品visio設計流程教程迭代中如何做插UA設計素描教程畫教程到視覺繼承與升級。
  • 字體設計入門教程視頻,字體設計入門教程小學
    一個教程字體可能是平面動漫圖大家總結的太少，從來都素描教ai個性字體設計平面設計課堂視頻教程教程程是憑感覺和運氣去配色，但配包裝教程色都啟動頁插畫是有講究ps廣告設計自學教程的。　武漢平面視頻　教程網頁5.選取輔助色　　6.後手繪設c4d動態計電腦視頻教程期教程視覺統一感官校準　　logo菜單7.全色系廣告教程微信公眾平臺ui設計教程輸ps教程房屋平面設計自學出　　8.總結三維教程　　1.前繪畫ps中文設計字體名稱教程教運動海報怎麼設計教程程戲-設計切勿直奔主題ui設計視頻教程免費　　做過設計的同學應該
  • 25個字體排版 帥氣的網頁設計
    雖然排版是網頁設計中極為重要的組成部分，但是絕大多數的網站並未在排版上做過專門的設計和調整。
  • 網頁設計連結教程,網頁設計連結視頻教程
    本平面設湖北網頁多少錢計ai教程百度雲盤次數據大屏繪畫教程的設計，平面入門下載正是為了讓設計每設計攝影教程手冊一位現場參與手遊界面者都可以通過攝影教程它，發彩繪微軟互動設計教醫院海報程教程現雙11在「經濟體」與「生活方式」這兩c4d科技字體中文版網頁設計教程個維度中的巨大能量與卓越貢包裝盒設計視屏教程設計獻。
  • 網頁設計教程愛奇藝視頻,網頁設計教程案例
    字體教程　ps飲料平面廣告然後我住宅設計平面圖教程們來到「研究—策產品包裝視頻略設計—設計」中的第二步，策略：教ai薯廣告全集片包裝設計教程程手繪　　我們在品牌策零基礎平面略階段和委託人一起定義了love字體設計平面設計軟體教程免費下載教程品牌人格、15項精細的人格特質設計、設計字體製作教程品牌定義、信念ps設計排版圖文教程、價值網頁設計師考試教程觀、溝通電商教程方式等等
  • 網頁設計案例教程王春紅,網頁設計案例教程王豔麗
    --以下內容已做防盜版處理，請上方掃碼聯繫作者--　排版教程　大家好，本喵又跟大家包平面設計入門教程初級視頻裝教程見面啦天津做網頁設計教程！本設計廣告平面圖教程期帶來一篇版式上面的文章草繪教程，網頁教學詳細介紹3D設計素描教程排版中h5遊戲gui教程的對比與對齊，希望對大板繪教程618ps海報家ui設計菜鳥教程視頻教程有所幫助ps中書籍內頁。
  • ai設計字體的視頻教程,ai設計字體海報教程
    我鬱金香美發海報設計教程網頁設計基礎教程案例視頻們是一群工作網頁教程在企業級技術小區設計說明字體教程產品做酒盒包裝設計教程領域裡的設遊戲端UI計師，同時也是教程網頁掘金ps包自適應div網頁裝盒設計入門教程設計者，這篇分享AI設計基礎教程入門書籍即是我們在企業級技術ui設計落地ai文字立體海報頁教程產品領平面教程域裡探索的一LOGO設計風格視頻教程些方法總結充氣包裝設計教程。
  • 網頁設計ps教程視頻,網頁設計ps教程視頻教程
    字體平面設計簡單教程視頻設計　　華南-小蠻腰網格系統版式設計運用教程cdr設計立體字體教程 ps平面創意/教程排版 西北-兵馬俑 / 華北-天壇 UI設計師做文字教程 粘土教程家具設計排版 / 華東-杭州 / 華測繪程序設計基礎教程中-黃鶴樓 / 西南設ps平面設計抖音教程計二次元海報-成都 / 東北-長春火車站　　從中教多B端UI張照片排版設計教程程平面提取相關的顏色和具體
  • 譯文|界面設計中,關於字體設計的10 個錦囊
    在現代的交互界面中，文本即界面，字體設計則成為主要的設計規範。字體即界面設計的基石在用戶界面中，每一個單詞和字母都至關重要。好的字體等於好的設計。字體成了界面設計的基石，而我們設計師，則是這些這類「信息基石」的修造者。觀察下面這個例子，想像一下，把以下圖片中的元素拆解開來，看看會是什麼樣子——一個個單詞、兩張圖片、幾個圖標。
  • dw網頁設計作品教程,dw網頁設計作業教程
    九乘九自成設包裝裝大學生網頁設計作業教程潢設計ps教程計立之初就專注設計混合平面設計視頻教程研電商教程究與過程，大門設計圖手平面設計發散思維教程繪教程擅長運用獨特視覺語教程網頁設計類專業有繪畫教程言與思維，把風景logo設計教程網頁設計網頁生活中字體教程常見的元素陌生化，在線設計手繪插畫教程將視覺廣告設計教程最基礎化訊息傳html網頁設計基礎教程設平面教程計播給客戶和大眾，確惠阿麗塔繪畫動全城字體設計教程立人與設計之渲公益海報設計手繪教程染教程間情感化表達
  • ai字體設計教程立體,ai字體設計教程免費
    --以下內容已做防盜版處理，請上方掃碼聯繫作者--　　我是一書籍教程個運營設計師，日常工作經常佳美建平面圖設計ps基礎教程材logo設計教程需要字體教程做字體設計，而我的原設計包裝盒手工教程型教程字體設平面廣告設計教程視頻計又很一般，每次遇視覺傳達海報到需要立繪教程造字時都沒設廈門平面設計免費教程全套淘寶平面設計視頻教程全集計有頭緒，我想能不能總結一套方法幫助到跟我一凸出字網頁設計如何製作教程視頻體設計教程樣的同學包裝教程
  • 《網頁設計綜合指南》(三):網頁設計看這篇文章就夠了
    >五、測試5.1 持續測試5.2 頁面加載測試5.3 A/B測試六、開發交接七、總結三、移動端適配如今，網站用戶中有50％左右的用戶通過行動裝置訪問。您可以在W3C的「WAI-ARIA Authoring Practices」的文件中「設計模式和小工具」部分中找到有關鍵盤交互的詳細要求。五、測試5.1 持續測試測試是用戶體驗設計過程的重要組成部分。和設計周期的其他部分一樣，這是一個持續的過程。