优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 2 分钟
编者按：90后UI设计师的最新干货！应广大群众要求，今天 同学不说高大上的教程，来点即学即用的干货，从界面中文字的使用规则到字体颜色的选择，都有具体细致的说明，非常适合基础不扎实的同学。想一次性搞定字体这个关键点，马上学起来 &&&
小哥的教程合集：
好长时间没发帖，净想过年了，过年哈，倒腾工作总结和年货是大事。
这几天有人问我说：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想学点直接能拿来用的，这个要求过分吗……”
这个，好吧，那就直接说说能用的知识：字体字号。
也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。
对于这个问题，我想说：会和熟练，是两回事。一个App，不同部分的字体字号你能准确地说出来吗？
很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。
拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。
这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。
一、成也字，败也字
在设计师的职业生涯中，至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。
我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？
不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。
<img class="alignnone size-full wp-image-123175" alt="m_c58b54bcaa" src="//image.uisdc.com/wp-content/uploads/2015/01/m_c58b54bcaa.jpg"
width="690"
问题的关键有：
字体样式太多，导致页面杂乱
使用的字体不易识别
字体样式和内容的气氛或规范不匹配
怎么避免这样的结果发生呢？
通过设计经验可以帮助你做出更好的版式，了解不同平台的常用字体设计规范。
在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。
不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。
字体与背景的层次要分明,确保字体样式与色调气氛相匹配
二、界面中文字使用的规则
在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。
以下是在72像素/英寸下的规范
移动端常规字体
IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。
英文字体：Roboto
中文字体：Noto
移动端常用的的字号有哪些呢？
导航主标题字号：40-42px
我一般设计就用40px，偏小的40px字号，显得精致些。
在内文展示中字号大小又是多大呢？
大的正文字号32px，副文是26px，小字20px。在内文的使用中，根据不同类型的App会有所区别。
像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。
而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px
26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。
36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体。
（见下图中的退出按钮)
大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，我就不在这一一的介绍了。
常用字号的大小基本就这几个，根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。
常用的字号有哪些呢？
网页中文字字号一般都是宋体12px或14px(无状态)，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px，一般使用双数字号，单数的字体在显示的时候会有毛边。
常用的字体：
1. 平平稳稳：微软雅黑/方正中黑
微软雅黑系列：在网页设计中这款字体使用的非常平凡，这款只无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。
方正正中黑系列
中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。
2. 与时俱进：方正兰亭系列
方正兰亭系列：个人最推荐的就是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好的区分出文本的层次。
3. 刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑
在这几个字体中，他们有着共同的特点，字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。
毛笔字生成器
通过自由的书法网站在线生成。在网址中输入文本，再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。
推荐大家几个毛笔字相关的网站：
和大家简单操作一下毛笔字的使用方法。
将下载下来的字体图片AI转路径，编辑文字。
首先使用在线生成器输入选择好你需要的文字字形，将文字图片拖至AI中。
选中拉入图片，点击［图像描摹］
然后继续点击［扩展］按钮
扩展完毕后，图片已经都变成了路径。
使用魔棒选择颜色就可以将文字的路径提选出来。
最后经过设计后的Banner效果，这就是我经常用的Banner风格，你们也试试吧。
重要提示，怎么找不认识的字体名称？
很多朋友会看到别人使用的字体非常好看，但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。相关神器地址：
三、常用字体颜色
字体颜色又有哪些常用的颜色呢？
在界面中的文字分为三个层级，主文、副文、提示文案等。
在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。
常用的色值是#333333；#666666；#999999
在界面中还经常会用到背景色#eeeeee。
分割线则采用#e5e5e5或#cccccc的颜色值，一个深一些，一个浅一些。这个会更具不同的软件风格采用不同的深浅，由设计自己把控。
在我们做设计的时候，字体和图库均是有版权的，请注意合法使用。
免费图库资源：
设计的时候我们还可以将字体进行变形来达到宣传的目的，这个需要设计师对字体设计有一定的了解。
总之，设计是要有规范，有体系的。使用规范化的设计对产品的延续性非常有帮助，并且保证了产品的独特性和一致性。所以，大家要在设计初期找到风格和规范，这样做出来的界面才会统一一致，在变化的需求中找到定量，调整起来也相对轻松很多。
【90后小哥的优质投稿合集】
他的成长经历，备好你的纸巾：
他的求职经验合集，备好你的简历：
他的图标教程，赶紧开Photoshop啦！
【优设网 原创文章 投稿邮箱：】
================关于优设网================
&#8220;优设网&#8220;是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量90万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的&#8221;福利&#8221;吗？添加优设哥微信号：youshege
色彩狂舞派！20个色调丰富的时尚网站设计
编者按：将色彩搭配发挥得淋漓尽致！掌握了色彩搭配基础功的同学，是时候来进阶咯。今天这组网站以多彩多姿见长，配色豪迈大气，放浪形骸，...
编者按：今天的教程不难，效果非常好，能学到不少基础的Photoshop操作技巧，素材已提供，源文件也打包微盘，现在就可以上手了 &&& 最...编者按：字体设计基础入门篇！今天阿里的同学把字体设计的嫁接技术分享给大家，不仅有超赞的实例演练，而且改造过程清晰明了，包学包会 &&& 想...@惊梦了了 ：字体设计中，新手设计师才说字体结构松散或紧凑，设计老司机只谈中宫。 你肯定也有这样的感受，因为谈论字体结构松散或紧凑只是对字体造型的直观描述，...@菜心设计铺 ：前几天看见一位朋友（皮皮）发了自己的字体练习，如下图： 对于这位朋友的评价是：态度很好，设计里面也有一些自己独特的想法，但是按照这种练习方式...@P大点S微博 ：墨迹字体经常出现在一些与传统，民族等元素挂钩的设计中，是很受欢迎的一种字体效果。因为之前有人问过这种效果要怎么做。今天就来带给大家一个简单...@刘柏坤KUN ：字体设计是一件非常有趣的事情，但是对于一些朋友来说面对字体设计时总有些小烦恼。所以今天和大家分享的更像是一个字体设计的“过程”，七种招式我...每一款汉字都是一首诗，今天惊蛰同学精选了一组非常值得推荐的中文字体，分类准确，质量超高，看哪款中意赶紧领回家 &&& 小提醒：如有需要请务...讲座视频录播回放 https://uiiiuiii.com/cinema4d/.html 温馨提示：讲座已结束，此为讲座录播。 报名方式 ...今天@P大点S微博 给大家带来一个新手字效教程，利用图层样式制作一个带金属感的银白色文字，我们将再一次见证图层样式的强大。素材和源文件都打包好了，来收！ 素...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里这个是什么常规字体啊，字母g太特别了【ps吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：2,577,446贴子：
这个是什么常规字体啊，字母g太特别了收藏
登录百度帐号推荐应用字体设计是一名设计的基本功，但是这样的基本功我们却没有掌握好，很多年轻设计师对于字体的设计任然感到很迷茫，这里分享一点总结出的东东，希望帮助那些困惑的设计师们。后续将陆续推出《字体设计手法》、《字体设计风格》、《字体设计的气质》等文章。
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)这是什么字体_百度知道
这是什么字体
求大神指点
我有更好的答案
hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=07e7dd12d6c451daf6a304ed86cd7e5e/95eef01f3a292df5fccce959b36a://e.baidu.com/zhidao/pic/item/95eef01f3a292df5fccce959b36a.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http。<a href="http://e.hiphotos.jpg" esrc="http.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=25e9c7e4c962ca21bf831/95eef01f3a292df5fccce959b36a上述图中的字体是康熙字典体 常规，遇到字体识别问题可到识字体上识别://e
采纳率：93%
康熙字典体
首先这肯定不是一种字体，1、康熙字典体2、宋体
为您推荐：
其他类似问题
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。