建構 Firefox OS 操作介面的基本元素: Fira Sans 字型

字型是使用者介面的基礎,所有顯示在畫面上的資訊都是由圖跟文字構成的。舉凡使用者需要閱讀、了解文意、或是進一步進行操作動作選擇的地方,不論是一段說明文字、一個對話框、圖示下面的標題文字、或是確認、取消的按鈕、系統設定畫面…等等,皆需要文字來構成。其實在介面設計中,沒有刻意去注意的話,可能不會發現,原來字型的運用是超乎想像地多的。

如下圖是 Firefox OS 的首頁以及設定、對話框畫面,就用到了許多文字:

interface

不知你是否有注意過,在這些畫面中,其實只用了一種字型。經由這個字型的粗細、大小、顏色樣式變化產生了各個豐富的介面。今天就來跟大家介紹一下我們 Firefox OS 所使用的專用字型: Fira Sans。Fira Sans 是為 Firefox OS 量身訂做開發出來的一套字型。採用了富有現代簡潔美感的 Sans-serif 無襯線字型樣式變化而來。

下圖就是 Fira Sans – Light 字型,無裝飾性的筆畫,粗細度都儘量維持相同,惟獨在圓筆的轉折收尾處 ( 小寫 a, g, p, q, u ) 會將筆畫變細。在小寫 i, j 上點的部分選擇使用了正圓點。是不是給人很簡約、乾淨、現代的字型之美感覺呢?

Light

最特別的是,設計團隊在保有易讀性與現代感的前提之下,刻意將某幾個字母的小細節加上襯線與手寫樣式的處理,出現了手寫文書的感覺,也多了一些溫暖的人情味,意在科技與人文的自然融合,並把這個理念呈現在每天使用的介面之中。

下圖,正體跟斜體的 Fira Sans 字當中,圈起來的地方即是保留手寫的優美線條的部分。

FiraSase_mark

你可以看到小寫 a, g, k 的正體跟斜體是不同的,有一半邊是保留手寫感,另一半邊是簡約感。 小寫 b, p 跟 q 有的露尾巴,另一邊則收起來。小寫 f 在斜體處特別多拉了一點尾巴回來。大寫 Q 的最後一筆轉折曲線非常優雅。這些細節都是在字型設計時反覆推敲的結果,於是產生了獨一無二的 Fira Sans 字型。

這個字型,因為維持了簡潔的精神,所以是很百搭的,很適合用在標題、內文、以及操作介面元件上面。 Fira Sans 同時也是開放的,歡迎使用者以及開發者下載使用。

相關連結:
Mozilla Fira Sans 字型樣式: https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/
Fira Sans on Google Fonts http://www.google.com/fonts/specimen/Fira+Sans
Fira @ Github https://github.com/mozilla/Fira
Fira Sans 字型下載 https://github.com/mozilla/Fira/archive/master.zip

您可能也會喜歡

目前找不到相關文章

共 3 則讀者回應

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *