▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 6586 字，預(yù)計(jì)閱讀 17 分鐘
TCC 情報(bào)局的第 66 篇干貨分享
2021 年的第 54 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是張聿彤。當(dāng)界面按鈕中字體樣式發(fā)生變化時(shí)，整個(gè)界面也會(huì)發(fā)生很大的變化，甚至可以說(shuō)是雜亂。等寬字體（Uniwidth）就是解決這一問(wèn)題的絕佳辦法。它是一種文字設(shè)計(jì)風(fēng)格，指所有的字符都占有相同寬度，字間距也一樣，因此為我們省去了很多的麻煩。作者文章中為我們推薦了 12 款非常棒的等寬字體，每一款字體都進(jìn)行了簡(jiǎn)要的講解和分析，最重要的是還同時(shí)提供了獲取的途徑！讓我們一起來(lái)跟隨讀者獲取這 12 款精美的等寬字體吧~

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

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

官方對(duì)這個(gè)字體的定義是：等寬字體，也稱為非比例字體，等寬字體是一種文字設(shè)計(jì)風(fēng)格，指所有的字符都占有相同寬度，字間距也一樣（例如，大寫(xiě)字母 A 與小寫(xiě)字母 w 或 € 歐元符號(hào)具有相同的寬度）。等寬字體通常用于打字機(jī)，或計(jì)算機(jī)代碼。

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

通俗來(lái)說(shuō)，等寬字體是按比例隔開(kāi)的字體，因此字符間隙大小不同、字符粗細(xì)不同，但卻都占據(jù)相同的空間。也就是說(shuō)無(wú)論字符被設(shè)置為多大的粗細(xì)，都永遠(yuǎn)不會(huì)改變整個(gè)界面的文本長(zhǎng)度或?qū)е挛谋局嘏拧?/span>

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

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

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

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

使用等寬字體是平面設(shè)計(jì)中常見(jiàn)的手法，因此可以找到很多關(guān)于等寬字體的資源不足為奇了。到目前為止，我找到了兩個(gè)收集等寬字體的資源包：Identifont 的“等寬字體”列表和 David Sudweeks 自 2015 年以來(lái)的“ 等寬字體”集合。

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

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

字體 1：Recursive by Arrow Type

www.recursive.design

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

Recursive 可從 Google Fonts 或 Github 和開(kāi)源下載。

來(lái)源: Arrow Type

字體 2：PT Root UI by Paratype

www.paratype.com/fonts/pt/pt-root-ui

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

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

表格式數(shù)字

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

來(lái)源: Paratype

字體 3：Golos UI by Paratype

www.paratype.com/fonts/pt/golos-ui

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

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

來(lái)源: Paratype

字體 4：Grandstander by Etcetera Type Company

www.etceteratype.co/grandstander

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

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

風(fēng)格化字體

可通過(guò) OFL（開(kāi)放字體許可）在 Google 字體和 Github 上免費(fèi)下載 Grandstander。

來(lái)源: ETC

字體 5：Angus by Black Foundry

black-foundry.com/fonts/angus

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

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

來(lái)源：Black Foundry

字體 6：Halvar and Halvar Stencil Complete by TypeMates

www.typemates.com/fonts/halvar-and-stencil-complete

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

Halvar 可以從 TypeMate 的網(wǎng)站上購(gòu)買(mǎi)，同時(shí)該網(wǎng)站也提供預(yù)發(fā)布的可變體。

來(lái)源: TypeMates

字體 7：Service Gothic by HEX

hex.xyz/Service_Gothic

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

可以從 Future Fonts 購(gòu)買(mǎi) Service Gothic 的初始發(fā)行版。

資料來(lái)源：未來(lái)字體

字體 8：Urby & Urby Soft by TypeMates

www.typemates.com/fonts/urby

Urby Collection 旨在 “將字符與技術(shù)風(fēng)格相結(jié)合”。烏比（Urby）及柔體烏比（Urby Soft）有五種字重（從Thin 到 Black），兩者可以互換使用，因?yàn)閮蓚€(gè)系列的字重都是相同的。Urby Collection 提供擴(kuò)展的拉丁語(yǔ)言支持，包括表格式數(shù)字，上標(biāo)和下標(biāo)，分?jǐn)?shù)，序數(shù)以及各種有用的裝飾符號(hào)和幾何形狀。

可在 TypeMates 網(wǎng)站上購(gòu)買(mǎi) Urby Collection。

