界面设计必备常用字体规范.pdf

界面设计必备常用字体规范

这几天有人问我说：最近看了好多教程，“都老高大上了，但是老弟我做不到呀，

想学点直接能拿来用的，这个要求过分吗……”

这个，好吧，那就直接说说能用的知识：字体字号。

也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。

对于这个问题，我想说：会和熟练，是两回事。一个App，不同部分

的字体字号你能准确地说出来吗？

很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困

扰。

拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行

间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色

不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字

左右间距层次不齐，导致及预期不符等。

这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距

对齐的一些小经验。希望能对大家有些帮助。

一.成也字，败也字

在设计师的职业生涯中，至少一次甚至多次在工作中因为字体不协调

栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接

下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。

我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？

1/29

界面设计必备常用字体规范

不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可

以成就设计也可以毁掉设计。

问题的关键有：

1.字体样式太多，导致页面杂乱

2.使用的字体不易识别

3.字体样式和内容的气氛或规范不匹配

2/29

界面设计必备常用字体规范

怎么避免这样的结果发生呢？

通过设计经验可以帮助你做出更好的版式

了解不同平台的常用字体设计规范

在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范

的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文

案。字体用的太多，越显得不够专业。

不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。

字体及背景的层次要分明

确保字体样式及色调气氛相匹配

二.界面中文字使用的规则

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就

会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分

别介绍一下。

以下是在72像素/英寸下的规范

移动端常规字体

IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。

3/29

界面设计必备常用字体规范

Android

英文字体：Roboto

4/29

界面设计必备常用字体规范

中文字体：Noto

5/29

界面设计必备常用字体规范

6/29

界面设计必备常用字体规范

移动端常用的的字号有哪些呢？

导航主标题字号：40-42px

我一般设计就用40px，偏小的40px字号，显得精致些。

在内文展示中字号大小又是多大呢？

大的正文字号32px,

副文是26px，小字20px

在内文的使用中，根据不同类型的App会有所区别。

像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文

字号36px，会选择性的加粗。

7/29

界面设计必备常用字体规范

8/29

界面设计必备常用字体规范

而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,

小字20px

26px的字号还会用于划分类别的提示文案，因为这样的文字