马其他幸运飞艇

可變字體時代要來了

來源:最設計微信公眾號    時間:2019-10-11    站內收藏

2019NIAN9YUE24RIXIAWU,XIAOMIGONGSIZAIBEIJINGZHAOKAILE“XIAOMI5GXINPINFABUHUI”,TUICHULEBAOKUOXIAOMI9 Pro、XIAOMIMIX AlphaZAINEIDEYIXILIEXINPIN,QUANXINDEMIUI 11XITONGYEZAIFABUHUISHANGZHENGSHILIANGXIANG。MIUI 11XITONGYI“SHENGSESHUANGQUAN、XIAOLVGEXIN”WEIZONGZHI,WEIRAO “SHEJI”、“BANGONG”、“CHUXING”DENGDUOFANGMIANJINXINGQUANMIANSHENGJI。

作為中文系統字體定制的先驅,此次MIUI 11系統不僅帶來了全新的小米蘭亭Pro,還重磅推出了全球首家動態字體系統,希望為用戶提供極致的閱讀體驗。

在MIUI 11系統中,用戶可以通過“設置-顯示-字體大小與粗細”的操作進入字體模塊,拖動相應滑塊即可改變手機界面用字的字體大小和字重粗細。MIUI動態字體支持文字粗細無級調節,每個人都可找到適合自己的字重。

智能加粗還會根據內容層級和重要性予以文字不同程度加粗,使閱讀體驗更為極致。

搭載了動態字體系統的MIUI 11,在交互細節上也做了大量優化和提升。

在系統字體越來越受手機廠商重視的當下,此次小米推出的MIUI 動態字體系統無疑是業界的一次重大突破,也是手機系統搭載可變字體的一次有益嘗試。據了解,MIUI 動態字體系統獲得了2019紅點獎。

*以上視頻及圖片來自小米官方,版權歸原作者所有

關于可變字體,不少設計師朋友都有所耳聞,但在中文領域的實際應用還很有限。MIUI的大膽嘗試,既體現了小米對用戶體驗的高度重視,也是有前瞻性、探索精神的體現。接下來本文將與大家一起詳細探討“可變字體”。


什么是可變字體?


马其他幸运飞艇KEBIANZITI(Variable Fonts)JISHUYUANYUAdobe、Apple、Google、MicrosoftSIJUTOUYU2016NIANFABUDEOpenType v1.8 ZITIGESHIGUIFAN。GAIGUIFANDEFABUJIANGYUNXUDANGEZITIWENJIANTONGSHIZHICHIDUOGEZITIXINGTAI,TAKEYIJIANGJIGEZITIJINCOUDIFENGZHUANGZAIDANGEZITIWENJIANZHONG,TONGGUODINGYIZITINEIDEBIANHUALAISHIXIANDANZHOUHUOZHEDUOZHOUSHEJIKONGJIAN。

目前主流的操作系統、瀏覽器、設計軟件大多在不同程度上支持可變字體。設計界最為熟知的圖像編輯軟件,Photoshop CC 2018、Illustrator CC 2018也已支持該技術,設計師可以使用這兩款設計軟件調用預覽使用可變字體。

可變字體的優勢

前所未有的自由度


方正蘭亭黑系列字體是方正公司最豐富的家族字體,支持10個字重,額外提供扁字和長字,換言之,方正蘭亭黑在字重維度提供10種變化,在字寬維度提供2種變化,在字高維度提供2種變化,共計14種變化。設計師马其他幸运飞艇在使用蘭亭黑系列字體時,仍然存在現有字重滿足不了排版層級需求的情況,選擇這一檔筆畫太細,下一檔灰度又太重。

▲ 方正蘭亭黑家族字體,支持10個字重維度、2個字寬維度、2個字高維度的變化

而可變字體的存在,則能很好地解決這個問題。可變字體包含單軸或者多軸設計空間,通過調整可用軸來控制文本精確的字重、字寬、字高、中宮等,實現字形的平滑連續的細微調整。設計師马其他幸运飞艇能夠輕易獲取滿足不同版式設計需求的定制字形。

