快收藏！15 款 UI 设计常用的等宽英文字体

当界面按钮中字体款式发生变化时，整个界面也会发生很大的变化，甚至能够说是杂乱。等宽字体（Uniwidth）便是处理这一问题的绝佳办法。它是一种文字规划风格，指一切的字符都占有相同宽度，字距离也相同，因而为咱们省去了许多的费事。作者文章中为咱们推荐了 15 款非常棒的等宽字体，每一款字体都进行了简要的讲解和分析，最重要的是还一起供给了获取的途径！让咱们一起来跟从读者获取这 15 款精巧的等宽字体吧~

作为一个网页 / 界面 / 视觉规划师我常常与标签状况打交道。选中，未选中，激活，未激活，可用，不可用…这一系列不同的状况揭示了一个规划原则：永久不要将颜色作为仅有的提示，文本粗细一般是我的首选处理方案。但若你曾经运用过精确规划的界面，那么你就会知道，当从惯例标签切换为粗体标签时，整个界面中的标签会变形地像弹球游戏的妨碍相同，非常令人懊丧。

处理这个问题的诀窍便是 —— 统一（uniwidth）字体，有时也称为 “等宽”，“双面” 或 “多重” 字体。

官方对这个字体的界说是：等宽字体，也称为非份额字体， 等宽字体是一种文字规划风格，指一切的字符都占有相同宽度，字距离也相同（例如，大写字母 A 与小写字母 w 或 € 欧元符号具有相同的宽度）。等宽字体一般用于打字机，或计算机代码。

在 IBM Plex Mono 字体中，每个字母都具有相同的宽度

浅显来说，等宽字体是按份额隔开的字体，因而字符间隙巨细不同、字符粗细不同，但却都占有相同的空间。也便是说不管字符被设置为多大的粗细，都永久不会改变整个界面的文本长度或导致文本重排。

一般情况下，等宽字体的字母在不同的字体粗细下具有不同的宽度，但占有相同的空间。

尽管等宽字体在海报等静态规划中或许能规划出一些很有创意的排版，但对于界面规划而言他的作用肯定是惊人的，因为界面规划往往只需要很小的改动就能够处理整个页面的问题。例如，更改 Hover 状况下单个菜单项的款式一般会导致整行宽度的跳动，若运用了等宽字体能够轻松处理这样的问题。

运用等宽字体（下）能够轻松地为交互式文本元素设置动画作用，而不会影响周围的布局。

在规划不同状况时交互规划师会运用多种不同的变化特点进行区别，这就需要代码的辅助插入很多允许在不同的粗细和字体之间进行滑润的插值 ，而有了等宽字体就会省去许多费事。

运用等宽字体是平面规划中常见的手法，因而能够找到许多关于等宽字体的资源不足为奇了。到目前为止，我找到了两个搜集等宽字体的资源包：Identifont 的“等宽字体”列表和 David Sudweeks 自 2015 年以来的“ 等宽字体”集合。

微软专门为程序员发布的一款新的固定宽度字体：

考虑到界面和网页规划的特殊需求以及近年来可变字体的激增，我希望在不久的将来能看到更多的等宽字体。

接下来为大家罗列一些我最近收拾的等宽字体，以及获取渠道。

字体 1：Recursive by Arrow Type

网站链接：www.recursive.design

Recursive 是一款可变字体，其特征为“多功用性，可操纵性和表现力”。Recursive 有等比和等宽两种版别，均可在四个特点（字重，曲度，斜度和连笔）上对字体进行调控，例如曲度的调整能够发生柔和的曲线笔触，为本来严厉的字体增添了趣味。Recursive 支撑多种根据拉丁语的言语，包含越南语，它还带有一组扩展表明，包含：钱银，符号，分数和箭头。

Recursive 可从 Google Fonts 或 Github 和开源下载。

来历: Arrow Type

字体 2：PT Root UI by Paratype

网站链接：www.paratype.com/fonts/pt/pt-root-ui

PT Root UI 是一款现代无衬线字体，有四种字重（Light, Regular, Medium, Bold）。PT Root UI 专为屏幕，界面和网站而规划。它支撑多种言语，包含拉丁文和西里尔字母（包含亚洲拓宽库），并带有表格局数字[1]，钱银符号，分数和索引，以及许多箭头和其他方式。

