Sketch 里如何设置字体行高

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
1841 0 5 2021-12-30

避免与前端工程师互殴指南(一)


01#背景与问题

在项目视觉走查的时候总会发现一些小问题,比如昵称和简介之间的间距与设计稿不一致

比如标签文案没有在容器里上下居中

排除前端没有按照设计标注上的数值进行设置外,主要原因是 Sketch 里字体默认行高与开发系统中的行高不一致导致的


02#字号与行高

Ant Design 里形容行高:行高可以理解为一个包裹在字体外面的一个无形的盒子

例如 iOS 项目中同是16px(全文用一倍图尺寸)的字号,在 Sketch 里默认高度是22px,但在开发环境里却是20px


iOS 开发系统与 Sketch 默认行高对照表

可以发现 iOS 开发系统中苹方字号范围10pt ~ 20pt行高+4px,21pt ~ 30pt行高+6px


03#解决方案

Sketch 有一款插件 Auto Fix iOS Text Line Height,完美修复字体行高问题,仅针对苹方

https://oursketch.com/plugin/auto-fix-ios-text-line-height

也有针对安卓开发环境的字体行高修复

https://oursketch.com/plugin/auto-fix-android-text-line-height


04#关于网页中line-height属性

网页的行高属性是可以进行设置的,如:

normal:大约是字体的1.2倍,但对不同的浏览器或字体都会有不同的效果,如字号16px*1.2=19.2px行高

number:一个数值,如是1的话,字号16px*1=16px

行高%:百分比数值,如120%,字号16px*120%=19.2px行高

length:固定值,如16px,字号16px=16px行高,字号20px=16px行高

个人在项目中用的比较多还是1.5倍,字号12pt/14pt+6px,16pt/18pt/+8px等等,当然这并不是一个标准,怎么设置还是要根据项目具体业务与前端配合调整


公众号:柠檬设计笔记

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票