當(dāng)界面按鈕中字體樣式發(fā)生變化時，整個界面也會發(fā)生很大的變化，甚至可以說是雜亂。等寬字體（Uniwidth）就是解決這一問題的絕佳辦法。它是一種文字設(shè)計(jì)風(fēng)格，指所有的字符都占有相同寬度，字間距也一樣，因此為我們省去了很多的麻煩。作者文章中為我們推薦了 15 款非常棒的等寬字體，每一款字體都進(jìn)行了簡要的講解和分析，最重要的是還同時提供了獲取的途徑！讓我們一起來跟隨讀者獲取這 15 款精美的等寬字體吧~
作為一個網(wǎng)頁 / 界面 / 視覺設(shè)計(jì)師我經(jīng)常與標(biāo)簽狀態(tài)打交道。選中，未選中，激活，未激活，可用，不可用...這一系列不同的狀態(tài)揭示了一個設(shè)計(jì)原則：永遠(yuǎn)不要將顏色作為唯一的提示，文本粗細(xì)通常是我的首選解決方案。但若你曾經(jīng)使用過精確設(shè)計(jì)的界面，那么你就會知道，當(dāng)從常規(guī)標(biāo)簽切換為粗體標(biāo)簽時，整個界面中的標(biāo)簽會變形地像彈球游戲的障礙一樣，非常令人沮喪。
解決這個問題的秘訣就是 —— 統(tǒng)一（uniwidth）字體，有時也稱為 “等寬”，“雙面” 或 “多重” 字體。
官方對這個字體的定義是：等寬字體，也稱為非比例字體， 等寬字體是一種文字設(shè)計(jì)風(fēng)格，指所有的字符都占有相同寬度，字間距也一樣（例如，大寫字母 A 與小寫字母 w 或 € 歐元符號具有相同的寬度）。等寬字體通常用于打字機(jī)，或計(jì)算機(jī)代碼。
在 IBM Plex Mono 字體中，每個字母都具有相同的寬度
通俗來說，等寬字體是按比例隔開的字體，因此字符間隙大小不同、字符粗細(xì)不同，但卻都占據(jù)相同的空間。也就是說無論字符被設(shè)置為多大的粗細(xì)，都永遠(yuǎn)不會改變整個界面的文本長度或?qū)е挛谋局嘏拧?/p>
通常情況下，等寬字體的字母在不同的字體粗細(xì)下具有不同的寬度，但占據(jù)相同的空間。
雖然等寬字體在海報等靜態(tài)設(shè)計(jì)中也許能設(shè)計(jì)出一些很有創(chuàng)意的排版，但對于界面設(shè)計(jì)而言他的效果絕對是驚人的，因?yàn)榻缑嬖O(shè)計(jì)往往只需要很小的改動就可以解決整個頁面的問題。例如，更改 Hover 狀態(tài)下單個菜單項(xiàng)的樣式通常會導(dǎo)致整行寬度的跳動，若使用了等寬字體可以輕松解決這樣的問題。
使用等寬字體（下）可以輕松地為交互式文本元素設(shè)置動畫效果，而不會影響周圍的布局。
在設(shè)計(jì)不同狀態(tài)時交互設(shè)計(jì)師會運(yùn)用多種不同的變化屬性進(jìn)行區(qū)分，這就需要代碼的輔助插入大量允許在不同的粗細(xì)和字體之間進(jìn)行平滑的插值 ，而有了等寬字體就會省去許多麻煩。
使用等寬字體是平面設(shè)計(jì)中常見的手法，因此可以找到很多關(guān)于等寬字體的資源不足為奇了。到目前為止，我找到了兩個收集等寬字體的資源包：Identifont 的“等寬字體”列表和 David Sudweeks 自 2015 年以來的“ 等寬字體”集合。
微軟專門為程序員發(fā)布的一款新的固定寬度字體：
考慮到界面和網(wǎng)頁設(shè)計(jì)的特殊需求以及近年來可變字體的激增，我希望在不久的將來能看到更多的等寬字體。
接下來為大家列舉一些我最近整理的等寬字體，以及獲取渠道。
網(wǎng)站鏈接：www.recursive.design
Recursive 是一款可變字體，其特征為“多功能性，可操縱性和表現(xiàn)力”。Recursive 有等比和等寬兩種版本，均可在四個屬性（字重，曲度，斜度和連筆）上對字體進(jìn)行調(diào)控，例如曲度的調(diào)整能夠產(chǎn)生柔和的曲線筆觸，為原本嚴(yán)肅的字體增添了趣味。Recursive 支持多種基于拉丁語的語言，包括越南語，它還帶有一組擴(kuò)展表示，包括：貨幣，符號，分?jǐn)?shù)和箭頭。
Recursive 可從 Google Fonts 或 Github 和開源下載。
來源: Arrow Type
網(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è)計(jì)。它支持多種語言，包括拉丁文和西里爾字母（包括亞洲拓展庫），并帶有表格式數(shù)字[1]，貨幣符號，分?jǐn)?shù)和索引，以及許多箭頭和其他形式。
( [1] 表格式數(shù)字（Tabular Figures）是指每個表格數(shù)字都有相同的寬度。這種統(tǒng)一的間距使他們可以在表格、價目表、財務(wù)報表和其他數(shù)字欄中垂直對齊。因此，數(shù)字 1 將與其他每個數(shù)字(包括 8）具有相同的寬度。）
表格式數(shù)字
可以通過 Paratype 網(wǎng)站上的 SIL Open Font License（OFL）免費(fèi)下載 PT Root UI。
來源: Paratype
網(wǎng)站鏈接：www.paratype.com/fonts/pt/golos-ui
同樣是 Paratype 出品的字體，Golos Ui 有三種字體粗細(xì)（Regular、Medium、Bold），也可用作可變字體。Golos UI 整體形式上與 PT Root UI 相似，但比例略有縮小。它能支持拉丁文擴(kuò)展和西里爾文（包括西里爾文亞洲），并帶有表格式數(shù)字、貨幣符號、分?jǐn)?shù)和指數(shù)，以及箭頭符號等拓展庫。
Golos UI 可在 Paratype 網(wǎng)站上使用 SIL 開放字體許可證（OFL）免費(fèi)下載。
來源: Paratype
網(wǎng)站鏈接：www.etceteratype.co/grandstander
Grandstander 是一款有趣的無襯線可變字體，其靈感來自兒童讀物，以此“吸引年輕人和老年人”。字母呈現(xiàn)彎曲且略微膨脹狀態(tài)，使其具有漫畫般的美感，Grandstander 有九種字重（從 Thin 到 Black），并有匹配的斜體，可變字體樣式有兩種：“字重” 和 “傾斜”。它支持 “拉丁語系范圍內(nèi)的多種語言”，并包括表格式數(shù)字，以及分?jǐn)?shù)，風(fēng)格化字體[2] 和書法的形式。
（[2] 風(fēng)格化字體（Stylistic Alternates）經(jīng)過設(shè)計(jì)提供各種藝術(shù)效果的一種字體，樣式化字體給予字母一個稍微更生動和非正式的外觀，從而提供更多的豐富有趣的排版。）
風(fēng)格化字體
可通過 OFL（開放字體許可）在 Google 字體和 Github 上免費(fèi)下載 Grandstander。
來源: ETC
網(wǎng)站鏈接：black-foundry.com/fonts/angus
安格斯（Angus）是一款現(xiàn)代的無襯線字體，字體末端經(jīng)過圓角處理，具有等距的美學(xué)效果。安格斯（Angus）有五種字重（從 Light 到 Extrabold ），并有匹配的斜體。安格斯（Angus）支持拉丁文字集，包括舊式和表格式數(shù)字，分?jǐn)?shù)和索引，連字和箭頭。
可以從 Black Foundry 的網(wǎng)站上購買安格斯字體。
來源：Black Foundry
網(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)造形式，帶著工程師般的嚴(yán)謹(jǐn)又帶有一絲怪誕的原始魅力。Halvar 支持?jǐn)U展的拉丁文、希臘文和西里爾文，并附帶表格式數(shù)字、圓形的強(qiáng)調(diào)符號、上標(biāo)、分?jǐn)?shù)以及風(fēng)格化字體。
Halvar 可以從 TypeMate 的網(wǎng)站上購買，同時該網(wǎng)站也提供預(yù)發(fā)布的可變體。
來源: TypeMates
網(wǎng)站鏈接：hex.xyz/Service_Gothic
Service Gothic 是一款正在開發(fā)中的可變字體，當(dāng)前僅有大寫字母的字體庫。Service Gothic 包括 6 個字重，從 Thin 到 Bold。
可以從 Future Fonts 購買 Service Gothic 的初始發(fā)行版。
資料來源：未來字體
網(wǎng)站鏈接：www.typemates.com/fonts/urby
Urby Collection 旨在 “將字符與技術(shù)風(fēng)格相結(jié)合”。烏比（Urby）及柔體烏比（Urby Soft）有五種字重（從 Thin 到 Black），兩者可以互換使用，因?yàn)閮蓚€系列的字重都是相同的。Urby Collection 提供擴(kuò)展的拉丁語言支持，包括表格式數(shù)字，上標(biāo)和下標(biāo)，分?jǐn)?shù)，序數(shù)以及各種有用的裝飾符號和幾何形狀。
可在 TypeMates 網(wǎng)站上購買 Urby Collection。
資料來源：TypeMates
網(wǎng)站鏈接：finaltype.de/de/projekte/geoso
Geóso 是具有幾何感的無襯線字體。該字體有 9 種字重（從 Thin 到 Heavy），并有匹配的斜體，每種樣式均具有相同的寬度（如下圖所示）。Geóso 支持?jǐn)U展的拉丁文字集，并附帶大量復(fù)雜的圖形，上標(biāo)和下標(biāo)以及分?jǐn)?shù)系統(tǒng)。例如，難以捉摸的德國首都字符 ? 和一組有趣的自定義表情符號。
可以從 FrontSpring 網(wǎng)站上購買 Geóso。
資料來源：Finaltype
網(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 字體家族支持?jǐn)U展的拉丁文字集，并支持舊式數(shù)字[3]，分?jǐn)?shù)，上標(biāo)和下標(biāo)。
（[3] 舊式數(shù)字（Old-style Figures 也稱為 OsF 數(shù)字)設(shè)計(jì)有升序和降序，其特征和比例與字體的小寫字母兼容。其也被稱為懸掛圖形，通常用于文本設(shè)置，因?yàn)樗鼈兣c小寫字母的光流和節(jié)奏很好地融合。舊式數(shù)字可以設(shè)計(jì)成比例和表格版本。）
舊式數(shù)字
FF Kaytek 在 FontShop 和 MyFonts 上都是可用的。
資料來源：MyFonts
網(wǎng)站鏈接：docs.microsoft.com/en-us/typography/font-list/bahnschrift
Bahnschrift 是 DIN 字體的數(shù)字化形式，應(yīng)用在德國的路標(biāo)和其他技術(shù)中。Bahnschrift 是微軟的第一款可變字體，它有兩個樣式屬性：字重和寬度，其中包括五種字重和三種寬度。Bahnschrift 支持拉丁文（包括越南語）、西里爾文和希臘文擴(kuò)展。
Bahnschrift 是 Windows 10 操作系統(tǒng)自帶字體。
資料來源：微軟
網(wǎng)站鏈接：scalafont.com
FF Scala 系列是印刷排版的經(jīng)典之作。由 Martin Majoor 于 1991 年設(shè)計(jì)的舊式襯線 FF Scala 擴(kuò)展為基于通用架構(gòu)的無襯線體 FF Scala Sans。這兩個系列都有兩種粗細(xì)（Regular and Bold）加上匹配的斜體，以及兩種樣式。FF Scala 系列支持?jǐn)U展拉丁語，包括舊樣式和表格式數(shù)字、上標(biāo)和下標(biāo)、分?jǐn)?shù)、序數(shù)和一組標(biāo)志性的裝飾指針。
FF Scala 系列可從 FontShop 網(wǎng)站購買。
來源: FontShop
網(wǎng)站鏈接：www.205.tf/look/minerale
Minérale 是一款在設(shè)計(jì)上十分獨(dú)特的可變字體，在字干上粗細(xì)不同相交于字體中部。Minérale 字體有 5 種字重（從 Extralight 到 Black）加上匹配的斜體，所有樣式都是等寬的（包括斜體），其中字重最細(xì)時文字整體最清晰醒目。Minérale 支持?jǐn)U展的拉丁文字集，包括等比例舊式數(shù)字，表格，表格式數(shù)字，上級/下級，序數(shù)，風(fēng)格化字體和箭頭等。
可以從 205TF 的網(wǎng)站上購買 Minérale。
來源：205TF
網(wǎng)站鏈接：kampanjat.hs.fi/climatefont/index.html
The Climate Crisis Font 是一種意義非凡的可變字體，旨在闡明氣候變化的緊迫性。字體的字重基于國家冰雪數(shù)據(jù)中心以及 IPCC 提供的預(yù)測數(shù)據(jù)，最粗的字體重量代表了 1979 年北極海冰的最小范圍，而最細(xì)的字體代表了對 2050 年最小范圍的預(yù)測。
氣候危機(jī)字體（Climate Crisis Font）支持基本的拉丁語庫，并具有有限的上標(biāo)和小數(shù)部分選擇。
根據(jù) Helsigin Sanomat 的 SIL 開放字體許可（ OFL ），可以免費(fèi)下載 Climate Crisis 字體。
The Climate Crisis Font 的字符具有一致的字寬，但隨著字重變化逐漸 “熔化”，引起人們對氣候變化的重視。
資料來源：赫爾辛基薩諾瑪特
網(wǎng)站鏈接：www.rosettatype.com/Handjet
Handjet 是一種實(shí)驗(yàn)性的，基于網(wǎng)格的三軸字體。Handjet 包含 23 種網(wǎng)格形狀（例如正方形，三葉草，心形和大頭針），它們的大小可以更改，從而產(chǎn)生不同的字體粗細(xì)。正如 Rosetta Type 的預(yù)期，Handjet 支持多種語言：阿拉伯語，亞美尼亞語，西里爾字母，希臘語，希伯來語和擴(kuò)展拉丁語，并且它還包括分?jǐn)?shù)和有趣的裝飾符號，用這些符號可以構(gòu)建出狐貍、狗等等形象。
你可以從 Rosetta Type 網(wǎng)站以 0 歐元的價格購買 Handjet。
資料來源：Rosetta Type
在不影響文本占用空間的情況下，更改其粗細(xì)和樣式是一項(xiàng)對界面具有深遠(yuǎn)意義的功能，它不僅可以為設(shè)計(jì)人員和開發(fā)人員節(jié)省一些麻煩，還為設(shè)計(jì)開辟了新的可能性。隨著越來越多的可變字體發(fā)布，我很高興能在我的界面設(shè)計(jì)工具包中添加更多的等寬字體。你要不要一起嘗試呢？
如果你跳過了上述文章的內(nèi)容，可以在以下出色的資源中獲?。?/p>
- 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
歡迎關(guān)注作者微信公眾號：「TCC翻譯情報局」
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話題
發(fā)評論！每天贏獎品
點(diǎn)擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機(jī)派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計(jì)師平臺，提供獎品贊助 聯(lián)系我們
品牌形象設(shè)計(jì)標(biāo)準(zhǔn)教程
已累計(jì)誕生 726 位幸運(yùn)星
發(fā)表評論 為下方 5 條評論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