
這幾天看到國外網站介紹,IBM 企業自行開發一款新免費字型「IBM Plex」,同時將它釋出、開放讓所有人可以免費下載使用!此外還提供「IBM Type」風格指南仔細規範各種使用範例,例如當網頁顯示時應該配合什麼樣的字重、大小、間距、書寫風格、行高和對齊方式才會有最佳使用效果。這幾年各家企業公司開始注重自己的設計風格,而這些細節往往代表一家公司的文化精神或方向,若你是設計者,其實可以從這類文件找到不少的靈感,或者將它套用到網頁或其他設計來達到更好的視覺效果。
IBM Plex Family 由三大字體類型組成:Sans-serif(無襯線體)、Serif(襯線體)和 Mono(等寬字體),相信熟悉英文字型的朋友對於這三種字體類型一定不陌生,每種類別有八種不同的字重:Thin、ExtraLight、Light、Text、Regular、Medium、Bold、SemiBold,也有為斜體設計的 Italic 系列。
值得一提的是 IBM Plex 收錄的字型檔案為 Windows 和 Mac 適用的 .ttf 和 .otf 格式,也附帶 Sketch App 檔案,若使用者要應用於網頁字型,IBM Plex 亦提供網頁字型 .eot、.woff 和 .woff2 格式,幾乎可以說完整照顧到所有需求。
IBM Type 詳細規範使用 IBM Plex 字型最好的配置方式,例如當使用於網頁時,建議只使用 SemiBold、Regular 和 Light 三種字重,行高和字元間距(Letter-spacing)必須依照字體大小而有不同的設定值,才能維持字體的整體感覺。IBM Type 也提供一些實際的字型設定範例,對於想使用 IBM Plex 字型的設計師來說是個相當值得仔細閱讀的風格指南。
網站名稱:IBM Plex Family
網站鏈結:https://www.ibm.com/plex/ (GitHub)
使用教學
STEP 1
開啟 IBM Type 網站,可以看到關於此專案項目的介紹及說明,簡單來說,IBM Type 認為排版是一種外觀和佈局,每個字元及段落放在網格中,可以創造出對齊、和諧或清晰的視覺感受,排版反映出選擇的字體大小、位置和字重,用以引導使用者來瀏覽內容。
從首頁就能找到 IBM Plex Family 字型的免費下載鏈結,如果你要使用於 Sketch 的話,網站也提供 IBM Type 的 Sketch 檔案,一樣能從首頁找到下載鏈結。

STEP 2
下載後解壓縮,從「fonts」資料夾下就能找到 IBM Plex 三種字體類型:Sans、Serif 和 Mono,其中還會分成桌面端、網頁使用的字型,再找到 Windows 或 Mac 資料夾就會有 .ttf 或 .otf 格式可供安裝。

STEP 3
因為 IBM Plex 字體類型、字重和斜體等字型加一加數量相當多,因此我只挑其中幾個安裝,安裝後能直接在字體簿裡看到字型名稱和預覽,回到你要使用的應用程式,選擇 IBM Plex 或你安裝的字型就能使用。

要特別注意的是 IBM Plex Family 是英文字型,對於中文內容使用是沒有效果的。

STEP 4
前面不斷提到 IBM Type 提供風格指南,可以告訴設計師應該如何正確使用 IBM Plex 字型,因為都有附上圖片解說,就算沒有完整閱讀說明也能大致了解它要傳達的意思。

IBM Plex 也能使用於應用程式開發,從風格指南頁面中可以看到一些實際應用範例。

對於產品體驗來說,可依照需求來運用不同的字型樣式和大小,IBM Type 對此有不少著墨,有興趣的設計師可以看看 Type Sets 和 Alignments 說明。

值得一試的三個理由:
- 由 IBM 企業設計的字型,提供 Serif、Sans-serif 和 Mono 三種字體類型
- Windows 和 Mac 適用的 .ttf、.otf 格式,也能使用於網頁字型(Webfont)
- 每一種類型各有八種不同字重,也有針對斜體提供不同的檔案