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

2022-12-02 15:04:28.0

分類: 字体产品与应用

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曼蒂手书体
字体应用及用途:书刊标题、影片/电影标题、食品包装、生活感的广告标语、电子书信书写等。


Products and Applications

文鼎DC云康行楷

由施隆民教授書寫的文鼎DC云康行楷,字型書寫旨在掌握書法的美感,筆法上以流暢、生動為原則;結構上為了排版印刷的美觀,盡量保持「端莊」的體態。云康行楷在設計時,加入中文排版裡「疊字」效果的巧思,施隆民教授在書寫時,特意創作「相同字的不同寫法」,以展現書法中「不雷同」「不重複」的美感,讓云康行楷更能呈現書法藝術的精神。此外,云康行楷提供了兩種不同書法風格作選擇,其中云康行楷碑帖版,藉由部首共用、改變寫法、增減筆畫等多方式,保留傳統書法運筆藝術之美。

 

本影片透過Adobe Illustrator來呈現云康行楷TrueType(TTF)與OpenType(OTF)兩個字型格式的使用方式,分別示範疊字的選用,以及中文常用全型符號調和設計(Proportional)。

應用設計

Products and Applications

好看的中文字體哪裡找? Fonts Fun–字字不倦 App

讓你的 IG 限時動態與眾不同!!!Fonts Fun App 有60種精選的中文字體,可以讓你在社群軟體、筆記、或是簡報製作上都有更多元的字型盡情的創作!

 

Link: 

https://agirls.aotter.net/post/59343

 

Products and Applications

如何將可變式字體使用於網頁上

時間在2016 年底,Microsoft、Apple、Adobe、Google聯合發佈了OpenType 1.8 可變式字體Variable Font。

 

一個可變式字體檔案可以包含傳統靜態字體家族中的每一個字體。如果使用者端在字體有使用到兩個字重以上的情境,基於可變式字體技術的特性,字體的檔案資料量是可變式字體的一個優勢,我們以文鼎UD晶熙黑體G30字體為例,如果設計案件需要使用5個字重、4個字寬這樣龐大的字體家族,那麼總共20個字體檔案約有160MB,但若採用可變式字體,則僅需20MB,足足減少了87.5%的檔案資料量。

更好的是,設計師和工程師還可以幾乎不受限制的使用可變式字體中的變化。例如字重與字寬的變化,使用者可以在Medium、Heavy或與長體Condensed間透過變數軸或參數的調整自由穿插的使用字體。隨著可變式字體的推出與應用軟體的支援,我們可以預測到可變式字體使用上的好處:為網頁/UI工程師在多字重字體資料量提供更好的壓縮,為設計師在作品上提供更細膩的呈現,以及為讀者提供更精緻的閱讀體驗。

 

可變式字體在2016/11月發佈後,最早支援可變式字體的主要設計軟體是 Adobe Photoshop、Illustrator 和 InDesign。如今,這些軟體內建了多款英文可變式字體,因此,現在數百萬使用 Creative Cloud 的設計師都可以體驗到可變式字體這種新的排版潛力。

 

使用情境如果移轉到Web呢?我們先來體驗一下吧!將滑鼠經過下方文字,看看會有怎樣的效果~

 

這個效果都是可變式字體透過CSS的設定所設計出來的互動呈現,我們分解成5個步驟:

1. 設定Web Font

於網頁內嵌入Web Font JS

 

2. 準備好小篇幅文章,設定於網頁內

例如文字為『文鼎晶熙黑』,將文字用<span>分別組合起來並放入網頁內<span>今</span> <span>晚</span> <span>我</span> <span>想</span> <span>來</span><span>點</span>

 

3. 設定字型名稱\

span {

    font-family:'文鼎VF甜妞體_Wr';

}

 

4. 設定動畫呈現

預設文字字重為 300

span {

    font-variation-settings: 'wght' 300;

}

 

當滑鼠移到文字上時,將字重設定為 600

span:hover {

    font-variation-settings: 'wght' 600;

}

 

5. 加入一些進場、退場效果

設定3秒回到原始字重300

span {

    font-variation-settings: 'wght' 300;

    transition: 3s;

}

 

設定0.1秒字重設定到600

span:hover {

    font-variation-settings: 'wght' 600;

    transition: .1s;

}

 

透過以上五個步驟及CSS的設計,就可在網頁上以文字輕鬆、快速的呈現出動態效果來。在現在的桌機和移動設備上主要的瀏覽器大都已支援可變式字體的顯示,支援的瀏覽器版本整理如下表,因此,我們可以期待,透過更多可變式字體產品的推出,網頁的面貌將在互動設計師與網頁工程師攜手下,帶來許多的視覺觀感體驗。

 

Web browsers

   

Chrome

62+

Safari

11+ (requires macOS 10.13+)

iOS Safari

11+

Firefox

62+ (requires macOS 10.13+)

Edge

17+

Opera

49+

Samsung Internet

8.2+

 

如果對於可變字體在網頁CSS動態效果的設定有興趣的話,下方網址有更多中文可變式字體套用Web CSS設定的使用範例。

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

 

文鼎網頁字型方案

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