恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
我把思源黑体和 Inter 字体合并了
6.1°
2022-03-02 原创文章 经验/观点 举报 21193 14 221 5

// Source-Han-Sans Copyright© Adobe

// Inter Copyright© Rasumus Andersson (rsms)

因为工作原因,日常在使用中文字体时会用到思源黑体,而英文和数字字体则会用到 Inter 字体。然而,中英混排则是家常便饭,这样就需要手动不断地切换字体,麻烦且低效。正因如此,就有了今天这个内容:我尝试把思源黑体和 Inter 两款字体合并在一起,然后大胆且随意地将这个合并后的字体命名为 "Sinter" 。 (文末有字体包下载方式)

思源黑体是由 Google 和 Adobe 联合开发的一款开源字体,我想大家都很熟悉了,而 Inter 这款字体可能就鲜为人知了。Inter 也是一款可免费商用的开源字体,设计该字体的作者是来自瑞典的 Rasmus Andersson(拉斯穆斯·安德森)。

Rasmus 他是一位全栈设计师,不仅有优秀的设计能力,同时对于编程的相关能力也非常厉害(偶像+1)。他是 Spotify 初期的设计师之一,中间也在硅谷的不同大厂工作过,在 2016 年他加入了 Figma ,参与了很多 Figma 早期的设计与开发工作(他在 2020 年离开了 Figma),Inter 字体就是他在 Figma 工作期间的一个产物,也是当前 Figma UI 的默认字体,同时 GitHub brand、Mozilla brand、elementary OS 等都在使用 Inter 字体。 

滑动查看更多内容(以上图片均来自 Rasmus 个人博客网站:rsms.me)

在 Rasmus 的个人博客网站里有提到 Inter 字体的由来,始于 2016 年底的一个实验性项目,以特定的小尺寸(11px) 构建像素完美对齐的字体。但在后面测试过程中发现这个方式是行不通的,所以在经过各种修改和项目重启,直到 2017 年 8 月份,才发布了该字体的 1.0 版本(目前最新版本号为 3.19,2021 年 6 月份所发布)。

如果想了解更多关于作者和 Inter 字体的故事,推荐大家收听关于字体设计方面的播客栏目《字谈字畅》,在 155 期里就详细地谈到了这款字体的故事。

字谈字畅 #155:没有 face 的 interface 字体 (点击链接)

言归正传,这次字体合并的内容,是把 Inter 字体里所有字符都合入到思源黑体中,而思源黑体只保留 CJK 部分 (即中日韩文字以及相关标点) ,其余如阿拉伯数字,英文字母等都由 Inter 来代替。这样在中英混排的时候,就无需来回切换字体,实现一步到位。

顺便也说下合并的大概过程。虽然思源黑体和 Inter 在最新的版本上均支持了可变字体,但合并字体后需要把可变字体的参数重新设置,在这个庞大工作量以及个人能力有限的前提下,毅然就放弃了做可变字体的需求。然后接下来就是 Weight 的问题了,也就是字重。思源黑体自带七个字重,而 Inter 字体则带有九个字重(排除斜体),同时两款字体相同的 Weight 下的笔画粗细都并不适合直接复制粘贴进行替换,需要通过软件对 Inter 的几个字重进行微调,以达到与思源黑体文字符号的视觉平衡。最终以思源黑体的七个字重为基准,将两款字体合并在一起。

Sinter,合并后的字重以及中英混排

思源黑体和 Inter 的英文与数字对比

最后最棘手的问题就是 OpenType 特性。在没做这个合并项目之前,我对于字体的 OpenType 特性可以说是毫无了解,在经过一段时间的研究和查阅资料,发现原来字体的特性已经发展到如此强大,不仅有前面提到的可变字体的特性,还有比如常见的数字间的冒号自动居中,大写字母以及数字间的符号自动居中对齐,甚至输入特定文字可以替换成相应的图标(图标是文字格式)。

Inter 这款字体带有多达 15 种特性,虽然思源黑体也有比较多的特性,但是大多 OpenType 特性基本都是基于西文设计的,所以除了保留思源黑体少数的特性外,其他都需要保持回 Inter 的 OpenType 特性。

Inter 自带的 OpenType 特性(来源:Inter 官网) 

在经过反复筛选后,最后挑选了部分在中文环境下常用且实用的特性,下面以 Figma 软件为例,展示这些 OpenType 特性。(Sketch、PS、AI、InDesign 等设计软件均支持 OpenType 功能,至于怎么设置请自行网上搜索)

滑动查看更多 OpenType 特性


至此该款合并的字体项目就宣布完成了。

我会将这款合并后的字体包发布给大家使用,获取方式请查看主页添加公粽号↑↑。




Copyright 版权信息

‧ 思源黑体 (Source Han Sans) 版权属于 Adobe 公司

‧ Inter 字体版权属于 Rasumus Andersson (rsms)

‧ Sinter 字体基于以上两款开源字体制作,符合 SIL 开源字体许可 (SIL Open Font License, Version 1.1)


Powered by Froala Editor

更新:2022-03-02

收藏

14人已收藏

_N1c

公粽号:家常士多

  • 7

    作品

  • 50

    粉丝

  • 17

    关注

  • 汽车HMI|非正式设计稿.fig
  • NO.0817 ↑↑
  • B端 | 专业后台跟单管理系统
  • meet - 校园社交App设计

    猜你喜欢

      2022-03-02 原创文章 经验/观点 举报 21193 14 221 5

      我把思源黑体和 Inter 字体合并了

      6.1°

      你确定要举报我把思源黑体和 Inter 字体合并了

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年02月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      221
      14
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录