可变式字体variable font在设计上的应用,以明/宋体为例

2021-05-17 23:27:31.0

分類: 字体产品与应用

可变式字体(variable font) 发布于2016年,发布至今,我们观察到许多字体设计公司逐渐地发布自家的可变式字体,经过这几年的推广,最近我们从问卷调查上发现国内的设计师对这样的产品仍然感到陌生,今天,我们藉由几个演示,再一次让大家认识可变式字体。

 

可变式字体的特色在于可随使用者的设定或是依应用程序的自动判断,变化出将近无限种的字体属性组合。只需要一个字体档案,就可以无间段调整该字体提供的字重、字宽或对比等可变属性,让设计师用字的创意不再受局限,同时也减少了庞大字体家族所需要的海量存储器空间。

 

不知道大家有没有思考过一个问题,字体设计师都是在60公分距离前的屏幕做字体设计,使用时,有可能近到20公分,远则超过5公尺以在使用的字体,这样的应用情境,字体的设计如果都一样,合理吗?设计师如果在用字的时后,思考到这样层次的问题,有没有产品可以上设计师挑选使用呢?

 

通常在进行字体开发前先会决定使用目的,而在选用字体时,会依情境来选用造型,在使用明/宋体这类的字体时,通常横向笔画的粗细是固定的,在可变式字体里,可以将横向粗细的变化设计在可变式字体的变化轴上,使用者除了传统的字重外,还可以使用到横向笔画(对比/Contrast)变化轴的调整。下方以文鼎书苑宋体书苑宋作为举例,因应复杂化的使用情境,书苑宋设计了四个横笔粗细的产品,为横笔宽度16(EM Square =1000 ) 到64 的响应式设计,使用者可依据使用配方建议,从内文到标题,从纸本到屏幕,因应不同情境选取适当字体使用。

 

有个多个横笔粗细对比这样的产品,我们思考一下,如果在设计这样的指示标示,怎么样可以让阅读讯息用的字体在画面上呈现的更好呢?画面上『南京三民站』这几个字分别使用思源宋体(上)与文鼎书苑宋体(下)做展示,我们可以看到这五个字符笔画数并不算多,但『三』这个字的笔画相对起来特别少,整体看起来视觉灰度少了一级。

这时候如果我们要对他加粗,通常的作法就是在AI里转外框,加笔画,但这样一来,字就变成图,不是字了,会增加后续版本维护的困扰。使用书苑宋可变式字体的微调后的成果,我们来看看调整前后的差别,经过适当的调整后,每个字符的视觉量感变得更平均了。

我们认为,设计师宝贵的时间应该要用在设计思考上,如果字体可以协助设计师解决问题,节省设计师的时间,那就是我们对设计产业的帮助。关于更多可变字体的信息可参阅下方文鼎iFontCloud云字库的展示说明

https://ifontcloud.com/index/variablefont.jsp


字体产品与应用

字体与外部环境改变的交互调整

 

80年代开始的计算机数字字体,在特性上,相较于铅字,有更容易开发多字重字体家族的特性,但是,在物理限制上,同一个字重若要使用在不同字号大小上,排版出来的显示效果就需要设计师稍微的留意一下字符间灰度的一致性。

 

我们一直提到字体的使用与外部环境、载体有着绝对的关系,时间拉回到活版印刷铅字的时代,初接触活版印刷铅字的朋友,看到铅字的规格有着初号、一号、二号、三号、四号、五号、六号等规格,一时间除了看到铅字大小的差异外,并不理解当中的用途以及铅字的设计。

 

概略来说,在铅字印刷的时代,铅字的设计在同一个造型不同字号的大小上,字符设计的结构布局具有细微的差异,这可算是近来optical size(视觉大小优化)概念的前身了,简单来说,就是为了让不同字号的字体可以有最佳的呈现,如:不同的应用情境、更清晰的显示或具有个性…而做的细微调整设计,以达到文字最佳的显示效果。

 

传统上,字体由细到粗的字重变化是字体这个素材在应用时最常用到的属性,但随着科技持续的研发创新,字体使用的载体早已不限于纸张材质的媒介,更透过不同印刷方式、油墨特性呈现多元的样貌,甚至在屏幕上的使用,也进化到肉眼分辨不出屏幕画素的是网膜等级。

 

