
字體,是我們生活中最日常的存在,我們每天看到的各種文字信息,以各種字體形式呈現着。字體設計,正在成為越來越受關注的設計課題。
我們也邁出了自己的第一步:2020年,58UXD成立了FontWork創作組。2021年5月,推出了58同城首款中文設計字庫字體「微笑體」並且在全集團廣泛使用。之後,在設計總監何瀟的號召下,FontWork創作組迎來了新的課題:設計一款有個性的無襯線字體,一款更偏正文字體屬性的新字體。
就是在這樣的背景下,輕風體應運而生。這,是一款不一樣的黑體字。

當我們討論「黑體字」時,我們其實是在討論中文無襯線字體。黑體字,沒有襯線裝飾,字形端正,筆畫橫平豎直,筆跡全部一樣粗細。
這一次,要怎麼去設計一款不一樣的黑體字,怎麼定義「我們的字」?帶着這個疑問,我們開始嘗試尋找答案。
一款好的正文字體,要能夠快速認讀,最好能夠像一杯白開水一樣無色無味很自然。而我們所要尋找的答案一定不只是白開水。我們需要加一點點料,讓它有一些自己獨特的味道。既要有特點,也不能太誇張。所以這次只能在有限的範圍內進行設計。需要的是一種克制的設計,輕設計。
自然舒展。
首先,字型的基本比例設定為23:22橫向略寬的正文字體。字型方中略扁,字面飽滿,中宮開闊,布局勻稱。意在營造一種自然舒展的感覺。
連接之意。
生活中應用最廣泛的黑體字,現代簡約、勻稱百搭,而且非常適合屏幕顯示。而硬筆手寫字,是我們原本學習和工作中最常用的書寫形式,卻正在越來越多地被鍵盤敲出的黑體所替代。
手寫與黑體,是兩條不同的路徑,有沒有可能把這兩條路徑交叉?如果把硬筆手寫特點和現代的黑體連接融合,會是什麼效果?

回想學生時代的我最熟悉的事就是寫字。手裡捏着鋼筆,每天都要寫很多字。記筆記要奮筆疾書,寫得龍飛鳳舞,寫連筆字和疊字符號都是非常順手的。
於是我用連接筆畫的設計細節,融進橫平豎直的黑體字中,讓板板正正的黑體也多了一點靈動的感覺。比如竹字頭,從撇到橫用一筆貫通,撇到低處突然提筆向上然後平着橫畫出去。再翻回來把一個點橫臥在下面。上下翻飛的筆勢就像幾片竹葉隨風而動。這樣的設計還有很多處:「禾」字中從撇到橫的連接、「讓」字中從豎到橫的連接,「美」字中撇捺的連接,「裝」字中豎提筆畫的連接,等等。每個字因勢就形,都可以在筆畫中找到連接筆畫的結合點。也不強求一定要做連接筆畫設計,要自然才好。


連接,也是58同城的品牌基因。作為國民生活服務平台的58同城,最初就是通過信息發布來幫助用戶建立有效的「連接」而產生價值。同時,設計輕風體時,也思考了與58同城品牌logo字體的呼應。兩者設計了一致的寬高比例和結構特徵。
連接,是輕風體的設計切入點,是最核心的設計特徵。以筆畫的「連接」這一細節設計為黑體字注入了一些新鮮的感覺。


貫通之氣。
確立了「連接」概念之後,我嘗試把更多筆畫也關聯起來設計。比如倒八頭的波浪線連接,形斷意不斷;比如撇捺筆畫,直接使用跨過豎線的連筆;比如豎提筆畫,像是飛行器轉彎的飛行軌跡。圓潤的連接轉筆,加上波浪線的造型特徵,讓整體看上去好像有一股氣流貫穿在字裡行間。

剛柔並濟。
在平直的筆畫之間,做了很多曲線連接設計,讓原本橫平豎直的筆畫之間有了彎曲柔和的質感。筆畫的起筆收筆的切角,沒有刻意的統一處理為平切或者豎切,而是順應筆勢保持直角形態,自然舒展。而在轉角處,保留了小圓角,這種更加柔和的狀態,與連接筆畫的柔和曲線形成呼應。方頭而圓角,讓字型整體更加剛柔並濟和諧統一。
蘊古生新。
沿着書寫的思路,我注意到傳統書法中,有很多書寫細節是非常漂亮的。對比了書法字和一些繁體中文字體之後,我嘗試把這些帶着古韻的筆畫融入了輕風體。
比如繁體的絞絲旁,像是植物生長的葉序特徵。這個特點完全可以結合到簡體寫法中。比如,有些筆畫在書法中會斷開來寫,比如「的」字左邊「白」的一撇,就是分開來寫。還有,草字頭也延續傳統書法里斷開的寫法,源於篆書中的「艸」(cǎo),把「艹」字頭,寫作像兩個十字的「⺿」。還有「低」字的繁體寫法是會把最下面的「點」筆畫長長地橫臥在最低處。我們從書法和繁體中發現這些漂亮的細節,進行融合設計,讓輕風體蘊含些許的古韻。
對於看慣了日常字型的我們來說,這些傳統化設計細節會讓字型有種陌生感。本身筆畫的設計是傳統韻味的,但這層陌生感帶來的視覺感受卻是新鮮的。

