快收藏！15 款 UI 设计常用的等宽英文字体
扫一扫 
扫一扫 
扫一扫 
扫一扫 当界面按钮中字体样式发生变化时，整个界面也会发生很大的变化，甚至可以说是杂乱。等宽字体（Uniwidth）就是解决这一问题的绝佳办法。它是一种文字设计风格，指所有的字符都占有相同宽度，字间距也一样，因此为我们省去了很多的麻烦。作者文章中为我们推荐了 15 款非常棒的等宽字体，每一款字体都进行了简要的讲解和分析，最重要的是还同时提供了获取的途径！让我们一起来跟随读者获取这 15 款精美的等宽字体吧~
作为一个网页 / 界面 / 视觉设计师我经常与标签状态打交道。选中，未选中，激活，未激活，可用，不可用...这一系列不同的状态揭示了一个设计原则：永远不要将颜色作为唯一的提示，文本粗细通常是我的首选解决方案。但若你曾经使用过精确设计的界面，那么你就会知道，当从常规标签切换为粗体标签时，整个界面中的标签会变形地像弹球游戏的障碍一样，非常令人沮丧。 解决这个问题的秘诀就是 —— 统一（uniwidth）字体，有时也称为 “等宽”，“双面” 或 “多重” 字体。 官方对这个字体的定义是：等宽字体，也称为非比例字体， 等宽字体是一种文字设计风格，指所有的字符都占有相同宽度，字间距也一样（例如，大写字母 A 与小写字母 w 或 € 欧元符号具有相同的宽度）。等宽字体通常用于打字机，或计算机代码。
在 IBM Plex Mono 字体中，每个字母都具有相同的宽度 通俗来说，等宽字体是按比例隔开的字体，因此字符间隙大小不同、字符粗细不同，但却都占据相同的空间。也就是说无论字符被设置为多大的粗细，都永远不会改变整个界面的文本长度或导致文本重排。
通常情况下，等宽字体的字母在不同的字体粗细下具有不同的宽度，但占据相同的空间。 虽然等宽字体在海报等静态设计中也许能设计出一些很有创意的排版，但对于界面设计而言他的效果绝对是惊人的，因为界面设计往往只需要很小的改动就可以解决整个页面的问题。例如，更改 Hover 状态下单个菜单项的样式通常会导致整行宽度的跳动，若使用了等宽字体可以轻松解决这样的问题。
使用等宽字体（下）可以轻松地为交互式文本元素设置动画效果，而不会影响周围的布局。 在设计不同状态时交互设计师会运用多种不同的变化属性进行区分，这就需要代码的辅助插入大量允许在不同的粗细和字体之间进行平滑的插值 ，而有了等宽字体就会省去许多麻烦。 使用等宽字体是平面设计中常见的手法，因此可以找到很多关于等宽字体的资源不足为奇了。到目前为止，我找到了两个收集等宽字体的资源包：Identifont 的“等宽字体”列表和 David Sudweeks 自 2015 年以来的“ 等宽字体”集合。 微软专门为程序员发布的一款新的固定宽度字体： 免费使用！微软专门为程序员开发了这款等宽字体！微软在去年的开发者大会发表了一款新的固定宽度字体（Monospaced Font），命名为 Cascadia Code，专为全新的 Windows 终端机（Windows Terminal）所设计，新版终端机工具拥有更新、更现代化的用户接口、功能丰富等特性，包含在用户社群经常被请求的各种 阅读文章 >考虑到界面和网页设计的特殊需求以及近年来可变字体的激增，我希望在不久的将来能看到更多的等宽字体。 接下来为大家列举一些我最近整理的等宽字体，以及获取渠道。 字体 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：Geóso by Finaltype网站链接：finaltype.de/de/projekte/geoso Geóso 是具有几何感的无衬线字体。该字体有 9 种字重（从 Thin 到 Heavy），并有匹配的斜体，每种样式均具有相同的宽度（如下图所示）。Geóso 支持扩展的拉丁文字集，并附带大量复杂的图形，上标和下标以及分数系统。例如，难以捉摸的德国首都字符 ß 和一组有趣的自定义表情符号。 可以从 FrontSpring 网站上购买 Geóso。
资料来源：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：Minérale by 205TF网站链接：www.205.tf/look/minerale Minérale 是一款在设计上十分独特的可变字体，在字干上粗细不同相交于字体中部。Minérale 字体有 5 种字重（从 Extralight 到 Black）加上匹配的斜体，所有样式都是等宽的（包括斜体），其中字重最细时文字整体最清晰醒目。Minérale 支持扩展的拉丁文字集，包括等比例旧式数字，表格，表格式数字，上级/下级，序数，风格化字体和箭头等。 可以从 205TF 的网站上购买 Minérale。
来源：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 要点在不影响文本占用空间的情况下，更改其粗细和样式是一项对界面具有深远意义的功能，它不仅可以为设计人员和开发人员节省一些麻烦，还为设计开辟了新的可能性。随着越来越多的可变字体发布，我很高兴能在我的界面设计工具包中添加更多的等宽字体。你要不要一起尝试呢？ 拓展资料如果你跳过了上述文章的内容，可以在以下出色的资源中获取：
欢迎关注作者微信公众号：「TCC翻译情报局」
手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
