思源黑体优化版发布!完美解决行高和字体偏下问题(已打包) 收藏

UI交互2023-02-15

经常做安卓端设计的朋友应该经常被一个问题困扰,那就是思源黑体的行高特别高,而且文字整体偏下。这会导致在 UI 设计软件中使用居中操作后,视觉上总是偏下的。

但是这一问题 Adobe 官方一直未曾解决,甚至不认为这是问题。

思源黑体 和更多黑体字下载:

视觉设计师来收!免费商用字体推荐:黑体篇(13款已打包) “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。

阅读文章 >

作为一名从业多年的非著名视觉 设计师 ,这种事情是不能忍的。如下图所示,虽然按钮文本在布局中是居中的,但是因为行高的存在,以及思源黑体文本本身偏下的问题,此时文本整体是偏下的。

当前因为硬件平台以及软件适配等原因。不同公司对行高的定义是不同的,有 1.4 倍、1.5 倍,以及一些更复杂的计算方式。而思源黑体因为整体偏下以及原本默认行高偏高,自定义行高后在 figma 和 MasterGo 等设计软件中,字体显示更加离谱,完全失去了平衡。

那究竟有什么好的解决方案呢?

关于这个问题我跟国内多家设计软件提了建议,但是目前还没有人着手优化。于是便自己寻找各种解决方案,终于功夫不负有心人。让我发现了一款基于思源黑体优化的字体——梦源黑体。

此字体为免费开源可商用: https://github.com/Pal3love/dream-han-cjk

为啥叫梦源黑体呢?是因为此字体是一位叫做梦回琼华的软件开发工程师在思源黑体可变版的基础上修改的。

梦源黑体将可变版思源字体的大量中间字重实例化为传统单字重字体,合并了重叠的曲线轮廓,在保证最大兼容性的前提下,提供更加细腻、丰富的字重选择。此外,本项目修复了思源系列广泛存在的 Adobe 行高过大问题。本系列字体的其他功能(如字形、竖排、kerning、多语言、异体字、曲线精度等)与思源系列保持完全一致,未做任何修改。(引自作者原文: https://zhuanlan.zhihu.com/p/480219182 )

通过下图,我们可以发现在相同字号和行高的前提下,思源黑体、梦源黑体和苹方三款字体的文字布局,苹方始终可以保持居中位置,梦源黑体在一般常用字号大小时表现优异,能够保持居中。在字体过大的时候会出现一点偏下,在使用 64 号字时,上下间距约相差 3px,完全可以满足日常使用了。而思源黑体就显得惨不忍睹了,基本 10 号字以上就会出现明显偏下;

既然梦源黑体能够解决思源黑体存在的问题,那么直接替换是不是就可以了呢?理论上是可行的,但是还会存在一些问题,因为梦源黑体的原作者是基于可变版思源黑体来优化的,其字重有 27 个之多。而思源黑体标准版则只有 7 种,从细到粗分别是 ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy;

所以要想使用梦源黑体,就需要和标准版的思源黑体字重一一对应,通过对比筛选出其对应关系为:ExtraLight=W1、Light=W6、Normal=W12、Regular=W13、Medium=W17、Bold=W22、Heavy=W27;

所以如果你只是想解决字体行高和不居中的问题使用上述字体字重即可,在 UI 设计软件中也可以自定义行高,文本会使用保持上下居中;

而笔者作为强迫症,又对梦源黑体进行了如下修改,首先将字体名称和字重从梦源黑体改为了对应的思源黑体及字重。

同时针对针对 Android 端中文使用思源黑体,英文使用 Robto 字体,排版时需要来回切换两种字体的问题,将思源黑体中 95 个英文字符替换为了 Roboto 字体。使用修改后的字体你能够得到的效果如下:

因为此款字体是基于思源黑体可变版优化的,所以和思源黑体标准版字形和字重有细微差异,请知悉,同时本人已联系原作者,希望不久后基于标准版思源黑体优化的版本能够和大家见面。

相信此款字体能够解决广大设计师在工作中的一些困扰,最后向梦源黑体的作者致敬(有条件的朋友可以去 github 给作者点一个免费的小心心)。有需要的小伙伴可以附件下载梦源黑体原版以及经过本人改造过的思源黑体文件。(仅做交流使用,不作任何商业用途)

欢迎关注作者微信公众号:「动效研究社」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通