开发间距 ≠ 设计间距 ?

注意字体行高!多是行高致使的和开发间距不一致。字体

因为Android和iOS系统字体集中为了保证屏幕显示清晰易读,字体宽度和圆度都有轻微提升。所以在默认的开发字体中是有行高保证的。插件

拿iOS举例,能够参看一下这篇文章《在iOS中如何正确的实现行间距与行高》设计

从中能够看出,iOS想要达到设计稿的像素级还原仍是须要作不少工做的。3d


★ 在咱们设计过程当中只须要留意一下行高便可避免不一致的问题。cdn


使用默认的或者设置成和字号同样的大小的行高最终和开发效果仍是有必定的差别的;blog

理论上来说包括上边那篇文章也讲到开发能实现和设计稿同样的效果;支付宝

但为了保证全部开发效果的统一,仍是建议尽可能从设计稿里规范,毕竟不是全部开发都愿意费劲去调几像素的间距(而且每次都要调整);是从设计中调整行高,仍是从开发中减去行高,这也是工做协同沟通的一部分。开发

Android开发字体也是有行高的,因为Android开源暂不作研究,但其实开发效果和iOS差距不大,若咱们是以iOS画板作设计;get


对比表

下边就拿iOS举例,如何计算/设置字体行高:it


插件

针对这个问题,也有人开发了Sketch字体行高自动修复插件。

插件下载

Auto Fix iOS Text Line Height

Auto Fix Android Text Line Height


公式

除了查表和使用插件的方式外,我比较推荐这个方式,会更容易理解。

* 公式来自 支付宝体验设计精髓 一书


能够理解为, 不管咱们使用了多大的字号,将其 除以 10 向上取整乘以 2 再加上 字号参数 就是当前字号的开发字体行高。


经常使用字体字号/行高对比表



END / THX

相关文章
相关标签/搜索