我们整理几个字体应用在外部环境比较常受到影响的因子:

1.     光线明、暗

2.     直射光、反射光

3.     载体的不同:纸本、数字屏幕、纸张材质、屏幕分辨率

4.     数字屏幕:白底黑字、黑底白字

 

 

计算机数字字体相较于铅字印刷时代,在载体、使用环境上都复杂许多,以下,我们以文鼎方新书做为范例,来看看在不同的情境上,遇到汉字笔画数差异高的字符并列时,不加思索的直接使用字体,以及了解字体规格与特性后,微调后的排版效果,希望透过比较后,让用户更加的体认到字体使用上细腻、独到之处。

 

范例:文鼎方新书

文鼎方新书是一款保留着黑体的简练、稳重,也融合着明体的舒适、清雅的一款字体。这个使用情境的范例,上方的白底黑字或下方的黑底白字,都是模拟广告灯箱的直射光用字情境,方新书这个范例,是挑选已经默认好的字体设定来使用,当用字的载体环境都相同时(直射光),变量在于浅色底及深色底,我们会建议浅色底使用标准版的「文鼎方新书H7C95_H」,而深色底我们会建议使用有对汉字笔画数较多的字符进行笔画减细的「文鼎方新书H7C95D_H」,追求的都是降低视觉上光晕的现象发生,进一步的提升阅读的舒适度。

不同变量下使用不同规格、不同设定的字体,甚至是加以细节的微调,如字符间距、字符高度等,以达到最佳的视觉效果,这是我们在本篇文章希望读者可以学习到的地方。

字体产品与应用

Emoji图释in文鼎DC曼蒂手書體

2021年,文鼎字型与插画家Mandie合作,将Mandie亲笔书写的手写字开发成数字中文字体。Mandie自己平时一直保持着手写的习惯,希望藉由数字化后的字体产品,让大家在取得计算机打字方便性的同时,也能够重温手写字体的情感,让更多人记得手写字体的温度,回味一笔一画写字的时光。

文鼎字型自2015年开始开发文鼎DC陈森田MORITA、文鼎DC香蕉人体、文鼎DC云康钢笔行楷、文鼎DC蔡燊轩行书体,这类型的字体强调具有个人风格、个性化,近年在台湾市场能见度逐渐提高,应用在印刷、屏幕显示、手机接口上都有别于传统印刷字体的感受体验。

文鼎DC曼蒂手书体除了将Mandie的手书风格记录在字体中,另外还有一个小彩蛋:特别企划商请Mandie绘制了三百多个图释(emoji),让Mandie具有特色的手绘融入字体中。

要如何使用文鼎DC曼蒂手书体的图释呢? 我们以Adobe illustrator为例,当字符选择文鼎DC曼蒂手书体时,开启「字符」面板,滑动面板右方的拉杆,看到图释点选即可。需要注意的是在字符面板共有两个区块呈现这三百多个图释,这两者的差别在于当符号用于横排、直排的位置。



对于图释的开发,文鼎的设计师也不马虎,对于符号单独使用在横排、直排以及符号与汉字一起使用时,在横排、直排的排版效果都有加以优化的调整与设计。



在Adobe illustrator另外一个使用图释的方式是透过替换字符的机制做选用,在这个情境中,图释已经输入完成,将鼠标移至该图释上出现的替换字符,呈现的候选符号为上述为直排情境设计的字符。

近年来在Apple、Microsoft等系统厂商开发支持图释的操作系统、软件后,图释在使用上的门坎降低了许多,有兴趣的使用者可以在Mac、Windows上试试以下快捷键,呼叫出可输入图释的小键盘、窗口来使用:
Mac操作系统:Control+Command+空格键
Windows操作系统:Windows(窗口键) + . (句点)或Windows(窗口键) + ; (分号)

但要请使用者注意,现阶段有支持图释的软件有限,以Windows为例,同样是office 356中的Word、Excel、Powerpoint,输入图释后呈现的行为也会有异,这样的情形有待软件开发商的支持,以让图释有一个友善的使用环境。

文鼎DC曼蒂手书体
字体应用及用途:书刊标题、影片/电影标题、食品包装、生活感的广告标语、电子书信书写等。