也有一些,是我們在設計的時候,為了更好的識別度,優化布白空間,進行一些筆畫的減省設計。比如右上角的「點」筆畫,在狹窄空間時就做連筆設計。更簡潔幹練更容易識別。點的設計分很多情況,我們對他們也有進行分別歸類,總結設計規律。
中西相融。
在數字和英文與符號的設計中,我們也嘗試把連接這一設計特徵融入進去。讓數字和字母與中文設計更搭配相融。
目前輕風體英文字體、標點符號設計,共計完成122個。為了保證英文字體和中文字體的一致性,在結構比例、銳角處理、連筆特徵處理上,與中文保持一致。
可顯可藏。
輕風體在用作標題字的大字號情況時,能夠顯露更多的筆畫設計細節,把字體具有設計感的一面呈現出來,傳達出字體微表情。而在段落文本排版等小字號使用時,又能夠把細節基本藏住,呈現簡單易讀,自然流暢的正文字體特點。
















已實際應用輕風體的設計項目
58輕風體是由FontWork小組完成的第二套中文字庫產品。經過第一款字體「微笑體」的歷練之後,我們在之前的經驗基礎上,有了一些新的發展。
第一,達成共識,統一工具,多人共創。還是採用了設計師共創的方式,本次共有23位參與到輕風體的設計中。基本工作原則是:集中宣講,分頭設計,按期匯總,統一修改。
第二,首次使用Glyphs軟件直接進行字體設計。之前我們是用AI先把字型做出來,最後再統一錄入Glyphs。這次直接使用Glyphs開始製作,大家學會了一款可以快速上手的新軟件,更可以方便快捷地調用字符和部件。
第三,字型分類+使用智能部件。我們嘗試把偏旁做更系統的分類,使用常用偏旁智能部件來拼出漢字。這樣做既能提升效率,又可以最大限度地保持一致性。大家分頭做字卻可以調用同一個部件偏旁,就保持了同樣的設計特徵。我們共設計了592個智能部件。
第四,使用python編寫代碼,智能合併文件。嘗試利用Glyphs軟件的API,以代碼命令來實現20多份文件的合併。代碼合併僅需2秒,效率大大提升。但是過程中仍然有一些文件覆蓋問題尚未解決,希望在之後的工作中再慢慢學習和改進。
第七,發布準備。大家一起參與,創作設計海報,並且設計了一輯字體手冊,2個視頻導演組分別完成了一支設計視頻,和一支創作紀錄片。謝謝辛勤的手冊組和導演組的小夥伴們。
一路協同,共創。這的確是,我們的字——輕風體。
做字的過程是漫長而又辛苦的,但結成果的餘味或許可以久久回甘。
謝謝一路相伴的共創者們。
58輕風體™由用戶體驗設計中心的「FontWork創作組」共同創作完成。
出品人:何瀟
項目管理:王丹
輕風體主創設計師:徐勤棟
西文與符號設計:徐雅
字庫共創設計師:徐勤棟、徐雅、李源、姜楠、訾亞磊、楊哲、溫正遠、鄭婧欣、崔秉鑒、隋玉鵬、劉雅靜、趙德馨、李洋、馬亞薈、伍思晟、何瀟、黃珊、楊忠、王弼華、廉勇輝、王映照、李國輝
字庫統籌修改:徐勤棟、李源、楊哲、姜楠、訾亞磊
鳴謝:李生、張莉、黃珊、李岩、崔登學、連盟
【輕風體設計視頻】導演/分鏡/建模:溫正遠,動畫:隋玉鵬,腳本:溫正遠、徐勤棟
【輕風體創作紀錄片】導演/剪輯:伍思晟,攝影/剪輯:崔秉鑒,腳本:王曉彤、葛韻迪 動畫:賈付濤
【輕風體設計手冊】訾亞磊、王弼華、楊哲、劉雅靜、趙德馨、隋玉鵬、李源、伍思晟、鄭婧欣、崔秉鑒、徐勤棟
【輕風紀念T恤】姜楠、王映照、廉勇輝
【九九消寒圖】楊哲、王丹
【輕風表情包與海報】伍思晟
-----------
字體設計愛好者
掃碼進群

轉載時請連同下方內容一起轉發
請與該公眾號聯繫獲取內容授權
長按二維碼 輕鬆關注
微信公眾號:i58UXD

58同城用戶體驗設計中心