2019年9月24日下午，小米公司在北京召開(kāi)了“小米5G新品發(fā)布會(huì)”，推出了包括小米9 Pro、小米MIX Alpha在內(nèi)的一系列新品，全新的MIUI 11系統(tǒng)也在發(fā)布會(huì)上正式亮相。MIUI 11系統(tǒng)以“聲色雙全、效率革新”為宗旨，圍繞 “設(shè)計(jì)”、“辦公”、“出行”等多方面進(jìn)行全面升級(jí)。

作為中文系統(tǒng)字體定制的先驅(qū)，此次MIUI 11系統(tǒng)不僅帶來(lái)了全新的小米蘭亭Pro，還重磅推出了全球首家動(dòng)態(tài)字體系統(tǒng)，希望為用戶(hù)提供極致的閱讀體驗(yàn)。

在MIUI 11系統(tǒng)中，用戶(hù)可以通過(guò)“設(shè)置-顯示-字體大小與粗細(xì)”的操作進(jìn)入字體模塊，拖動(dòng)相應(yīng)滑塊即可改變手機(jī)界面用字的字體大小和字重粗細(xì)。MIUI動(dòng)態(tài)字體支持文字粗細(xì)無(wú)級(jí)調(diào)節(jié)，每個(gè)人都可找到適合自己的字重。

智能加粗還會(huì)根據(jù)內(nèi)容層級(jí)和重要性予以文字不同程度加粗，使閱讀體驗(yàn)更為極致。

搭載了動(dòng)態(tài)字體系統(tǒng)的MIUI 11，在交互細(xì)節(jié)上也做了大量?jī)?yōu)化和提升。

在系統(tǒng)字體越來(lái)越受手機(jī)廠商重視的當(dāng)下，此次小米推出的MIUI 動(dòng)態(tài)字體系統(tǒng)無(wú)疑是業(yè)界的一次重大突破，也是手機(jī)系統(tǒng)搭載可變字體的一次有益嘗試。據(jù)了解，MIUI 動(dòng)態(tài)字體系統(tǒng)獲得了2019紅點(diǎn)獎(jiǎng)。

*以上視頻及圖片來(lái)自小米官方，版權(quán)歸原作者所有

關(guān)于可變字體，不少設(shè)計(jì)師朋友都有所耳聞，但在中文領(lǐng)域的實(shí)際應(yīng)用還很有限。MIUI的大膽嘗試，既體現(xiàn)了小米對(duì)用戶(hù)體驗(yàn)的高度重視，也是有前瞻性、探索精神的體現(xiàn)。接下來(lái)本文將與大家一起詳細(xì)探討“可變字體”。

▼

什么是可變字體？

可變字體（Variable Fonts）技術(shù)源于Adobe、Apple、Google、Microsoft四巨頭于2016年發(fā)布的OpenType v1.8 字體格式規(guī)范。該規(guī)范的發(fā)布將允許單個(gè)字體文件同時(shí)支持多個(gè)字體形態(tài)，它可以將幾個(gè)字體緊湊地封裝在單個(gè)字體文件中，通過(guò)定義字體內(nèi)的變化來(lái)實(shí)現(xiàn)單軸或者多軸設(shè)計(jì)空間。

目前主流的操作系統(tǒng)、瀏覽器、設(shè)計(jì)軟件大多在不同程度上支持可變字體。設(shè)計(jì)界最為熟知的圖像編輯軟件，Photoshop CC 2018、Illustrator CC 2018也已支持該技術(shù)，設(shè)計(jì)師可以使用這兩款設(shè)計(jì)軟件調(diào)用預(yù)覽使用可變字體。

‍‍可變字體的優(yōu)勢(shì)

‍前所未有的自由度

‍‍

方正蘭亭黑系列字體是方正公司最豐富的家族字體，支持10個(gè)字重，額外提供扁字和長(zhǎng)字，換言之，方正蘭亭黑在字重維度提供10種變化，在字寬維度提供2種變化，在字高維度提供2種變化，共計(jì)14種變化。設(shè)計(jì)師在使用蘭亭黑系列字體時(shí)，仍然存在現(xiàn)有字重滿(mǎn)足不了排版層級(jí)需求的情況，選擇這一檔筆畫(huà)太細(xì)，下一檔灰度又太重。

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

