界面设计必备！全方位科普常用的字体规范

undefined

编者按：90后UI设计师的最新干货！应广大群众要求，今天@Micu设计 同学不说高大上的教程，来点即学即用的干货，从界面中文字的使用规则到字体颜色的选择，都有具体细致的说明，非常适合基础不扎实的同学。想一次性搞定字体这个关键点，马上学起来。
3 a/ i. n: d9 d0 Q! u好长时间没发帖，净想过年了，过年哈，倒腾工作总结和年货是大事。
这几天有人问我说：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想学点直接能拿来用的，这个要求过分吗……”
这个，好吧，那就直接说说能用的知识：字体字号。
也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。
对于这个问题，我想说：会和熟练，是两回事。一个App，不同部分的字体字号你能准确地说出来吗？
很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。
  x6 L. J8 o9 @  U8 F拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。
. W% A" ~3 L4 `5 o# m* [0 |: L  i这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。
一、成也字，败也字
6 N2 x1 ~* o& g, n* ^% j. M) O在设计师的职业生涯中，至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。
" b7 t. a( E, s* }4 z0 C我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？
( Z2 C4 l9 [) r# M4 R# n5 ~3 |" e不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。

m_c58b54bca2660000012a8967f6d3

( Y$ ]- q1 g% o+ N  ^" A问题的关键有：
字体样式太多，导致页面杂乱 使用的字体不易识别 字体样式和内容的气氛或规范不匹配
怎么避免这样的结果发生呢？
通过设计经验可以帮助你做出更好的版式，了解不同平台的常用字体设计规范。
: a7 C, m# B- K, x2 ~( l在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。
2 x- ~5 ?2 C. s不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。
  \2 C3 [0 j- ~2 }, b' Z: d4 [字体与背景的层次要分明,确保字体样式与色调气氛相匹配
二、界面中文字使用的规则
& F. c( w& ~( \; g2 C在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。
2 M% A6 C! i! X: G( n以下是在72像素/英寸下的规范
7 {, f3 w  s* P9 b! e$ K移动端常规字体
IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。
' j& O5 P3 k2 w- u; q& l

undefined

) ~5 U1 ?# C# \" s4 [Android
英文字体：Roboto
中文字体：Noto
% l5 p% I( p. J8 i8 ]! X9 j! j

undefined

移动端常用的的字号有哪些呢？
# Q4 r& q! Y$ {. z& C3 I导航主标题字号：40-42px
我一般设计就用40px，偏小的40px字号，显得精致些。
6 h% K. s8 b- B# g* P

undefined

8 \, M' P0 j- U/ R% [' F在内文展示中字号大小又是多大呢？
. Y5 ~( N( V% H. ~大的正文字号32px，副文是26px，小字20px。在内文的使用中，根据不同类型的App会有所区别。
像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。
+ V* }6 C2 U; `; |

undefined

而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px
+ M7 l1 K4 |# m3 Z3 S# ?0 i

undefined

% _- S; }/ Z; |" Q26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。

undefined

36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体。
（见下图中的退出按钮)

undefined

大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，我就不在这一一的介绍了。
+ y2 T6 }, ~# ~: `8 v4 U# \常用字号的大小基本就这几个，根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。
2 n# p& C" i5 D9 [* T注：相关网站建设技巧阅读请移步到建站教程频道。

小手一抖，经验到手！手拿酱油，低头猛走！酱油党路过，杜绝零回复

呵呵~~~~你怎么老这样说~~~

哈哈 我支持你

疯了.........

感觉这个论坛的站长太牛B了，好强大啊

极品可以说是让你馨香满腹，三日不绝！！古人说的好：想要作文章，先要学做人。由作者的文章我们也可以揣测出作者定是成长在一个汗牛充栋，文化氛围浓厚而且精神面貌积 极向上的幸福家庭里面。在现在这个物欲横流，亲情冷淡的时代，能够在这样的家庭里

额~哦........偶无语

哈 你逗逗他啊

正好你开咯这样的帖

对自己好点~别难为自己