定距字型与应用

2021-04-19 18:22:43.0

分類: 字体产品与应用

定距字(monospace font)这是字型设计里重要的设计规格,与其相对的是调和字(proportional font)。定距字是指字符宽度相同的字型,亦称为等宽字、固定宽度字体,本文后续以定距字、定距字型称呼;汉字中的半角字也是定距字的一种,安排后章节做说明。

 

现在大家使用上习以为常的数字字体出现前的时代,字体的呈现是透过铅字排印的方式传达出来,而铅字大多以固定宽度的方式作设计,来符合当时打字机、排印技术上的限制。时代的脚步不断的前行,计算机硬件环境与排印软件对于运算字体的机制也不断的改善,使得排版、阅读感受上,呈现出比较自然的调和字使用变的普及。

 

我们以AR Silver Sans 这款字简单来说明定距设计(Monospace)与调和设计(Proportional)在字符呈现的差异。为了要符合每个字符宽度一致的设计规格,我们可以看到AR Silver Sans Monospace在「i」这个符号字符的空间结构上与AR Silver Sans Proportional有明显的不同,这样的设计主要是为了在空间布局上取得较佳的呈现,另外「m」这个符号字符也因为字符空间的不同,而呈现不同的视觉样貌。

在当代的字型使用趋势中,大多是以兼顾视觉与造型设计的调和字型使用的较多,但定距字的使用,并没有因调和字的大量运用而消失,而是以能清楚呈现信息讯息的功能性使用角度持续存在着,例如微软在2019年发布的开源字型Cascadia Code,就是一款具有固定字距(Monospaced)特性的字型,适合用于计算机系统与工程师程序开发等用途上,让工程师在进行字符阅读时,达到提升程序代码与接口文字可读性的效益。

工程师在进行程序设计时,使用固定字距的字型可增进开发效率。

 

最近,我们也看到一些公共建设,如新竹车站信息面版、桃园机场的班机信息显示面版当中的字体也都是选用了固定字距的字型。以新竹车站显示列车到站的时刻表为例,这是设计师 施博翰使用了定距字设计的AR Silver Sans Monospace,作为新竹车站时刻表的呈现,这定距字的使用,配合设计师排版的专业,增加了时刻表上数字讯息阅读的可读性。

设计师 施博翰在新竹车站列车时刻表的排版设计

 

 

桃园机场的班机信息显示面版以定距字做为讯息阅读的文字选择。

 

 

虽然定距字型出现的时间较调和字型早了很多,但在使用上并没有因为外在环境硬件的提升而消失,反而以在特定情境下具有高辨视度的功能性继续存在着,厂商们也持续设计新的定距字,也让用字多了许多的选择。

 

 

附注:新竹车站列车时刻表引用自设计师 施博翰在「台铁新竹站指示标示系统设计规划说明」

 


Products and Applications

文鼎字型關於字距的產品規格與應用

若是文鼎字型的鐵粉,有沒有發現近幾年文鼎的字型產品,在安裝後於軟體使用時,在字型選單列裡會出現另一組字體名稱幾乎一樣的字體,仔細一看,差別在於另一組字體名稱中多了「P」、「F」的代號。

 

幾年前,文鼎公司在與外部設計師交流的過程裡,不止一次聽過這樣的聲音,大致是這樣:在文章排版遇到中文全形符號的時後,常常需要花許多時間來調整個別符號的字間距,以免過大的白空間影響著版面閱讀的舒適度。

 

另一方面,真跡手寫數位字體的特色,除了字體造型外,每個字元的寬度、大小也不盡相同,我們將這樣的手感溫度帶入數位字體,讓每個字元在透過軟體排版後,仍然散發著人真人手寫的感受;然而,同時間字體也需要考量不同載體、軟體的相容度,這些都是在字體設計過程中字元規格的設計,連動到字體使用端文字間距調整的情境。

 

近幾年文鼎字型產品,如在印刷排版常會使用到的明、宋、仿宋、楷、黑、圓這幾類的字型產品,而且應用上,會在內文情境出現的字重規格,這些因素下,字型產品就會以TTC(TrueType Collections)的字體格是製作,裡面包含標準規格的漢字、符號以及有對常用39個中文全角符號進行調和(Proporitional)設計

