2019年9月24日下午,小米公司在北京召開了“小米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)不僅帶來了全新的小米蘭亭Pro,還重磅推出了全球首家動(dòng)態(tài)字體系統(tǒng),希望為用戶提供極致的閱讀體驗(yàn)。
在MIUI 11系統(tǒng)中,用戶可以通過“設(shè)置-顯示-字體大小與粗細(xì)”的操作進(jìn)入字體模塊,拖動(dòng)相應(yīng)滑塊即可改變手機(jī)界面用字的字體大小和字重粗細(xì)。MIUI動(dòng)態(tài)字體支持文字粗細(xì)無級(jí)調(diào)節(jié),每個(gè)人都可找到適合自己的字重。
智能加粗還會(huì)根據(jù)內(nèi)容層級(jí)和重要性予以文字不同程度加粗,使閱讀體驗(yàn)更為極致。
搭載了動(dòng)態(tài)字體系統(tǒng)的MIUI 11,在交互細(xì)節(jié)上也做了大量優(yōu)化和提升。
在系統(tǒng)字體越來越受手機(jī)廠商重視的當(dāng)下,此次小米推出的MIUI動(dòng)態(tài)字體系統(tǒng)無疑是業(yè)界的一次重大突破,也是手機(jī)系統(tǒng)搭載可變字體的一次有益嘗試。據(jù)了解,MIUI動(dòng)態(tài)字體系統(tǒng)獲得了2019紅點(diǎn)獎(jiǎng)。
*以上視頻及圖片素材來自小米官方發(fā)布,版權(quán)歸原作者所有
關(guān)于可變字體,不少設(shè)計(jì)師朋友都有所耳聞,但在中文領(lǐng)域的實(shí)際應(yīng)用還很有限。MIUI的大膽嘗試,既體現(xiàn)了小米對(duì)用戶體驗(yàn)的高度重視,也是有前瞻性、探索精神的體現(xiàn)。接下來本文將與大家一起詳細(xì)探討“可變字體”。
▼
什么是可變字體?
可變字體(Variable Fonts)技術(shù)源于Adobe、Apple、Google、Microsoft四巨頭于2016年發(fā)布的OpenType v1.8字體格式規(guī)范。該規(guī)范的發(fā)布將允許單個(gè)字體文件同時(shí)支持多個(gè)字體形態(tài),它可以將幾個(gè)字體緊湊地封裝在單個(gè)字體文件中,通過定義字體內(nè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)勢
前所未有的自由度
方正蘭亭黑系列字體是方正公司最豐富的家族字體,支持10個(gè)字重,額外提供扁字和長字,換言之,方正蘭亭黑在字重維度提供10種變化,在字寬維度提供2種變化,在字高維度提供2種變化,共計(jì)14種變化。設(shè)計(jì)師在使用蘭亭黑系列字體時(shí),仍然存在現(xiàn)有字重滿足不了排版層級(jí)需求的情況,選擇這一檔筆畫太細(xì),下一檔灰度又太重。
▲方正蘭亭黑家族字體,支持10個(gè)字重維度、2個(gè)字寬維度、2個(gè)字高維度的變化
而可變字體的存在,則能很好地解決這個(gè)問題??勺冏煮w包含單軸或者多軸設(shè)計(jì)空間,通過調(diào)整可用軸來控制文本精確的字重、字寬、字高、中宮等,實(shí)現(xiàn)字形的平滑連續(xù)的細(xì)微調(diào)整。設(shè)計(jì)師能夠輕易獲取滿足不同版式設(shè)計(jì)需求的定制字形。
▲可變字體的多軸無極變化使得字體具有更自由的變化空間
以方正悠黑三軸可變字體在Illustrator CC 2018中的操作為例,在字體庫列表中找到方正悠黑可變字體,當(dāng)我們通過“窗口-文字-字符”的操作打開字符面板時(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)字庫不具備的特殊屬性。
▲方正悠黑三軸可變字體在設(shè)計(jì)軟件Illustrator CC 2018中的變量操作界面,用戶點(diǎn)擊變量字體按鈕,可以看到方正悠黑可變字體擁有的字重軸、字寬軸和字高軸三個(gè)可變軸,通過調(diào)整滑塊來獲取滿足需求的字體樣式
小體積大能量
對(duì)于常規(guī)標(biāo)準(zhǔn)字庫來講,目前較流行的家族系列字體字重組合方式是Thin、Light、Regular、SemiBold、Bold、Heavy,共6個(gè)字重,以6個(gè)獨(dú)立字庫的形式存在,每個(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ī)家族字體的變化空間,其文件大小還遠(yuǎn)遠(yuǎn)小于家族字體的文件大小
可變字體的應(yīng)用
Webfont+可變字體
Webfont技術(shù)具有諸多優(yōu)勢:它可以將高質(zhì)量字體應(yīng)用在網(wǎng)頁上,提供極致的閱讀體驗(yàn);網(wǎng)頁上的文本易于修改、編輯;支持查找、選中、復(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)簽等位置,在滿足排版面邏輯層級(jí)關(guān)系的同時(shí),使不同題材文章具有不同的風(fēng)格和效果
▲作為英國三大報(bào)之一的《衛(wèi)報(bào)》(The Guardian),其網(wǎng)站使用了龐大的家族字體Guardian,這一家族字體是由多款名副其實(shí)的定制字體組成,其中正文字體的設(shè)計(jì)力求在不減少字?jǐn)?shù)的前提下,在每一頁制造更多的空白以帶來更容易舒適的閱讀
如果將Webfont技術(shù)搭載可變字體又將帶來怎樣的驚喜呢?首先,可變字體的無極變化能夠?yàn)槎鄬蛹?jí)信息的排版提供不同風(fēng)格和效果的字體樣式,可變字體將為頁面帶來更為自由的設(shè)計(jì)空間,讀者同時(shí)可以體驗(yàn)更為流暢的閱讀環(huán)境;其次,因?yàn)榭勺冏煮w的文件大小相較于家族字體有明顯的壓縮,更小的字體文件大小意味著更少的服務(wù)器相應(yīng)次數(shù)、更低的帶寬要求,頁面的加載時(shí)間將明顯縮短。
▲Webfont搭載可變字體的應(yīng)用演示頁面,當(dāng)激活web中嵌入的可變字體時(shí),網(wǎng)頁會(huì)根據(jù)信息層級(jí)和排版效果自動(dòng)調(diào)整字體樣式,使其更符合用戶的瀏覽習(xí)慣,本頁面由OLIVER SCH?NDORFER開發(fā)制作
網(wǎng)頁適配
不同的顯示設(shè)備具有不同的橫豎屏比例、屏幕分辨率,同時(shí)匹配不同的觀看距離。我們無法預(yù)測用戶會(huì)在多大設(shè)備、什么分辨率下打開網(wǎng)頁,頁面適配成為網(wǎng)頁設(shè)計(jì)師、前端開發(fā)工程師亟需解決的問題,因此,能夠自動(dòng)響應(yīng)用戶設(shè)備環(huán)境的響應(yīng)式網(wǎng)頁設(shè)計(jì)成為潮流??勺冏煮w的應(yīng)用,恰好能夠?yàn)轫憫?yīng)式網(wǎng)頁在字形層面的改變帶來便利,利用視覺縮放增強(qiáng)不同屏幕尺寸下的顯示輸出。
▲搭載可變字體的響應(yīng)式網(wǎng)頁設(shè)計(jì),隨著文字區(qū)域變化,單個(gè)字符的字號(hào)、字重、字寬以及字符間距均有了相應(yīng)調(diào)整
閱讀模式
隨著對(duì)用戶體驗(yàn)的重視,系統(tǒng)閱讀模式的個(gè)性化探索得到越來越多的關(guān)注。蘋果公司在macOS Mojave以及最新的iOS 13系統(tǒng)中引入了深色模式,深色模式使用了一種較深的配色方案,蘋果用戶在系統(tǒng)偏好設(shè)置中選擇此模式后,整個(gè)系統(tǒng),包括Mac隨附的應(yīng)用,以及第三方應(yīng)用的外觀都將全局性切換為深色背景,幫助用戶在系統(tǒng)上專注開展工作。
▲macOS Mojave系統(tǒng)內(nèi)置了深色模式,用戶可以根據(jù)使用習(xí)慣進(jìn)行深淺模式切換
同時(shí),越來越多的移動(dòng)設(shè)備搭載了光線感應(yīng)器,來感應(yīng)外界光線的變化,從而反饋給設(shè)備,使其能夠根據(jù)光線的明暗自動(dòng)調(diào)整屏幕亮度和對(duì)比度,提升用戶的閱讀體驗(yàn)。
▲搭載了光線感應(yīng)器的移動(dòng)設(shè)備,能根據(jù)光線的明暗自動(dòng)調(diào)整屏幕亮度和對(duì)比度
如果將可變字體嵌入系統(tǒng)中,則可以在以上兩種情況下做出適當(dāng)響應(yīng),通過字形的細(xì)微調(diào)整,來提高頁面文本的易讀性。
方正字庫中文可變字體
由于中文字體和西文字體存在巨大差異,中文字庫的字符集較大、字形復(fù)雜,實(shí)現(xiàn)字體無極可變的難度更高。作為中文字體設(shè)計(jì)領(lǐng)域的領(lǐng)導(dǎo)者,方正字庫以豐富的字體設(shè)計(jì)經(jīng)驗(yàn)為基礎(chǔ),通過技術(shù)革新手段實(shí)現(xiàn)中文可變字體設(shè)計(jì)的探索。
方正悠黑可變字體
2017年11月,方正字庫發(fā)布了全球首款中文三軸可變字體——《方正悠黑》(點(diǎn)擊藍(lán)字閱讀),這款可變字體實(shí)現(xiàn)了字重軸(Weight)、字寬軸(Width)和字高軸(Height)三個(gè)軸的變化,未來考慮增加其它軸,如重心、中宮、筆畫粗細(xì)對(duì)比度等。
方正悠黑可變字體中每個(gè)軸至少需要兩檔字形數(shù)據(jù),提供字體設(shè)計(jì)的不同極端之間的特定變化;同時(shí)還允許在每個(gè)軸上添加中間檔數(shù)據(jù),增加對(duì)于整個(gè)字形集或單個(gè)字形的中間設(shè)計(jì)的可能性,以便在設(shè)計(jì)空間變化時(shí)對(duì)字體適配性變化提供更精細(xì)的控制。
方正悠宋可變字體
隨著移動(dòng)設(shè)備的廣泛使用,方正字庫于2018年初發(fā)布了全球第一款屏顯宋體——《方正悠宋》)。作為一款運(yùn)用最新技術(shù)手段的數(shù)字字體,方正悠宋也是一款具備字體無極變化特性的可變字體。
方正悠宋可變字體支持字重和中宮維度的變化,設(shè)計(jì)師可以在字體粗細(xì)和字面寬度兩個(gè)方面對(duì)字體進(jìn)行細(xì)微的調(diào)整。字重與中宮的無級(jí)可變特性令方正悠宋可以滿足不同媒介情景的視覺需求,增加了悠宋的視覺識(shí)別與信息層級(jí)的可塑性層級(jí)。方正字庫在將宋體字變黑體字上的嘗試,也為中文可變字體的變化維度創(chuàng)造出新的可能。
▲方正悠宋可變字體已在實(shí)際字體產(chǎn)品中實(shí)現(xiàn)字重維度的變化
▲方正悠宋的中宮可變,以及由方正悠宋變?yōu)榉秸坪诘膶?shí)驗(yàn)性嘗試,開拓了中文可變字體新的變化維度
結(jié)語
隨著技術(shù)的改革創(chuàng)新,字體設(shè)計(jì)進(jìn)入了一個(gè)可以無限制變化的開放新紀(jì)元??勺冏煮w的出現(xiàn),使得在預(yù)定范圍內(nèi)對(duì)字體進(jìn)行任意放大、縮小、加粗、變細(xì)、拉伸或者彎曲等操作成為可能,設(shè)計(jì)師可以將一款字體調(diào)整成自己想要的比例、尺寸。
字體形態(tài)改變是細(xì)微的,而這種細(xì)微的變化往往能在潛移默化中體現(xiàn)出非同一般的品質(zhì)。通過可變字體技術(shù)與不同場景的結(jié)合,能夠?qū)o極變化的可能性發(fā)揮到極致,幫助用戶選擇最符合需求的字體組合方式,從而創(chuàng)造出完美的用戶體驗(yàn)。最終,無論是用戶、設(shè)計(jì)師還是字體廠商,都將從這項(xiàng)技術(shù)的廣泛應(yīng)用中受益。