定距字型與應用

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,作為新竹車站時刻表的呈現,這定距字的使用,配合設計師排版的專業,增加了時刻表上數字訊息閱讀的可讀性。

設計師 施博翰在新竹車站列車時刻表的排版設計

 

 

桃園機場的班機資訊顯示面版以定距字做為訊息閱讀的文字選擇。

 

 

雖然定距字型出現的時間較調和字型早了很多,但在使用上並沒有因為外在環境硬體的提升而消失,反而以在特定情境下具有高辨視度的功能性繼續存在著,廠商們也持續設計新的定距字,也讓用字多了許多的選擇。

 

 

附註:新竹車站列車時刻表引用自設計師 施博翰在「臺鐵新竹站指示標示系統設計規劃說明」

 


字體產品與應用

在使用win10無法輸入文字要怎麼辦?

是不是有很多人最近升級到Windows10 20H1與20H2都會覺得輸入法哪裡怪怪的,時而閃退、部分候選字出不來或是直接當機呢!!!這真的是擾民,但又沒辦法不使用,這不是字型的問題,但在微軟還沒針對此問題做修改前,我們可以嘗試幾個步驟,讓你的輸入法起死回生。

 

目前微軟還在研究IME模式問題的解方案,如果使用者發現自己電腦上的輸入法發生異常的情況,不妨先嘗試透過 Windows Update 安裝更新,看看情況是否得到改善,如果沒有的話話,我可以先IME本,暫時決問題如何切換舊版,可以照以下步及可暫時目前的擾。

 

Step1. 左下始功能列點選

 

 

Step2. 點選時間與語

 

Step3. 點選中文() 

 

Step4. 選擇使用中的法,點擊選項

Step5. 選擇一般

Step6. 一般選擇使用舊版的微注音開關開啟

 

 

 

以上的步驟可暫時目前所遇到IME入法問題當務之急,在微軟尚未對此問題更新前,大家不妨試試。

字體產品與應用

輸入內碼也可以打出你想要的字

能夠代表一個人的稱謂有很多種,有本名、小名、綽號,還有獨一無二的身分證字號,在輸入法中,好比「林」這個字,注音輸入法輸入「ㄌㄧㄣˊ」,倉頡輸入法輸入「木+木」可以找到他,這就好比稱謂一樣,以不同的方式可以叫出不同的字碼,內碼輸入法也是其中一種,而且就是像身分證字號那樣,是一種獨一無二的,在標準字中,一個字碼就代表一個字,如果今天我們得知這個字碼Unicode碼位,但不知道他的念法或倉頡,就可以用這個小技巧。

以「林」這個字為例,開啟電腦的微軟注音或微軟倉頡,輸入「` 」+「U」+「6797」,輸入完字碼點選空白鍵輸出,就可以打出這個字碼所代表的字,這邊需要小提醒,這邊輸入的數字需要點選左邊上排的數字鍵,如果輸入右邊數字鍵盤,是沒有反應的喔~以「林」這個字為例,開啟電腦的微軟注音或微軟倉頡,輸入「` 」+「U」+「6797」,輸入完字碼點選空白鍵輸出,就可以打出這個字碼所代表的字,這邊需要小提醒,這邊輸入的數字需要點選左邊上排的數字鍵,如果輸入右邊數字鍵盤,是沒有反應的喔~

My alt text

 

 

同場加映,如果今天想要知道一個字的字碼怎麼辦,我們只需要開啟Word,在上面鍵入您想知道字碼的字,例如「林」這個字,輸入完後直接點選鍵盤的Alt+X,這個字就會轉換成Unicode的字碼「6797」。

 

字體產品與應用

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

時間在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