之前只造无脑除以2 我记得很久以前文本段落的行距要在字体大小的1.5倍 还是要自己慢慢琢磨科学 
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
如何标注设计稿中的行间距？设计中常用的字号有哪些？字体的研究•下篇继续来聊聊这些困扰过我们的字体问题。
探索永无止境-接上篇
字体的研究提出了7个问题和1个建议，此为下篇，会继续研究问题4、5、6和7。上篇已经研究了前3个，收到了一些同学的反馈，期待大家提出更多建议。上篇可以在本文结尾的相关推荐或者UI设计科学派的订阅号（微信搜索“UIDesignScience”）中查看，强烈建议大家先阅读上篇再阅读下篇。
问题4 探索文字的实际大小和视觉大小
回答一个问题：下图中“UIDesignScience订阅号”的文字高度是红色块高度、蓝色块高度还是绿色块高度，亦或是蓝色块 + 绿色块的高度？
眼见未必为真，在视觉设计中经常能体会到这点，当然字体的实际大小也不能用眼睛来看，接下来给大家看一个设计标注图，是否有一种熟悉的感觉？
其实每个人都知道上面的标注图有错误，然而却有非常多的UI设计师输出类似的标注图。到底如何才能找出“文字的实际小大呢”？文字的实际大小和视觉大小到底有何区别和联系？
现在我要大胆地提出一个猜想或者假设：文字的实际大小和视觉大小不一样，但必然存在相关性。
问题5 如何获取文字的真实高度和宽度
随字体的研究•上篇发布了一款实验工具，通过此工具可以轻松地获得字体实际的小大，再次建议大家先阅读上篇再阅读下篇。在UI设计科学派的微信订阅号中提供了字体实验工具的下载，文字回复“字体的研究”即可获得最新下载链接（因字体实验工具会不定期更新，请在订阅号中获取最新下载链接）。
3步获取字体大小：
1. 输入我们需要的文字
2.设置字号和行间距
3.点击“显示效果”按钮
预览框中显示的黑色区域就是文字实际大小占据的区域，截图导入PS就可以量取具体数值。
获得字体高度和宽度之后，重新输出一下设计标注图（此标注图采用了UI骨骼，关于UI骨骼的介绍大家可以在UI设计科学派的订阅号中找到），如此标注，开发效果将会非常接近设计效果。
另外，我要呼吁各位亲爱的UI设计师，不要对这些“错误”视而不见，请尝试用“科学”的方法研究解决问题，并且“开源”我们的成果；UI设计不是美化设计，UI设计是一个真正的技术行业，一个科学科目。
问题6 文字的“行间距”和“字间距”
先讲讲字间距，设计过程中，需要调整字间距的情况不是很多，常接触的就是多行文本的首尾端对齐，看下面的例子。
我手动调整了部分文字间的字间距来获得整齐美观的段落对齐效果。很遗憾的是，Android系统的原生文本控件，并不支持自定义字间距，想要实现文本的首尾对齐效果必须“自定义控件”才行，因为自定义控件的编码工作量较大，加之设计上的需求也比较少，就不多加讨论了，大家只要知道：字间距自定义是可行的，只是编码工作量较大。
Android系统的原生控件对自定义行间距的支持非常好，设计过程中调整行间距的情况也很多，因为行间距会影响到文本的阅读感受和阅读效率，还是先看一个例子。
不同的设计环境需要不同的行间距，有的需要高效，有的需要美观，在上篇的问题3中提到过，PS的默认行间距和Android开发效果的行间距是不同的，不仅如此，不同的系统和不同的软件对默认行间距的处理也不尽相同。不要担心，通过实验工具可以轻松获得设计效果下的开发数值。实验工具提供了系统的默认行间距效果页面和自定义行间距的功能来解决各式各样的文字排版需求。
行间距数值和行间距倍数的含义：
行间距数值（开发采用android:lineSpacingExtra定义）：表示在默认行间距的基础上增加或者减少多少dp/sp/px，通常采用dp做单位，我也推荐采用sp做单位，正数代表增加，负数代表减少。
行间距倍数（开发采用android:lineSpacingMultiplier定义）：表示采用默认行间距的多少倍，可以使用小数，大于1代表增加，小于1代表减少。
同时应用“行间距数值”和“行间距倍数”时：总行间距 = 默认行间距 × 行间距倍数 + 行间距数值。
大家在使用实验工具的过程中可以多尝试，有问题在可以在UI中国或UI设计科学派订阅号中回复给我。字体大小和行间距高度的显示原理，会专门写文章进行讲解。
问题7 0.5px的文字会不会进行四舍五入？
废话不多说，放“实验工具”！
将截图导入PS，红色文字是按照实验工具中设置的字号写的，而蓝色文字则是按照四舍五入后的字号写的，实验结果显示，开发效果与四舍五入后的文字效果一致。这好像是一个闲的蛋疼的问题啊~不要过早下结论，我们看一个例子来证明这个问题是非常有意义的。
下面的截图来自nexus s（hdpi机型），它的屏幕密度为1.5x，hdpi的机器依然有较大的市场占有率，多为运营商的合约机，使用者也多是上了年纪的用户。当我们使用了11sp、15sp和17sp的文字时，理论上应该显示为16.5px、22.5px和25.5px的文字，因为“四舍五入”原则，实际会显示为17px、23px和26px。不要小看多出来的0.5px，在低分辨率手机上很大程度地提高了可读性。
接下来，我会给出字号使用的建议，中心思想是希望UI设计师采用更大的字号，照顾更多年龄段的用户以及特殊人群。
1个建议 我常用的字号
我最常用的字号：
一级标题：18sp，比如新闻列表和正文页面的标题，重文字阅读的app应该尽量大一些。
二级标题或正文：16sp
说明性文字：14sp
注释性文字：12sp，只用在时间戳等不太重要的地方。
如果你特别喜欢小字号：
一级标题：17sp，比如新闻列表和正文页面的标题，重文字阅读的app应该尽量大一些。
二级标题或正文：15sp
说明性文字：13sp
注释性文字：11sp，只用在时间戳等不太重要的地方。
希望大家尽量采用较大一些的字号，我们有一天也会眼花的呢。另外我还喜欢用偶数字号，减少系统进行四舍五入的情况。
求关注以及相关资料
关注UI设计科学派微信订阅号（微信搜索“UIDesignScience”），提前了解下期内容。希望有越来越多的UI设计师跟我一起研究“UI设计中的科学性问题”，发现UI设计的科学之美与逻辑之美。
相关资料
字体的研究 上篇：强烈建议先阅读上篇再阅读下篇
UI的骨骼 概述：文中标注图采用了UI骨骼，顺便了解一下吧
全部评论：33条
-
-
bingxueling
2018-02-13 14:05@遐了个想: Android的TextView中的文字，无论中英都是不垂直居中的，如果多行文字并且修改了行高，情况又更复杂，所以只是知道行高，意义不大，因为这样去标注依然存在很大误差，另外行高是字号的1.35倍。
-
-
-
-
-
-
-
-
-
-
bingxueling
2017-08-21 17:21@6277: 最新版在此：https://pan.baidu.com/s/1hsP6fcg。抱歉，之前我把apk从400k精简为90k，就删掉了旧包，只要在公众号回复“字体的研究”随时可以下载最新的安装包哦。
-
-
-
-
-
-
bingxueling
2017-06-15 17:53@QQ627011七娃: 那个apk安装包是Android的应用程序，安装的话，用qq从电脑发送到手机qq里，点击就可以安装啦，如果遇到安全提示，打开“允许安装未知来源的应用”就好~
-
-
bingxueling
2017-06-13 17:27@ARKBIRD: Android的字体显示算法中，的确是通过计算基线、下降沿以及上升沿来确认行高的，行间距实际是第一行文字基线到第二行文字基线的高度。但是这些算法都是封装在控件中的，其实开发同学也闹不清具体怎么显示，所以不推荐你这样标注，除非你在设计的控件是需要开发自定义这部分算法的。文字的显示原理，我还会进一步进行讲解，也会涉及到文字的几条比较重要的“线”，但是这部分内容相对来说更高级，暂时为了保证文章通俗易懂，所以尽量没提。最后谢谢你的提问，这是一个非常值得去研究的问题啊~
-
-
JTsniffrose
2017-06-10 17:33@你要不要吃菠萝: Sketch 里会显示字体的 line 高度，当然这个可以自定义，在 Android 开发里也是可以自定义，你也可以打开手机里的显示布局看到 inline box 的高度，Android 中字体的 line-height 与 Font Size 有默认的对应关系，做手机系统整理过对应数值，如果需要可以私信我，另外作者文章是关于字体的，但基本的英文与中文字体混排和大小写貌似没搞明白（中英文之间要空格），所以看起来很难受。
-
bingxueling
2017-06-09 11:49@韩小胖: 关于px，sp和dp的关系，后续还有文章专门讲解，我先告诉你一个结论吧。如果你的设计稿是2x的文件（比如iPhone6或者720x1280的Android）那么sp = px 除以2。如果你的设计稿是3x的文件（比如iPhone6p或者1080x1920的Android）那么sp = px除以3。以上的结论是个常见情况，三星的note等手机，可能会是2.5x的。
-
-
bingxueling
2017-06-08 22:30@你要不要吃菠萝: 如果你在设计Android的APP，可以下载我的字体工具，来测量所需字号的的上下左右4个间距值，因为iOS的测试工具暂时还没有，就只能请公司的开发同学帮忙提供一下啦。
-
你要不要吃菠萝
2017-06-08 18:39请问，字体宽度和高度，在PS里对齐和调整距离时要怎么应用呢？在PS里不会显示这些。例如我要用文字跟一个形状左对齐，那直接用左对齐工具，字体内在的宽度就被忽略了；还有我要让文字距离一个形状10像素，以前的做法是让文字跟形状贴边，然后再移动10像素，这样的话文字的高度和宽度是不是又被忽略了？
-
-
-
-
- 更多
更多作品
发表评论