快收藏！15 款 UI 設計常用的等寬英文字體

當界面按鈕中字體樣式發(fā)生變化時，整個界面也會發(fā)生很大的變化，甚至可以說是雜亂。等寬字體（Uniwidth）就是解決這一問題的絕佳辦法。它是一種文字設計風格，指所有的字符都占有相同寬度，字間距也一樣，因此為我們省去了很多的麻煩。作者文章中為我們推薦了 15 款非常棒的等寬字體，每一款字體都進行了簡要的講解和分析，最重要的是還同時提供了獲取的途徑！讓我們一起來跟隨讀者獲取這 15 款精美的等寬字體吧~

作為一個網(wǎng)頁 / 界面 / 視覺設計師我經(jīng)常與標簽狀態(tài)打交道。選中，未選中，激活，未激活，可用，不可用...這一系列不同的狀態(tài)揭示了一個設計原則：永遠不要將顏色作為唯一的提示，文本粗細通常是我的首選解決方案。但若你曾經(jīng)使用過精確設計的界面，那么你就會知道，當從常規(guī)標簽切換為粗體標簽時，整個界面中的標簽會變形地像彈球游戲的障礙一樣，非常令人沮喪。

解決這個問題的秘訣就是 —— 統(tǒng)一（uniwidth）字體，有時也稱為 “等寬”，“雙面” 或 “多重” 字體。

官方對這個字體的定義是：等寬字體，也稱為非比例字體， 等寬字體是一種文字設計風格，指所有的字符都占有相同寬度，字間距也一樣（例如，大寫字母 A 與小寫字母 w 或 € 歐元符號具有相同的寬度）。等寬字體通常用于打字機，或計算機代碼。

在 IBM Plex Mono 字體中，每個字母都具有相同的寬度

通俗來說，等寬字體是按比例隔開的字體，因此字符間隙大小不同、字符粗細不同，但卻都占據(jù)相同的空間。也就是說無論字符被設置為多大的粗細，都永遠不會改變整個界面的文本長度或?qū)е挛谋局嘏拧?/p>

通常情況下，等寬字體的字母在不同的字體粗細下具有不同的寬度，但占據(jù)相同的空間。

雖然等寬字體在海報等靜態(tài)設計中也許能設計出一些很有創(chuàng)意的排版，但對于界面設計而言他的效果絕對是驚人的，因為界面設計往往只需要很小的改動就可以解決整個頁面的問題。例如，更改 Hover 狀態(tài)下單個菜單項的樣式通常會導致整行寬度的跳動，若使用了等寬字體可以輕松解決這樣的問題。

使用等寬字體（下）可以輕松地為交互式文本元素設置動畫效果，而不會影響周圍的布局。

在設計不同狀態(tài)時交互設計師會運用多種不同的變化屬性進行區(qū)分，這就需要代碼的輔助插入大量允許在不同的粗細和字體之間進行平滑的插值 ，而有了等寬字體就會省去許多麻煩。

使用等寬字體是平面設計中常見的手法，因此可以找到很多關于等寬字體的資源不足為奇了。到目前為止，我找到了兩個收集等寬字體的資源包：Identifont 的“等寬字體”列表和 David Sudweeks 自 2015 年以來的“ 等寬字體”集合。

微軟專門為程序員發(fā)布的一款新的固定寬度字體：

考慮到界面和網(wǎng)頁設計的特殊需求以及近年來可變字體的激增，我希望在不久的將來能看到更多的等寬字體。

接下來為大家列舉一些我最近整理的等寬字體，以及獲取渠道。

字體 1：Recursive by Arrow Type

網(wǎng)站鏈接：www.recursive.design

Recursive 是一款可變字體，其特征為“多功能性，可操縱性和表現(xiàn)力”。Recursive 有等比和等寬兩種版本，均可在四個屬性（字重，曲度，斜度和連筆）上對字體進行調(diào)控，例如曲度的調(diào)整能夠產(chǎn)生柔和的曲線筆觸，為原本嚴肅的字體增添了趣味。Recursive 支持多種基于拉丁語的語言，包括越南語，它還帶有一組擴展表示，包括：貨幣，符號，分數(shù)和箭頭。