( [1] 表格局数字（Tabular Figures）是指每个表格数字都有相同的宽度。这种统一的距离使他们能够在表格、价目表、财务报表和其他数字栏中垂直对齐。因而，数字 1 将与其他每个数字(包含 8）具有相同的宽度。）

表格局数字

能够通过 Paratype 网站上的 SIL Open Font License（OFL）免费下载 PT Root UI。

来历: Paratype

字体 3：Golos UI by Paratype

网站链接：www.paratype.com/fonts/pt/golos-ui

同样是 Paratype 出品的字体，Golos Ui 有三种字体粗细（Regular、Medium、Bold），也可用作可变字体。Golos UI 全体方式上与 PT Root UI 相似，但份额略有缩小。它能支撑拉丁文扩展和西里尔文（包含西里尔文亚洲），并带有表格局数字、钱银符号、分数和指数，以及箭头符号等拓宽库。

Golos UI 可在 Paratype 网站上运用 SIL 敞开字体答应证（OFL）免费下载。

来历: Paratype

字体 4：Grandstander by Etcetera Type Company

网站链接：www.etceteratype.co/grandstander

Grandstander 是一款风趣的无衬线可变字体，其创意来自儿童读物，以此“招引年青人和老年人”。字母呈现曲折且略微膨胀状况，使其具有漫画般的美感，Grandstander 有九种字重（从 Thin 到 Black），并有匹配的斜体，可变字体款式有两种：“字重” 和 “歪斜”。它支撑 “拉丁语系规模内的多种言语”，并包含表格局数字，以及分数，风格化字体[2] 和书法的方式。

（[2] 风格化字体（Stylistic Alternates）通过规划供给各种艺术作用的一种字体，款式化字体给予字母一个略微更生动和非正式的外观，然后供给更多的丰厚风趣的排版。）

风格化字体

可通过 OFL（敞开字体答应）在 Google 字体和 Github 上免费下载 Grandstander。

来历: ETC

字体 5：Angus by Black Foundry

网站链接：black-foundry.com/fonts/angus

安格斯（Angus）是一款现代的无衬线字体，字体末端通过圆角处理，具有等距的美学作用。安格斯（Angus）有五种字重（从 Light 到 Extrabold ），并有匹配的斜体。安格斯（Angus）支撑拉丁文字集，包含老式和表格局数字，分数和索引，连字和箭头。

能够从 Black Foundry 的网站上购买安格斯字体。

来历：Black Foundry

字体 6：Halvar and Halvar Stencil Complete by TypeMates

网站链接：www.typemates.com/fonts/halvar-and-stencil-complete

Halvar 是一个庞大的字体系统，共有 162 种款式。Halvar 和 Halvar Stencil 有三种字体宽度（Wide, Normal & Condensed）和 9 种字重（从 Hairline 到 Black ），以及两个斜体版别（Slanted & SuperSlanted)）。Halvar 字体有夸大的份额和构造方式，带着工程师般的严谨又带有一丝荒诞的原始魅力。Halvar 支撑扩展的拉丁文、希腊文和西里尔文，并附带表格局数字、圆形的着重符号、上标、分数以及风格化字体。

Halvar 能够从 TypeMate 的网站上购买，一起该网站也供给预发布的可变体。

来历: TypeMates

字体 7：Service Gothic by HEX

网站链接：hex.xyz/Service_Gothic

Service Gothic 是一款正在开发中的可变字体，当时仅有大写字母的字体库。Service Gothic 包含 6 个字重，从 Thin 到 Bold。

能够从 Future Fonts 购买 Service Gothic 的初始发行版。

材料来历：未来字体

字体 8：Urby & Urby Soft by TypeMates

网站链接：www.typemates.com/fonts/urby

Urby Collection 旨在 “将字符与技能风格相结合”。乌比（Urby）及柔体乌比（Urby Soft）有五种字重（从 Thin 到 Black），两者能够交换运用，因为两个系列的字重都是相同的。Urby Collection 供给扩展的拉丁言语支撑，包含表格局数字，上标和下标，分数，序数以及各种有用的装修符号和几何形状。

可在 TypeMates 网站上购买 Urby Collection。

材料来历：TypeMates

字体 9：Geso by Finaltype

网站链接：finaltype.de/de/projekte/geoso

Geso 是具有几何感的无衬线字体。该字体有 9 种字重（从 Thin 到 Heavy），并有匹配的斜体，每种款式均具有相同的宽度（如下图所示）。Geso 支撑扩展的拉丁文字集，并附带很多复杂的图形，上标和下标以及分数系统。例如，难以捉摸的德国首都字符 和一组风趣的自界说表情符号。

能够从 FrontSpring 网站上购买 Geso。

材料来历：Finaltype

字体 10：FF Kaytek family by FontFont

网站链接：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）。“Headline” 和 “Rounded” 款式是相得益彰的，他们的外观比 Slab 和 Sans 更为紧凑。FF Kaytek 的不同款式和字重宽度均相同。

FF Kaytek 字体宗族支撑扩展的拉丁文字集，并支撑老式数字[3]，分数，上标和下标。

（[3] 老式数字（Old-style Figures 也称为 OsF 数字)规划有升序和降序，其特征和份额与字体的小写字母兼容。其也被称为悬挂图形，一般用于文本设置，因为它们与小写字母的光流和节奏很好地交融。老式数字能够规划成份额和表格版别。）