▲ 可變字體的多軸無極變化使得字體具有更自由的變化空間

马其他幸运飞艇YIFANGZHENGYOUHEISANZHOUKEBIANZITIZAIIllustrator CC 2018 ZHONGDECAOZUOWEILI,ZAIZITIKULIEBIAOZHONGZHAODAOFANGZHENGYOUHEIKEBIANZITI,DANGWOMENTONGGUO“CHUANGKOU-WENZI-ZIFU”DECAOZUODAKAIZIFUMIANBANSHI,HUIFAXIANZAIZIFUYANGSHIDEYOUCEDUOLEBIANLIANGZITIANNIU,CIANNIUXIATIGONGLEKEBIANZITIDEBIANLIANGYIDONGHUAKUAI。QIZHONG,FANGZHENGYOUHEIKEBIANZITIJUYOUZIZHONGZHOU、ZIKUANZHOUHEZIGAOZHOUSANZHOUDEBIANHUA,QIDUIYINGDEDIAOJIEHUAKUAIWEIWeight、Width、Height。HUADONGZHEXIEDIAOJIEHUAKUAI,JIUKEYISHIXIANDANGEZITIZAIBUTONGWEIDUSHANGDEBIANHUA,ERZHEXIESHIPUTONGBIAOZHUNZIKUBUJUBEIDETESHUSHUXING。

▲ 方正悠黑三軸可變字體在設計軟件Illustrator CC 2018 中的變量操作界面,用戶點擊變量字體按鈕,可以看到方正悠黑可變字體擁有的字重軸、字寬軸和字高軸三個可變軸,通過調整滑塊來獲取滿足需求的字體樣式


小體積大能量

DUIYUCHANGGUIBIAOZHUNZIKULAIJIANG,MUQIANJIAOLIUXINGDEJIAZUXILIEZITIZIZHONGZUHEFANGSHISHIThin、Light、Regular、SemiBold、Bold、Heavy,GONG6GEZIZHONG,YI6GEDULIZIKUDEXINGSHICUNZAI,MEIGEWENJIANANZHAOGB18030-2000BIAOZHUNZUZHIZITI,ZITIWENJIANDAXIAOZAI8MBYISHANG,6GEZITIWENJIANDAXIAOJIEJIN50MB。

RANER,YIKUANZHICHIZIZHONGZHOUBIANHUADEKEBIANZITIJINYIGEZITIWENJIANJIUNENGGOUTIGONG800GEZIZHONG,FUHEGB18030-2000BIANMABIAOZHUN,WENJIANDAXIAOWEI20MBZUOYOU。ZAIGENGXIAODEKONGJIANNEISHIXIANLEGENGDADEBIANHUA。

▲ 可變字體不僅擁有遠超過常規家族字體的變化空間,其文件大小還遠遠小于家族字體的文件大小



可變字體的應用

Webfont+可變字體

马其他幸运飞艇WebfontJISHUJUYOUZHUDUOYOUSHI:TAKEYIJIANGGAOZHILIANGZITIYINGYONGZAIWANGYESHANG,TIGONGJIZHIDEYUEDUTIYAN;WANGYESHANGDEWENBENYIYUXIUGAI、BIANJI;ZHICHICHAZHAO、XUANZHONG、FUZHIDENGGONGNENG,ZHICHIGONGJUFANYI;TUPOZITIXUZHUANHUAWEITUPIANDEXIANZHI,JIANGWENBENXINXICONGTUPIANHUANYUANCHENGZITI,DUISOUSUOYINQINGGENGWEIYOUHAO,NENGGOUTISHENGGUANJIANZISOUSUOPAIMINGDENG。

▲ 《紐約時報》(The New York Times)英文官方網站將多個家族字體以Webfont 的形式嵌入網站,其中New York Times Cheltenham 家族字體主要用于標題內容顯示,New York Times Franklin 家族字體則用于注釋、菜單標簽等位置,在滿足排版面邏輯層級關系的同時,使不同題材文章具有不同的風格和效果