Recursive 可從 Google Fonts 或 Github 和開源下載。

來源: Arrow Type

字體 2：PT Root UI by Paratype

網(wǎng)站鏈接：www.paratype.com/fonts/pt/pt-root-ui

PT Root UI 是一款現(xiàn)代無襯線字體，有四種字重（Light, Regular, Medium, Bold）。PT Root UI 專為屏幕，界面和網(wǎng)站而設計。它支持多種語言，包括拉丁文和西里爾字母（包括亞洲拓展庫），并帶有表格式數(shù)字[1]，貨幣符號，分數(shù)和索引，以及許多箭頭和其他形式。

( [1] 表格式數(shù)字（Tabular Figures）是指每個表格數(shù)字都有相同的寬度。這種統(tǒng)一的間距使他們可以在表格、價目表、財務報表和其他數(shù)字欄中垂直對齊。因此，數(shù)字 1 將與其他每個數(shù)字(包括 8）具有相同的寬度。）

表格式數(shù)字

可以通過 Paratype 網(wǎng)站上的 SIL Open Font License（OFL）免費下載 PT Root UI。

來源: Paratype

字體 3：Golos UI by Paratype

網(wǎng)站鏈接：www.paratype.com/fonts/pt/golos-ui

同樣是 Paratype 出品的字體，Golos Ui 有三種字體粗細（Regular、Medium、Bold），也可用作可變字體。Golos UI 整體形式上與 PT Root UI 相似，但比例略有縮小。它能支持拉丁文擴展和西里爾文（包括西里爾文亞洲），并帶有表格式數(shù)字、貨幣符號、分數(shù)和指數(shù)，以及箭頭符號等拓展庫。

Golos UI 可在 Paratype 網(wǎng)站上使用 SIL 開放字體許可證（OFL）免費下載。

來源: Paratype

字體 4：Grandstander by Etcetera Type Company

網(wǎng)站鏈接：www.etceteratype.co/grandstander

Grandstander 是一款有趣的無襯線可變字體，其靈感來自兒童讀物，以此“吸引年輕人和老年人”。字母呈現(xiàn)彎曲且略微膨脹狀態(tài)，使其具有漫畫般的美感，Grandstander 有九種字重（從 Thin 到 Black），并有匹配的斜體，可變字體樣式有兩種：“字重” 和 “傾斜”。它支持 “拉丁語系范圍內(nèi)的多種語言”，并包括表格式數(shù)字，以及分數(shù)，風格化字體[2] 和書法的形式。

（[2] 風格化字體（Stylistic Alternates）經(jīng)過設計提供各種藝術(shù)效果的一種字體，樣式化字體給予字母一個稍微更生動和非正式的外觀，從而提供更多的豐富有趣的排版。）

風格化字體

可通過 OFL（開放字體許可）在 Google 字體和 Github 上免費下載 Grandstander。

來源: ETC

字體 5：Angus by Black Foundry

網(wǎng)站鏈接：black-foundry.com/fonts/angus

安格斯（Angus）是一款現(xiàn)代的無襯線字體，字體末端經(jīng)過圓角處理，具有等距的美學效果。安格斯（Angus）有五種字重（從 Light 到 Extrabold ），并有匹配的斜體。安格斯（Angus）支持拉丁文字集，包括舊式和表格式數(shù)字，分數(shù)和索引，連字和箭頭。

可以從 Black Foundry 的網(wǎng)站上購買安格斯字體。

來源：Black Foundry

字體 6：Halvar and Halvar Stencil Complete by TypeMates

網(wǎng)站鏈接：www.typemates.com/fonts/halvar-and-stencil-complete

Halvar 是一個龐大的字體系統(tǒng)，共有 162 種樣式。Halvar 和 Halvar Stencil 有三種字體寬度（Wide, Normal & Condensed）和 9 種字重（從 Hairline 到 Black ），以及兩個斜體版本（Slanted & SuperSlanted)）。Halvar 字體有夸張的比例和構(gòu)造形式，帶著工程師般的嚴謹又帶有一絲怪誕的原始魅力。Halvar 支持擴展的拉丁文、希臘文和西里爾文，并附帶表格式數(shù)字、圓形的強調(diào)符號、上標、分數(shù)以及風格化字體。

Halvar 可以從 TypeMate 的網(wǎng)站上購買，同時該網(wǎng)站也提供預發(fā)布的可變體。

來源: TypeMates

字體 7：Service Gothic by HEX

網(wǎng)站鏈接：hex.xyz/Service_Gothic

Service Gothic 是一款正在開發(fā)中的可變字體，當前僅有大寫字母的字體庫。Service Gothic 包括 6 個字重，從 Thin 到 Bold。

可以從 Future Fonts 購買 Service Gothic 的初始發(fā)行版。

資料來源：未來字體

字體 8：Urby & Urby Soft by TypeMates

網(wǎng)站鏈接：www.typemates.com/fonts/urby

Urby Collection 旨在 “將字符與技術(shù)風格相結(jié)合”。烏比（Urby）及柔體烏比（Urby Soft）有五種字重（從 Thin 到 Black），兩者可以互換使用，因為兩個系列的字重都是相同的。Urby Collection 提供擴展的拉丁語言支持，包括表格式數(shù)字，上標和下標，分數(shù)，序數(shù)以及各種有用的裝飾符號和幾何形狀。

可在 TypeMates 網(wǎng)站上購買 Urby Collection。

資料來源：TypeMates

字體 9：Geóso by Finaltype

網(wǎng)站鏈接：finaltype.de/de/projekte/geoso

Geóso 是具有幾何感的無襯線字體。該字體有 9 種字重（從 Thin 到 Heavy），并有匹配的斜體，每種樣式均具有相同的寬度（如下圖所示）。Geóso 支持擴展的拉丁文字集，并附帶大量復雜的圖形，上標和下標以及分數(shù)系統(tǒng)。例如，難以捉摸的德國首都字符 ? 和一組有趣的自定義表情符號。

可以從 FrontSpring 網(wǎng)站上購買 Geóso。

資料來源：Finaltype

字體 10：FF Kaytek family by FontFont

網(wǎng)站鏈接：www.fontshop.com/superfamilies/ff-kaytek

FF Kaytek 是 “90 年代通信字體的代表”。它是一個帶有多種樣式的字體家族，包括四種樣式：Slab，Sans，Headline 和 Rounded。FF Kaytek Slab 和 Sans 分別有六種字重（從 Thin 到 Black），加上匹配的斜體字，而 FF Kaytek 的 Headline 和 Rounded 都有七種字重（從 Thin 到 ExtraBlack/Black）?！癏eadline” 和 “Rounded” 樣式是相輔相成的，他們的外觀比 Slab 和 Sans 更為緊湊。FF Kaytek 的不同樣式和字重寬度均相同。

FF Kaytek 字體家族支持擴展的拉丁文字集，并支持舊式數(shù)字[3]，分數(shù)，上標和下標。

（[3] 舊式數(shù)字（Old-style Figures 也稱為 OsF 數(shù)字)設計有升序和降序，其特征和比例與字體的小寫字母兼容。其也被稱為懸掛圖形，通常用于文本設置，因為它們與小寫字母的光流和節(jié)奏很好地融合。舊式數(shù)字可以設計成比例和表格版本。）