而可變字體的存在，則能很好地解決這個(gè)問(wèn)題�？勺冏煮w包含單軸或者多軸設(shè)計(jì)空間，通過(guò)調(diào)整可用軸來(lái)控制文本精確的字重、字寬、字高、中宮等，實(shí)現(xiàn)字形的平滑連續(xù)的細(xì)微調(diào)整。設(shè)計(jì)師能夠輕易獲取滿(mǎn)足不同版式設(shè)計(jì)需求的定制字形。

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

以方正悠黑三軸可變字體在Illustrator CC 2018 中的操作為例，在字體庫(kù)列表中找到方正悠黑可變字體，當(dāng)我們通過(guò)“窗口-文字-字符”的操作打開(kāi)字符面板時(shí)，會(huì)發(fā)現(xiàn)在字符樣式的右側(cè)多了變量字體按鈕，此按鈕下提供了可變字體的變量移動(dòng)滑塊。其中，方正悠黑可變字體具有字重軸、字寬軸和字高軸三軸的變化，其對(duì)應(yīng)的調(diào)節(jié)滑塊為Weight、Width、Height。滑動(dòng)這些調(diào)節(jié)滑塊，就可以實(shí)現(xiàn)單個(gè)字體在不同維度上的變化，而這些是普通標(biāo)準(zhǔn)字庫(kù)不具備的特殊屬性。

▲ 方正悠黑三軸可變字體在設(shè)計(jì)軟件Illustrator CC 2018 中的變量操作界面，用戶(hù)點(diǎn)擊變量字體按鈕，可以看到方正悠黑可變字體擁有的字重軸、字寬軸和字高軸三個(gè)可變軸，通過(guò)調(diào)整滑塊來(lái)獲取滿(mǎn)足需求的字體樣式

小體積大能量

對(duì)于常規(guī)標(biāo)準(zhǔn)字庫(kù)來(lái)講，目前較流行的家族系列字體字重組合方式是Thin、Light、Regular、SemiBold、Bold、Heavy，共6個(gè)字重，以6個(gè)獨(dú)立字庫(kù)的形式存在，每個(gè)文件按照GB18030-2000標(biāo)準(zhǔn)組織字體，字體文件大小在8MB以上，6個(gè)字體文件大小接近50MB。

然而，一款支持字重軸變化的可變字體僅一個(gè)字體文件就能夠提供800個(gè)字重，符合GB18030-2000編碼標(biāo)準(zhǔn)，文件大小為20MB左右。在更小的空間內(nèi)實(shí)現(xiàn)了更大的變化。

▲ 可變字體不僅擁有遠(yuǎn)超過(guò)常規(guī)家族字體的變化空間，其文件大小還遠(yuǎn)遠(yuǎn)小于家族字體的文件大小

可變字體的應(yīng)用

Webfont+可變字體

Webfont技術(shù)具有諸多優(yōu)勢(shì)：它可以將高質(zhì)量字體應(yīng)用在網(wǎng)頁(yè)上，提供極致的閱讀體驗(yàn)；網(wǎng)頁(yè)上的文本易于修改、編輯；支持查找、選中、復(fù)制等功能，支持工具翻譯；突破字體需轉(zhuǎn)化為圖片的限制，將文本信息從圖片還原成字體，對(duì)搜索引擎更為友好，能夠提升關(guān)鍵字搜索排名等。

▲ 《紐約時(shí)報(bào)》（The New York Times）英文官方網(wǎng)站將多個(gè)家族字體以Webfont 的形式嵌入網(wǎng)站，其中New York Times Cheltenham 家族字體主要用于標(biāo)題內(nèi)容顯示，New York Times Franklin 家族字體則用于注釋、菜單標(biāo)簽等位置，在滿(mǎn)足排版面邏輯層級(jí)關(guān)系的同時(shí)，使不同題材文章具有不同的風(fēng)格和效果

▲ 作為英國(guó)三大報(bào)之一的《衛(wèi)報(bào)》（The Guardian），其網(wǎng)站使用了龐大的家族字體Guardian，這一家族字體是由多款名副其實(shí)的定制字體組成，其中正文字體的設(shè)計(jì)力求在不減少字?jǐn)?shù)的前提下，在每一頁(yè)制造更多的空白以帶來(lái)更容易舒適的閱讀