▲ 作為英國三大報之一的《衛報》(The Guardian),其網站使用了龐大的家族字體Guardian,這一家族字體是由多款名副其實的定制字體組成,其中正文字體的設計力求在不減少字數的前提下,在每一頁制造更多的空白以帶來更容易舒適的閱讀

RUGUOJIANGWebfont JISHUDAZAIKEBIANZITIYOUJIANGDAILAIZENYANGDEJINGXINI?SHOUXIAN,KEBIANZITIDEWUJIBIANHUANENGGOUWEIDUOCENGJIXINXIDEPAIBANTIGONGBUTONGFENGGEHEXIAOGUODEZITIYANGSHI,KEBIANZITIJIANGWEIYEMIANDAILAIGENGWEIZIYOUDESHEJIKONGJIAN,DUZHETONGSHIKEYITIYANGENGWEILIUCHANGDEYUEDUHUANJING;QICI,YINWEIKEBIANZITIDEWENJIANDAXIAOXIANGJIAOYUJIAZUZITIYOUMINGXIANDEYASUO,GENGXIAODEZITIWENJIANDAXIAOYIWEIZHUGENGSHAODEFUWUQIXIANGYINGCISHU、GENGDIDEDAIKUANYAOQIU,YEMIANDEJIAZAISHIJIANJIANGMINGXIANSUODUAN。

▲ Webfont 搭載可變字體的應用演示頁面,當激活web中嵌入的可變字體時,網頁會根據信息層級和排版效果自動調整字體樣式,使其更符合用戶的瀏覽習慣,本頁面由 OLIVER SCHONDORFER 開發制作


網頁適配

不同的顯示設備具有不同的橫豎屏比例、屏幕分辨率,同時匹配不同的觀看距離。我們無法預測用戶會在多大設備、什么分辨率下打開網頁,頁面適配成為網頁設計師、前端開發工程師亟需解決的問題,因此,能夠自動響應用戶設備環境的響應式網頁設計成為潮流。可變字體的應用,恰好能夠為響應式網頁在字形層面的改變帶來便利,利用視覺縮放增強不同屏幕尺寸下的顯示輸出。

▲ 搭載可變字體的響應式網頁設計,隨著文字區域變化,單個字符的字號、字重、字寬以及字符間距均有了相應調整

閱讀模式

马其他幸运飞艇SUIZHUDUIYONGHUTIYANDEZHONGSHI,XITONGYUEDUMOSHIDEGEXINGHUATANSUODEDAOYUELAIYUEDUODEGUANZHU。PINGUOGONGSIZAImacOS Mojave YIJIZUIXINDEiOS 13XITONGZHONGYINRULESHENSEMOSHI,SHENSEMOSHISHIYONGLEYIZHONGJIAOSHENDEPEISEFANGAN,PINGUOYONGHUZAIXITONGPIANHAOSHEZHIZHONGXUANZECIMOSHIHOU,ZHENGGEXITONG,BAOKUOMacSUIFUDEYINGYONG,YIJIDISANFANGYINGYONGDEWAIGUANDOUJIANGQUANJUXINGQIEHUANWEISHENSEBEIJING,BANGZHUYONGHUZAIXITONGSHANGZHUANZHUKAIZHANGONGZUO。

▲  macOS Mojave 系統內置了深色模式,用戶可以根據使用習慣進行深淺模式切換

TONGSHI,YUELAIYUEDUODEYIDONGSHEBEIDAZAILEGUANGXIANGANYINGQI,LAIGANYINGWAIJIEGUANGXIANDEBIANHUA,CONGERFANKUIGEISHEBEI,SHIQINENGGOUGENJUGUANGXIANDEMINGANZIDONGDIAOZHENGPINGMULIANGDUHEDUIBIDU,TISHENGYONGHUDEYUEDUTIYAN。

▲ 搭載了光線感應器的移動設備,能根據光線的明暗自動調整屏幕亮度和對比度

RUGUOJIANGKEBIANZITIQIANRUXITONGZHONG,ZEKEYIZAIYISHANGLIANGZHONGQINGKUANGXIAZUOCHUSHIDANGXIANGYING,TONGGUOZIXINGDEXIWEIDIAOZHENG,LAITIGAOYEMIANWENBENDEYIDUXING。