舊式數(shù)字

FF Kaytek 在 FontShop 和 MyFonts 上都是可用的。

資料來源：MyFonts

字體 11：Bahnschrift by Saja Typeworks

網(wǎng)站鏈接：docs.microsoft.com/en-us/typography/font-list/bahnschrift

Bahnschrift 是 DIN 字體的數(shù)字化形式，應用在德國的路標和其他技術(shù)中。Bahnschrift 是微軟的第一款可變字體，它有兩個樣式屬性：字重和寬度，其中包括五種字重和三種寬度。Bahnschrift 支持拉丁文（包括越南語）、西里爾文和希臘文擴展。

Bahnschrift 是 Windows 10 操作系統(tǒng)自帶字體。

資料來源：微軟

字體 12：FF Scala family by FontFont

網(wǎng)站鏈接：scalafont.com

FF Scala 系列是印刷排版的經(jīng)典之作。由 Martin Majoor 于 1991 年設計的舊式襯線 FF Scala 擴展為基于通用架構(gòu)的無襯線體 FF Scala Sans。這兩個系列都有兩種粗細（Regular and Bold）加上匹配的斜體，以及兩種樣式。FF Scala 系列支持擴展拉丁語，包括舊樣式和表格式數(shù)字、上標和下標、分數(shù)、序數(shù)和一組標志性的裝飾指針。

