TDesign 始终专注于将设计与研发紧密结合,以实现跨框架和跨终端的一致体验。字体是设计体系中不可或缺的组成部分,也是表达个性化的极佳媒介之一。与此同时,字体技术也在不断发展,那么如何在中文语言环境下创造更具均匀性、扩展性和通用性的字体呢?
2018-2023
TCloudNumber 字体诞生于 2018 年,该字体是由腾讯云项目设计师设计。顾名思义 Number 就定义为专门为数字服务的字体。一直以来 TCloudNumber 广受公司内外的用户喜欢,但字符量的缺少,不禁让许多人产生了疑问为什么只设计了数字,数据的展示没法扩充更多场景。
2023 年,我们将全部字体重新设计,增加 Light 和 Bold 两个常用字重并使用 Variable Font(可变字体)功能。除此之外增加了许多常用数据符号,希望赋能更多数据场景。
系统数据的气质
不论是简体中文还是繁体中文,中文字体包的体积都相当庞大。为了降低性能损耗,实际落地的产品和业务往往采用操作系统默认字体。另一方面,TDesign 一直致力于保持通用性并在不同产品之间建立认知,以推动其不断进步。针对各种互联网产品,数据已成为不可或缺的展示内容。数字字体在数据的聚集、识别和个性化方面发挥着重要作用。希望在中文系统中为数字增添更多趣味性,使原本枯燥乏味的系统界面充满情感价值。
字可变,字形窄,字同宽,字距松
TCloudNumber 默认字重对比常规字体提升 20%,并提供常用的细体(Light)和粗体(Bold),除此之外应对更多场景,我们希望和技术能更好结合,增加了可变字体能力。可变字体是单个二进制文件,大大减小了文件大小,利用更紧凑、更快速的方式来为产品提供动态字体,字重展示更加动态灵活。
整体字形窄,在默认系统数字字体对比下,整体缩小 40%,减轻大数据量负担,默认字体为 Condensed(紧凑)模式,更适合产业互联网系统场景。
所有字形保持同样的字宽,保证单一字符绝对对齐,同时等宽优先保证字符较小的尺寸,在数据排列场景中更聚焦,以便更好地对比数据。
较宽松的字符间距可以提高可读性,因为字符之间的间距越大,每个字符形状之间的对比度就越高。对比全部数字加符号的内容,即使是小字号,也由于增加了字母间距而提高了可读性。
锐利并不锋利
在 TCloudNumber 的字形设计初期,采用了具有包豪斯主义特色的几何拼装风格,旨在创造出强烈的产业互联网氛围。极简主义和效率至上成为了这款字体所追求的设计理念。这种设计风格与 TDesign 的品牌价值观高度契合,希望字体更加通用,更具有包容性。
设计中文和英文字体时,上升部和下降部的定位决定了字符位于基线的位置,TCloudNumber 只有全数字和符号,所有的字符都以基线和上升部对齐,符号既做到水平居中,在特殊符号也能在下降部提供足够的空间,混搭系统默认中文和英文情况,也可以保持水平对齐,保证字体阅读的一致性。
开源共创
腾讯始终致力于赋能整个产业互联网,这也激发了设计师团队首次采用技术手段进行创新字体设计。尽管字体数量规模有限,但凭借技术与设计的紧密结合,未来将在更多字体应用场景和图标能力迭代升级,除了字重以外也会针对字宽进行可变调整。持续推动设计与科技的优化应用,助力各行各业升级,使 TDesign 茁壮成长。
字体源文件可前往 “官网设计-字体” 中进行下载,除了可变字体以外,为了保证兼容性我们还提供了 3 个常用字重源文件。如在网站上使用可变字体能力可以使用 CSS 能力,字重(由 wght 标签表示)对于可变字体,1 到 1000 之间的任何数字都是有效的。
代码语言:javascript复制font-variation-settings: "wght" 305; /*305为自定义变量值*/
如遇到字体升级重复无法使用可变功能等问题,欢迎联系我们。
下载地址:https://tdesign.tencent.com/design/fonts
以上内容有参考如下资料
Variable fonts guide 链接地址:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_fonts/Variable_fonts_guide
Creatinga variable font 链接地址:
https://glyphsapp.com/zh/learn/creating-a-variable-font
撰文:Wenkang、Denghui
主创团队:腾讯 TDesign Oteam
关注我们