如果將Webfont 技術(shù)搭載可變字體又將帶來(lái)怎樣的驚喜呢？首先，可變字體的無(wú)極變化能夠?yàn)槎鄬蛹?jí)信息的排版提供不同風(fēng)格和效果的字體樣式，可變字體將為頁(yè)面帶來(lái)更為自由的設(shè)計(jì)空間，讀者同時(shí)可以體驗(yàn)更為流暢的閱讀環(huán)境；其次，因?yàn)榭勺冏煮w的文件大小相較于家族字體有明顯的壓縮，更小的字體文件大小意味著更少的服務(wù)器相應(yīng)次數(shù)、更低的帶寬要求，頁(yè)面的加載時(shí)間將明顯縮短。

▲ Webfont 搭載可變字體的應(yīng)用演示頁(yè)面，當(dāng)激活web中嵌入的可變字體時(shí)，網(wǎng)頁(yè)會(huì)根據(jù)信息層級(jí)和排版效果自動(dòng)調(diào)整字體樣式，使其更符合用戶(hù)的瀏覽習(xí)慣，本頁(yè)面由 OLIVER SCHONDORFER 開(kāi)發(fā)制作

網(wǎng)頁(yè)適配

不同的顯示設(shè)備具有不同的橫豎屏比例、屏幕分辨率，同時(shí)匹配不同的觀看距離。我們無(wú)法預(yù)測(cè)用戶(hù)會(huì)在多大設(shè)備、什么分辨率下打開(kāi)網(wǎng)頁(yè)，頁(yè)面適配成為網(wǎng)頁(yè)設(shè)計(jì)師、前端開(kāi)發(fā)工程師亟需解決的問(wèn)題，因此，能夠自動(dòng)響應(yīng)用戶(hù)設(shè)備環(huán)境的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)成為潮流�？勺冏煮w的應(yīng)用，恰好能夠?yàn)轫憫?yīng)式網(wǎng)頁(yè)在字形層面的改變帶來(lái)便利，利用視覺(jué)縮放增強(qiáng)不同屏幕尺寸下的顯示輸出。

▲ 搭載可變字體的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，隨著文字區(qū)域變化，單個(gè)字符的字號(hào)、字重、字寬以及字符間距均有了相應(yīng)調(diào)整

閱讀模式

隨著對(duì)用戶(hù)體驗(yàn)的重視，系統(tǒng)閱讀模式的個(gè)性化探索得到越來(lái)越多的關(guān)注。蘋(píng)果公司在macOS Mojave 以及最新的iOS 13系統(tǒng)中引入了深色模式，深色模式使用了一種較深的配色方案，蘋(píng)果用戶(hù)在系統(tǒng)偏好設(shè)置中選擇此模式后，整個(gè)系統(tǒng)，包括Mac隨附的應(yīng)用，以及第三方應(yīng)用的外觀都將全局性切換為深色背景，幫助用戶(hù)在系統(tǒng)上專(zhuān)注開(kāi)展工作。

▲  macOS Mojave 系統(tǒng)內(nèi)置了深色模式，用戶(hù)可以根據(jù)使用習(xí)慣進(jìn)行深淺模式切換

同時(shí)，越來(lái)越多的移動(dòng)設(shè)備搭載了光線(xiàn)感應(yīng)器，來(lái)感應(yīng)外界光線(xiàn)的變化，從而反饋給設(shè)備，使其能夠根據(jù)光線(xiàn)的明暗自動(dòng)調(diào)整屏幕亮度和對(duì)比度，提升用戶(hù)的閱讀體驗(yàn)。

▲ 搭載了光線(xiàn)感應(yīng)器的移動(dòng)設(shè)備，能根據(jù)光線(xiàn)的明暗自動(dòng)調(diào)整屏幕亮度和對(duì)比度

如果將可變字體嵌入系統(tǒng)中，則可以在以上兩種情況下做出適當(dāng)響應(yīng)，通過(guò)字形的細(xì)微調(diào)整，來(lái)提高頁(yè)面文本的易讀性。