FF Scala 系列可從 FontShop 網(wǎng)站購買。

來源: FontShop

字體 13：Minérale by 205TF

網(wǎng)站鏈接：www.205.tf/look/minerale

Minérale 是一款在設計上十分獨特的可變字體，在字干上粗細不同相交于字體中部。Minérale 字體有 5 種字重（從 Extralight 到 Black）加上匹配的斜體，所有樣式都是等寬的（包括斜體），其中字重最細時文字整體最清晰醒目。Minérale 支持擴展的拉丁文字集，包括等比例舊式數(shù)字，表格，表格式數(shù)字，上級/下級，序數(shù)，風格化字體和箭頭等。

可以從 205TF 的網(wǎng)站上購買 Minérale。

來源：205TF

字體 14：Climate Crisis Font by Helsinki Sanomat

網(wǎng)站鏈接：kampanjat.hs.fi/climatefont/index.html

The Climate Crisis Font 是一種意義非凡的可變字體，旨在闡明氣候變化的緊迫性。字體的字重基于國家冰雪數(shù)據(jù)中心以及 IPCC 提供的預測數(shù)據(jù)，最粗的字體重量代表了 1979 年北極海冰的最小范圍，而最細的字體代表了對 2050 年最小范圍的預測。

氣候危機字體（Climate Crisis Font）支持基本的拉丁語庫，并具有有限的上標和小數(shù)部分選擇。

根據(jù) Helsigin Sanomat 的 SIL 開放字體許可（ OFL ），可以免費下載 Climate Crisis 字體。

The Climate Crisis Font 的字符具有一致的字寬，但隨著字重變化逐漸 “熔化”，引起人們對氣候變化的重視。

資料來源：赫爾辛基薩諾瑪特

字體 15：Handjet by Rosetta Type

網(wǎng)站鏈接：www.rosettatype.com/Handjet

Handjet 是一種實驗性的，基于網(wǎng)格的三軸字體。Handjet 包含 23 種網(wǎng)格形狀（例如正方形，三葉草，心形和大頭針），它們的大小可以更改，從而產(chǎn)生不同的字體粗細。正如 Rosetta Type 的預期，Handjet 支持多種語言：阿拉伯語，亞美尼亞語，西里爾字母，希臘語，希伯來語和擴展拉丁語，并且它還包括分數(shù)和有趣的裝飾符號，用這些符號可以構(gòu)建出狐貍、狗等等形象。

你可以從 Rosetta Type 網(wǎng)站以 0 歐元的價格購買 Handjet。

資料來源：Rosetta Type

要點

在不影響文本占用空間的情況下，更改其粗細和樣式是一項對界面具有深遠意義的功能，它不僅可以為設計人員和開發(fā)人員節(jié)省一些麻煩，還為設計開辟了新的可能性。隨著越來越多的可變字體發(fā)布，我很高興能在我的界面設計工具包中添加更多的等寬字體。你要不要一起嘗試呢？

拓展資料

如果你跳過了上述文章的內(nèi)容，可以在以下出色的資源中獲取：

• Identifont 的 “等寬字體” 列表
  http://www.identifont.com/equal-width.html
• David Sudweeks 的 “通用字體集”
  https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces
• Indra Kupferschmid 在 Fontstand 上整理的一組 “等寬字體”：
  https://fontstand.com/collections/69697/ab1ddd85e26deaf6647be009be6a1337

歡迎關注作者微信公眾號：「TCC翻譯情報局」