方正字庫中文可變字體

YOUYUZHONGWENZITIHEXIWENZITICUNZAIJUDACHAYI,ZHONGWENZIKUDEZIFUJIJIAODA、ZIXINGFUZA,SHIXIANZITIWUJIKEBIANDENANDUGENGGAO。ZUOWEIZHONGWENZITISHEJILINGYUDELINGDAOZHE,FANGZHENGZIKUYIFENGFUDEZITISHEJIJINGYANWEIJICHU,TONGGUOJISHUGEXINSHOUDUANSHIXIANZHONGWENKEBIANZITISHEJIDETANSUO。

方正悠黑可變字體

马其他幸运飞艇2017NIAN11YUE,FANGZHENGZIKUFABULEQUANQIUSHOUKUANZHONGWENSANZHOUKEBIANZITI——《FANGZHENGYOUHEI》(DIANJILANZIYUEDU),ZHEKUANKEBIANZITISHIXIANLEZIZHONGZHOU(Weight)、ZIKUANZHOU(Width)HEZIGAOZHOU(Height)SANGEZHOUDEBIANHUA,WEILAIKAOLVZENGJIAQITAZHOU,RUZHONGXIN、ZHONGGONG、BIHUACUXIDUIBIDUDENG。

FANGZHENGYOUHEIKEBIANZITIZHONGMEIGEZHOUZHISHAOXUYAOLIANGDANGZIXINGSHUJU,TIGONGZITISHEJIDEBUTONGJIDUANZHIJIANDETEDINGBIANHUA;TONGSHIHUANYUNXUZAIMEIGEZHOUSHANGTIANJIAZHONGJIANDANGSHUJU,ZENGJIADUIYUZHENGGEZIXINGJIHUODANGEZIXINGDEZHONGJIANSHEJIDEKENENGXING,YIBIANZAISHEJIKONGJIANBIANHUASHIDUIZITISHIPEIXINGBIANHUATIGONGGENGJINGXIDEKONGZHI。


方正悠宋可變字體

SUIZHUYIDONGSHEBEIDEGUANGFANSHIYONG,FANGZHENGZIKUYU2018NIANCHUFABULEQUANQIUDIYIKUANPINGXIANSONGTI——《FANGZHENGYOUSONG》。ZUOWEIYIKUANYUNYONGZUIXINJISHUSHOUDUANDESHUZIZITI,FANGZHENGYOUSONGYESHIYIKUANJUBEIZITIWUJIBIANHUATEXINGDEKEBIANZITI。

方正悠宋可變字體支持字重和中宮維度的變化,設計師可以在字體粗細和字面寬度兩個方面對字體進行細微的調整。字重與中宮的無級可變特性令方正悠宋可以滿足不同媒介情景的視覺需求,增加了悠宋的視覺識別與信息層級的可塑性層級。方正字庫在將宋體字變黑體字上的嘗試,也為中文可變字體的變化維度創造出新的可能。

▲  方正悠宋可變字體已在實際字體產品中實現字重維度的變化


▲ 方正悠宋的中宮可變,以及由方正悠宋變為方正悠黑的實驗性嘗試,開拓了中文可變字體新的變化維度


結 語

隨著技術的改革創新,字體設計進入了一個可以無限制變化的開放新紀元。可變字體的出現,使得在預定范圍內對字體進行任意放大、縮小、加粗、變細、拉伸或者彎曲等操作成為可能,設計師可以將一款字體調整成自己想要的比例、尺寸。

字體形態改變是細微的,而這種細微的變化往往能在潛移默化中體現出非同一般的品質。通過可變字體技術與不同場景的結合,能夠將無極變化的可能性發揮到極致,幫助用戶選擇最符合需求的字體組合方式,從而創造出完美的用戶體驗。最終,無論是用戶、設計師還是字體廠商,都將從這項技術的廣泛應用中受益。


原創:方正字庫 

文章來源: 最設計微信公眾號

本文來源:最設計微信公眾號

上一篇:返回列表
作者:方正
相關閱讀
    正在加載...