的字型,這些有調整常用39個中文全角符號的字型,在字型選單列表裡,名稱中就會多了「P」這個代號,以下以文鼎書苑宋體為例。

 

而真跡數位化活潑風格的產品的情境剛好相反,通則上,以還原設計師寫字稿時字元的寬度為預設值,此時字元在排版上會呈現文字寬度擬真、有書寫韻律感的視覺效果;在兼容不同軟體對讀取字體的考量下,另外將真跡數位字型漢字的字寬,刻意的做等距的規格,在字型選單列表裡,名稱中就會多了「F」這個代號,以下以文鼎DC陳森田MORITA為例。

 

 

這些字型產品如果在Adobe軟體裡使用,要特別注意字元面版中「設定兩個字元之間的特殊字距」這個設定,若選到視覺,則文字會依Adobe的機制,根據字元的形狀自動調整選取字元間的間距。

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

 

Products and Applications

探索森澤的黑體之美——設計師不可錯過的五款黑體字型

字型不僅是溝通的載體,更是設計師展現創意的利器。
在字型設計的世界中,黑體字以其簡約現代的風格,成為設計師的經典之選,森澤致力於打造兼具美感與實用性的字體,精選以下五款黑體,一同探索它們的設計魅力吧


A1黑體

A1黑體包含了許多特別設計的字體元素,能在文字中創造出不同的溫度,並且適用範圍廣泛,由於其中宮較窄,加上栩栩如生的骨架設計,被歸類為復古風格字體,帶有些微手寫韻味,同時展現出自然流暢的美感。

雖然遵循著黑體的基本特徵,保持直筆和橫筆粗細一致,但通過圓角設計和油墨暈染效果這兩個不可或缺的特色,讓A1黑體在文章排版時不會像一般黑體給人過於俐落的感覺,反而營造出溫暖安定的氛圍。


Aoto黑體

Aoto 黑體是一款專為智慧型手機和平板電腦等電子設備顯示文字所設計的字體,其設計精神在於創造一種直接了當、乾淨俐落的黑體,讓使用者在閱讀長篇文章時也能感到自然順暢。

雖然 Aoto 黑體具有現代感且設計簡單,但其筆劃不像一般黑體那樣嚴格遵循水平垂直線條,而是保有自然的手寫風格,與大多數現代風格黑體採用較大字面框不同,Aoto 黑體特意在設計時為字身框保留了充足的空間,這個特點使它在保有現代黑體特質的同時,也能靈活運用於不同風格的文章排版中。


Kuretake Meiseki

Kuretake Meiseki 這款復古風黑體是由兩種字體組合而成:一是復刻自中國南京市郊外出土的晉代墓誌銘《王興之墓誌》的漢字字體「銘石」;二是源自森川龍文堂活字範例帖《活版總覽》中的和字(假名)字體「Kuretake」。

這款字型以隸書為基礎,融入雕刻風格的韻味,其筆風不僅展現出手寫般的質感,更帶有懷舊氛圍與質樸的魅力,特別適合用於需要營造復古風格的場合。


新黑體

新黑體是森澤的經典之作,以其筆劃俐落、結構穩重的特點,成為一款具有整齊系統感的現代風黑體,在簡潔無裝飾且筆畫均一鮮明的設計下,這款字體無論用於直排或橫排,都無需調整「比例間距」就能呈現出線條及灰度均等的優美排版效果。

其簡單洗鍊的風格使它非常適合運用於各種平面設計與廣告用途,不僅大字體具有視覺張力,小字體也保持著極高的易讀性。


UD新黑體 標準繁體

 

UD新黑 標準繁體是森澤以日文版UD新黑體為基礎,專為提升可讀性與易讀性而設計的繁體中文通用設計字體。

採用均衡的筆劃粗細,配合開闊清晰的設計,大幅提升了閱讀體驗,不僅適合運用於數位顯示與印刷媒體,融入了通用設計理念,讓不同使用者都能無障礙地感受文字的力量。

 


森澤的黑體字型,承載的不僅是字的型態,更是設計師對美感的追求與對功能性的需求。每一款字體都經過細緻的設計與測試,無論是在數位還是印刷媒介中,皆能展現出色的排版與閱讀效果。我們期待森澤字體能成為您設計中的創作養分,一同創造獨特的視覺體驗。