[无线手册-4] dp、sp、px傻傻分不清楚[完整]

做移动设计的同学，不管是原生app或者web app，应该对字体字号都是很头痛的问题。根本原因是，我们用唯一分辨率的电脑，设计各个不同尺寸大小分辨率的设备，那简直要疯掉了。

但不要着急，我们先来理解一下一些名词：

我们一般会碰到的度量单位主要有：dpi、ppi、dp、sp、px、pt、in。其中，px应该各位最熟悉的单位，也是我们主要使用的photoshop或者axure等工具用的度量单位，而它在移动端时，的确已经“过时”了。但不要着急把它丢掉，因为它是接下来非常重要的换算单位（所有手机参数还是用px在表达）。

dpi和ppi这两个是密度单位，不是度量单位，而这两个恰恰是我们换算中重要的分母。简单理解一下：

• ppi (pixels per inch)：图像分辨率 （在图像中，每英寸所包含的像素数目）
  
• dpi (dots per inch)： 打印分辨率 （每英寸所能打印的点数，即打印精度）
  

PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数

举个简单的栗子，iphone5的ppi是多少？ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）.这样大家就能够明白ppi和px的关系。

这里还提到in（英寸）这个词，这个非常重要，因为现实中我们经常提到4英寸手机或者5.5英寸大屏手机，而这个尺寸是用户真正感受到的物理大小，所有提到不同尺寸的屏幕不仅仅是分辨率或者像素，而更多的是英寸。

好，现在关键的来了，dp、sp、pt，是我们设计中的关键。

• dp：Density-independent pixels，以160PPI屏幕为标准，则1dp=1px，dp和px的换算公式 ：

  dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px。

• sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px。

  sp 与 px 的换算公式：sp*ppi/160 = px

为什么要把sp和dp代替px？最简单的原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。

但问题来了，ps或者axure里面没有sp或者dp这个选项啊，怎么办？看到网上有人说用pt去替换px（pt是物理高度，1in=72pt）。补充一下自己推算的pt转换px的公式，不一定对，可以参考：例如9pt，再96dpi下，那么就是9 * 1/72 * 96 =12px。而在72ppi下，9pt=9px。

我再来做个小小的实验：

1、先了解清楚你笔记本的ppi，比如我的macbook air是11.6英寸，1366 x 768分辨率，那么它的ppi就是135ppi。

2、然后新建一个页面，输入的ppi值就是你电脑的ppi值。我们先来看看不同ppi值在电脑上呈现的字体大小是怎么样的：

我用的都是arial 14点（注：专家指正这里不是px而是pt，点）的字体，但在320ppi、160ppi、135ppi（我自己的）以及标准72ppi下的大小，截然不同。

好，我们再来看看，在电脑上直接截图web页之后对比的效果：

你会惊讶的发现，只有72ppi是正常的，其他字体都不对了，因为原本的web设计是不用考虑dp、sp或者ppi的，它是直接px作为物理单位的，而点在72ppi下（1pt x 1/72 x 72dpi=1px）是正常显示的。所以我们以前做web的时候根本不用担心自己的设计在别人电脑上看起来会很大或很小。当然其实像firefox是用96dpi，也就是9pt=12px。

但我再截一下用iphone访问web之后的图：

但是到底是选160ppi还是135ppi呢？如果选了135ppi那在别人的电脑上会怎么样呢？是不是又要重新调？其实不用，我借用另外一台Retina的macbook pro做了相同的测试，你会发现，其实和屏幕ppi无关，和你在ps里设定的分辨率有关。

[补充，有位专家指出我的不对，就是在点和px上我搞错了，我又尝试了一下，如果是px的话，不同ppi下字体大小是不变的，而点（pt）的话会有变化。

并且如果是用pt来代替px的话，为了整除方便，那么ppi一定要设置成72的倍数，比如144ppi，上图里面160ppi则会除不尽，所以上图其实160ppi的字体还是和截图字体有些许差异。]

然后有专家提出，iOS下是用pt作为字体单位，而Android是以sp作为字体单位，而且web app还是以px作为字体单位。怎么样让设计和输出单位是一致的？我之前给出的解决方案并不十分严谨易懂，所以我重新编辑了一下。

为了求证移动字号的问题，跑了一圈同事，最后只能暂时得出一些“不一定正确”的结论：

1、字号行业标准几乎没有，不像web一样，宋体12px、14px这样很清楚。我唯一找到的只有Android的设计建议：

图中原作者还换算了一下在240ppi下对应的px值。

而我问了一圈同事，基本上现在设定字号都是凭感觉做事的。当然你也可以参考Android这个标准。

2、如何在电脑上快速预览高清内容是否排版合理，我想到最简单的一点就是缩放psd，缩放的比例很关键，要达到物理尺寸，首先你得知道你电脑的分辨率，我的分辨率是135ppi，如果要看分辨率是326的iphone上的效果，就缩小到135/326≈41.4%，你就会发现物理尺寸非常接近。可以看看一些排版上的问题。当然你也可以装一些工具来达到更好的效果。

3、怎么和开发沟通你的字体大小？我也没有特别好的办法，就简单分成3块来说：

• iOS，你设计的时候字体记得用“点”，然后ps设定分辨率用标准的72ppi即可，因为据同事说，这样下的pt值是准确的，或者说iOS自动会转换这个值。具体也需要大家操作了才知道。而这个分辨率下1pt=1px，我简单换算了一下sp->px->pt的尺寸：
  

12sp=24.45px=24.45pt；
14sp=28.52px=28.52pt；
18sp=36.67px=36.67pt；
22sp=44.88px=44.88pt；

但这个小数点实在难受，所以四舍五入取整数，并且为了保证可以整除，那么可以是24pt、28pt、36pt、44pt。

• Android，你就用标准sp就好了，当然其他图片等尺寸你可以用dp来表述。
  
• Web app，这个我也找不到答案，因为Web app还会涉及到响应式设计，而且前端会用em去表示字体比例。所以同样，如果你用72ppi分辨率做的话，直接可以把对应的字号告诉开发就好了，当然最好你所用到的字号是倍数关系，最小倍数是0.25，这样用em去做比例的时候会更容易些。比如12px、16px、24px、32px这样。

有关字体字号的研究已经有同事在做，以后有结论了再和大家分享。

[以上都是本人自己瞎弄的，如果正确纯属偶然，所以请那些“傻逼”闭嘴，我欢迎专业上的讨论和交流，但不喜欢人品低下地谩骂。]