資料來(lái)源：TypeMates

字體 9：Geóso by Finaltype

finaltype.de/de/projekte/geoso

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

可以從 FrontSpring 網(wǎng)站上購(gòu)買(mǎi) Geóso。

資料來(lái)源：Finaltype

字體 10：FF Kaytek family by FontFont

www.fontshop.com/superfamilies/ff-kaytek

FF Kaytek 是 “90 年代通信字體的代表”。它是一個(gè)帶有多種樣式的字體家族，包括四種樣式：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ì)有升序和降序，其特征和比例與字體的小寫(xiě)字母兼容。其也被稱為懸掛圖形，通常用于文本設(shè)置，因?yàn)樗鼈兣c小寫(xiě)字母的光流和節(jié)奏很好地融合。舊式數(shù)字可以設(shè)計(jì)成比例和表格版本。）

舊式數(shù)字

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

資料來(lái)源：MyFonts

字體 11：Bahnschrift by Saja Typeworks

docs.microsoft.com/en-us/typography/font-list/bahnschrift

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

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

資料來(lái)源：微軟

字體 12：FF Scala family by FontFont

scalafont.com

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

FF Scala 系列可從 FontShop 網(wǎng)站購(gòu)買(mǎi)。

來(lái)源: FontShop

字體 13：Minérale by 205TF

www.205.tf/look/minerale

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

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

來(lái)源：205TF

字體 14：Climate Crisis Font by Helsinki Sanomat

kampanjat.hs.fi/climatefont/index.html

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

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

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

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

資料來(lái)源：赫爾辛基薩諾瑪特

字體 15：Handjet by Rosetta Type

www.rosettatype.com/Handjet

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

你可以從 Rosetta Type 網(wǎng)站以 0 歐元的價(jià)格購(gòu)買(mǎi) Handjet。

資料來(lái)源：Rosetta Type

要點(diǎn)

Take away

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

15 款 UI 設(shè)計(jì)中不可或缺的等寬英文字體推薦～

本文共 6586 字，預(yù)計(jì)閱讀 17 分鐘
TCC 情報(bào)局的第 66 篇干貨分享
2021 年的第 54 篇

字體 1：Recursive by Arrow Type

字體 2：PT Root UI by Paratype

字體 3：Golos UI by Paratype

字體 4：Grandstander by Etcetera Type Company

字體 5：Angus by Black Foundry

字體 6：Halvar and Halvar Stencil Complete by TypeMates

字體 7：Service Gothic by HEX

字體 8：Urby & Urby Soft by TypeMates

字體 9：Geóso by Finaltype

字體 10：FF Kaytek family by FontFont

字體 11：Bahnschrift by Saja Typeworks

字體 12：FF Scala family by FontFont

字體 13：Minérale by 205TF

字體 14：Climate Crisis Font by Helsinki Sanomat

字體 15：Handjet by Rosetta Type

要點(diǎn)

Take away

拓展資料

Further reading

十個(gè)技巧幫助你設(shè)計(jì)一款在線學(xué)習(xí) APP

這些 色彩心理學(xué)知識(shí)教你如何傳遞信息

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來(lái)難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開(kāi)始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析

15 款 UI 設(shè)計(jì)中不可或缺的等寬英文字體推薦～

本文共 6586 字，預(yù)計(jì)閱讀 17 分鐘TCC 情報(bào)局的 第 66 篇 干貨分享2021 年的 第 54 篇

字體 1：Recursive by Arrow Type

字體 2：PT Root UI by Paratype

字體 3：Golos UI by Paratype

字體 4：Grandstander by Etcetera Type Company

字體 5：Angus by Black Foundry

字體 6：Halvar and Halvar Stencil Complete by TypeMates

字體 7：Service Gothic by HEX

字體 8：Urby & Urby Soft by TypeMates

字體 9：Geóso by Finaltype

字體 10：FF Kaytek family by FontFont

字體 11：Bahnschrift by Saja Typeworks

字體 12：FF Scala family by FontFont

字體 13：Minérale by 205TF

字體 14：Climate Crisis Font by Helsinki Sanomat

字體 15：Handjet by Rosetta Type

要點(diǎn)

Take away

拓展資料

Further reading

本文共 6586 字，預(yù)計(jì)閱讀 17 分鐘
TCC 情報(bào)局的第 66 篇干貨分享
2021 年的第 54 篇