老式数字

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

材料来历：MyFonts

字体 11：Bahnschrift by Saja Typeworks

网站链接：docs.microsoft.com/en-us/typography/font-list/bahnschrift

Bahnschrift 是 DIN 字体的数字化方式，应用在德国的路标和其他技能中。Bahnschrift 是微软的第一款可变字体，它有两个款式特点：字重和宽度，其间包含五种字重和三种宽度。Bahnschrift 支撑拉丁文（包含越南语）、西里尔文和希腊文扩展。

Bahnschrift 是 Windows 10 操作系统自带字体。

材料来历：微软

字体 12：FF Scala family by FontFont

网站链接：scalafont.com

FF Scala 系列是印刷排版的经典之作。由 Martin Majoor 于 1991 年规划的老式衬线 FF Scala 扩展为根据通用架构的无衬线体 FF Scala Sans。这两个系列都有两种粗细（Regular and Bold）加上匹配的斜体，以及两种款式。FF Scala 系列支撑扩展拉丁语，包含旧款式和表格局数字、上标和下标、分数、序数和一组标志性的装修指针。

FF Scala 系列可从 FontShop 网站购买。

来历: FontShop

字体 13：Minrale by 205TF

网站链接：www.205.tf/look/minerale

Minrale 是一款在规划上非常独特的可变字体，在字干上粗细不同相交于字体中部。Minrale 字体有 5 种字重（从 Extralight 到 Black）加上匹配的斜体，一切款式都是等宽的（包含斜体），其间字重最细时文字全体最明晰醒目。Minrale 支撑扩展的拉丁文字集，包含等份额老式数字，表格，表格局数字，上级/下级，序数，风格化字体和箭头号。

能够从 205TF 的网站上购买 Minrale。

来历：205TF

字体 14：Climate Crisis Font by Helsinki Sanomat

网站链接：kampanjat.hs.fi/climatefont/index.html

The Climate Crisis Font 是一种意义特殊的可变字体，旨在阐明气候变化的紧迫性。字体的字重根据国家冰雪数据中心以及 IPCC 供给的猜测数据，最粗的字体重量代表了 1979 年北极海冰的最小规模，而最细的字体代表了对 2050 年最小规模的猜测。

气候危机字体（Climate Crisis Font）支撑根本的拉丁语库，并具有有限的上标和小数部分选择。

根据 Helsigin Sanomat 的 SIL 敞开字体答应（ OFL ），能够免费下载 Climate Crisis 字体。

The Climate Crisis Font 的字符具有一致的字宽，但跟着字重变化逐步 “熔化”，引起人们对气候变化的注重。

材料来历：赫尔辛基萨诺玛特

字体 15：Handjet by Rosetta Type

网站链接：www.rosettatype.com/Handjet

Handjet 是一种实验性的，根据网格的三轴字体。Handjet 包含 23 种网格形状（例如正方形，三叶草，心形和大头针），它们的巨细能够更改，然后发生不同的字体粗细。正如 Rosetta Type 的预期，Handjet 支撑多种言语：阿拉伯语，亚美尼亚语，西里尔字母，希腊语，希伯来语和扩展拉丁语，而且它还包含分数和风趣的装修符号，用这些符号能够构建出狐狸、狗等等形象。

你能够从 Rosetta Type 网站以 0 欧元的价格购买 Handjet。

材料来历：Rosetta Type

要点

在不影响文本占用空间的情况下，更改其粗细和款式是一项对界面具有深远意义的功用，它不仅能够为规划人员和开发人员节约一些费事，还为规划开辟了新的可能性。跟着越来越多的可变字体发布，我很快乐能在我的界面规划工具包中增加更多的等宽字体。你要不要一起尝试呢？

拓宽材料

如果你跳过了上述文章的内容，能够在以下出色的资源中获取：

• 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翻译情报局」