方正字庫(kù)中文可變字體

由于中文字體和西文字體存在巨大差異，中文字庫(kù)的字符集較大、字形復(fù)雜，實(shí)現(xiàn)字體無(wú)極可變的難度更高。作為中文字體設(shè)計(jì)領(lǐng)域的領(lǐng)導(dǎo)者，方正字庫(kù)以豐富的字體設(shè)計(jì)經(jīng)驗(yàn)為基礎(chǔ)，通過(guò)技術(shù)革新手段實(shí)現(xiàn)中文可變字體設(shè)計(jì)的探索。

方正悠黑可變字體

2017年11月，方正字庫(kù)發(fā)布了全球首款中文三軸可變字體——《方正悠黑》（點(diǎn)擊藍(lán)字閱讀），這款可變字體實(shí)現(xiàn)了字重軸（Weight）、字寬軸（Width）和字高軸（Height）三個(gè)軸的變化，未來(lái)考慮增加其它軸，如重心、中宮、筆畫(huà)粗細(xì)對(duì)比度等。

方正悠黑可變字體中每個(gè)軸至少需要兩檔字形數(shù)據(jù)，提供字體設(shè)計(jì)的不同極端之間的特定變化；同時(shí)還允許在每個(gè)軸上添加中間檔數(shù)據(jù)，增加對(duì)于整個(gè)字形集或單個(gè)字形的中間設(shè)計(jì)的可能性，以便在設(shè)計(jì)空間變化時(shí)對(duì)字體適配性變化提供更精細(xì)的控制。

方正悠宋可變字體

隨著移動(dòng)設(shè)備的廣泛使用，方正字庫(kù)于2018年初發(fā)布了全球第一款屏顯宋體——《方正悠宋》。作為一款運(yùn)用最新技術(shù)手段的數(shù)字字體，方正悠宋也是一款具備字體無(wú)極變化特性的可變字體。

方正悠宋可變字體支持字重和中宮維度的變化，設(shè)計(jì)師可以在字體粗細(xì)和字面寬度兩個(gè)方面對(duì)字體進(jìn)行細(xì)微的調(diào)整。字重與中宮的無(wú)級(jí)可變特性令方正悠宋可以滿(mǎn)足不同媒介情景的視覺(jué)需求，增加了悠宋的視覺(jué)識(shí)別與信息層級(jí)的可塑性層級(jí)。方正字庫(kù)在將宋體字變黑體字上的嘗試，也為中文可變字體的變化維度創(chuàng)造出新的可能。

▲  方正悠宋可變字體已在實(shí)際字體產(chǎn)品中實(shí)現(xiàn)字重維度的變化

▲ 方正悠宋的中宮可變，以及由方正悠宋變?yōu)榉秸�悠黑的�?shí)驗(yàn)性嘗試，開(kāi)拓了中文可變字體新的變化維度

結(jié) 語(yǔ)

隨著技術(shù)的改革創(chuàng)新，字體設(shè)計(jì)進(jìn)入了一個(gè)可以無(wú)限制變化的開(kāi)放新紀(jì)元�？勺冏煮w的出現(xiàn)，使得在預(yù)定范圍內(nèi)對(duì)字體進(jìn)行任意放大、縮小、加粗、變細(xì)、拉伸或者彎曲等操作成為可能，設(shè)計(jì)師可以將一款字體調(diào)整成自己想要的比例、尺寸。

字體形態(tài)改變是細(xì)微的，而這種細(xì)微的變化往往能在潛移默化中體現(xiàn)出非同一般的品質(zhì)。通過(guò)可變字體技術(shù)與不同場(chǎng)景的結(jié)合，能夠?qū)�無(wú)極變化的可能性發(fā)揮到極致，幫助用戶(hù)選擇最符合需求的字體組合方式，從而創(chuàng)造出完美的用戶(hù)體驗(yàn)。最終，無(wú)論是用戶(hù)、設(shè)計(jì)師還是字體廠商，都將從這項(xiàng)技術(shù)的廣泛應(yīng)用中受益。

原創(chuàng)：方正字庫(kù) 

文章來(lái)源： 最設(shè)計(jì)微信公眾號(hào)