每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
同样的字号，PS和开发效果是否一样？如何获取文字的真实高度和宽度？一起来聊聊这些困扰过我们的字体问题。
7个问题 + 1个建议
感谢一下提到这些问题的同学，让我有动力完成这次的“长篇大论”。字体的研究分成上下两篇，此为上篇。设计中经常要和字体打交道，今天来探索下那些让你纠结过的字体问题。
研究方法与研究工具
科学的研究方法一般包括7个步骤：1.提出问题 2.猜想与假设 3.制定计划与设计实验 4.进行实验与收集数据 5.分析与论证 6.反思与评估 7.表达与交流。
要回答刚提出的部分问题，必须需要进行一些实验，我开发了一个用来进行“字体”实验的工具，它是一款Android的应用程序，当我们在Android设备上运行它，可以看到如下界面。
第一个界面显示了不同字号的开发效果，黑色背景是文字所占用的实际区域。第二个界面可以对文字内容、字号、字号单位、行间距以及行间距倍数进行自定义，通过自定义参数我们可以进行其他的字体试验。
在UI设计科学派的微信订阅号中提供了字体实验工具的下载，文字回复“字体的研究”即可获得最新下载链接（微信搜索“UIDesignScience”关注UI设计科学派订阅号，因字体实验工具会不定期更新，请在订阅号中获取最新下载链接）。
问题1 iOS与android默认字体的进化过程
这个问题比较简单，应该有很多设计师都可以回答，但是出于科学研究的完整性，我还是要再重复一遍，并且最后大家会发现，越是简单的问题越可能藏着意料之外的情况。
Roboto字体有3种版本？对！从Android系统引入Roboto字体作为默认英文字体之后，已经优化过两次，如果注意不到这个变化，那么接下来的研究就可能得出完全相反的结论。接下来我们要看一下这些字体样式，示例中我以每种字体的Regular或Light样式进行展示。
对比三版Roboto，会发现第一二版本变化较小，最新版的设计变化较大。笔画越来越流畅，风格上越来越骨感和简约。字母和数字都有非常细致的优化，下面是放大后的数字对比图，大家可以感受一下。
现在已经知道了两个常见手机系统随着版本的迭代都采用了哪些字体，也知道了同一款字体会不断地变化。这个结论对我们后续的研究非常重要，为了保证设计的严谨性，必须要清楚自己使用的测试设备采用了什么字体，并在设计过程中也采用完全一致的字体。
问题2 px、dp和sp之间有何关系？
px是我们在PS等设计软件中最常用到的单位，1px就是屏幕上的1像素。我们可以在PS中采用px作为字体字号单位。如果你的软件中看到字号单位是“点”，没有关系，只要画布分辨率为72像素/英寸，1“点”= 1px。如果你想换成px，可以这样操作。
dp也会经常接触，在iOS中，这个单位叫做“点”。dp是个物理单位，dp数量 × 屏幕密度 = px数量，可以简单理解为“屏幕越细腻，1dp所包含的px就越多”。
常见设备的屏幕密度：
iOS阵营
iPhone5s~iPhone7：2x
iPhone6p~iPhone7p：3x
大部分的ipad：2x
Android阵营
hdpi设备：1.5x（代表机型为nexus S，4英寸，分辨率为800×480）
xhdpi设备：2x（代表机型为三星 GALAXY SIII，4.8英寸，分辨率为1280×720）
xxhdpi设备：3x（代表机型为nexus 5，4.95英寸，分辨率为1920×1080）
xxxhdpi设备：3.5x（代表机型为nexus 6P，5.7英寸，分辨率为2550×1440）
举个例子：以nexus 5来做设计效果，我将文字的大小设计成42px，那么开发同学就要写成14dp（42 ÷ 3 ）。
最后是sp，一般情况下1sp = 1dp，但是当用户调整过手机的默认字体大小后，采用sp为单位的文字会根据调整比例进行缩放。所以Android官方强烈建议APP内的字体采用sp为单位来保证应用的易用性。
在调大系统字号前后，分别用字体实验工具生成了16sp和16dp大小的字体预览效果。从上图可以看到采用sp为单位的字体，会随着系统字体变大而变大。
设计过程中，当字体采用sp为单位的时候，应该提前考虑到文字随系统进行缩放之后的适配效果，今天不会对此话题进行讲解，后续会在UI的骨骼的章节中慢慢探索。
问题3 同样的字号，PS和开发效果是否一样？
这可能是大家最关心的问题。文字的效果还要进一步分解为：视觉大小、粗细、字间距以及行间距。将字体实验工具的截图放在PS内进行一下对比，测试设备为 nexus 5，系统版本为4.4.4，PS中所用字体为第二版Roboto和DroidSansFallback。
红色文字是在PS里写出来的，字号为60px（即20dp），通过实验可以得到如下结论：
1. ps中的文字视觉大小和开发效果是一致的，粗细也一致。
2. 英文Roboto字体的字间距会有一些差距，在PS中的字间距稍小。
3. 中文DroidSansFallbac字体的字间距保持一致。
4. ps的默认行间距差与开发效果差距较大，必须手动调整才能保持一致。
整理一下结论：同样字号下，PS与开发效果几乎保持一致，但行间距需要单独调整。行间距会在“问题6”中进行研究。
科学的研究方法还需要我们再次验证已发现的结论，下面是用另外一台系统版本为6.0的nexus 5手机进行的验证结果。
在Android 6.0系统上进行的测试，得出的结论基本与Android4.4.4系统是一致的，证明刚才的结论是正确的。
未完待续
字体的研究•上篇就先讨论这3个问题，剩余问题会在下篇继续研究。关注UI设计科学派的微信订阅号（微信搜索“UIDesignScience”），提前了解下期内容。希望有越来越多的UI设计师跟我一起研究“UI设计中的科学性问题”，发现UI设计的科学之美与逻辑之美。
全部评论：16条
-
-
-
bingxueling
2017-07-10 18:25@陈闲闲: 我还没有来的及写ios的版本，不过你可以看看知乎的这一篇文章，也许可以帮到你：https://zhuanlan.zhihu.com/p/27572662
-
-
-
-
-
-
-
-
bingxueling
2017-06-01 16:29@elam: 谢谢支持！ios的版本，开发和安装比较麻烦，将来希望可以提供给大家。不过原理跟Android一样，大家只要明白了这个原理，在遇到开发效果不佳的情况就知道应该怎么解决啦。
-
elam
2017-06-01 16:02我之前也抓着我们团队的iOS给我搞了一个类似的软件，算是勉强知道怎么控制sketch输出的设计稿，跟iOS搭建出来的界面的差距，但是一直没有几乎搞Androi的。所以你这篇文章实在是太有用了！！
-
-
-
-
-
更多作品
发表评论