搜索

15 款 UI 设计中不可或缺的等宽英文字体推荐～

TCC翻译情报局

共 7553字，需浏览 16分钟

 · 2021-08-04

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 6586 字，预计阅读 17 分钟
TCC 情报局的 第 66 篇 干货分享
2021 年的 第 54 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。当界面按钮中字体样式发生变化时，整个界面也会发生很大的变化，甚至可以说是杂乱。等宽字体（Uniwidth）就是解决这一问题的绝佳办法。它是一种文字设计风格，指所有的字符都占有相同宽度，字间距也一样，因此为我们省去了很多的麻烦。作者文章中为我们推荐了 12 款非常棒的等宽字体，每一款字体都进行了简要的讲解和分析，最重要的是还同时提供了获取的途径！让我们一起来跟随读者获取这 12 款精美的等宽字体吧~


作为一个网页 / 界面 / 视觉设计师我经常与标签状态打交道。选中，未选中，激活，未激活，可用，不可用...这一系列不同的状态揭示了一个设计原则：永远不要将颜色作为唯一的提示，文本粗细通常是我的首选解决方案。但若你曾经使用过精确设计的界面，那么你就会知道，当从常规标签切换为粗体标签时，整个界面中的标签会变形地像弹球游戏的障碍一样，非常令人沮丧。

解决这个问题的秘诀就是 —— 统一（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：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


要点

Take away


在不影响文本占用空间的情况下，更改其粗细和样式是一项对界面具有深远意义的功能，它不仅可以为设计人员和开发人员节省一些麻烦，还为设计开辟了新的可能性。随着越来越多的可变字体发布，我很高兴能在我的界面设计工具包中添加更多的等宽字体。你要不要一起尝试呢？


拓展资料 

Further reading


如果你跳过了上述文章的内容，可以在以下出色的资源中获取：
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

谢谢你的阅读！


原文：https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7
作者：Lisa Staudinger
译者：郑伊妮
审核：吴鹏飞、李泽慧、张聿彤
编辑：孙淑雅
本文翻译已获得作者的正式授权（授权截图如下）     

往期精选文章：

十个技巧帮助你设计一款在线学习 APP

这些色彩心理学知识教你如何传递信息

案例研究｜康奈尔大学副业社区网站设计

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

网页设计师能从日式美学中学到什么？

案例研究｜一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集，这里有一份完整的指导手册

如何做好用户体验项目？从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求：回归本质，打磨信息架构

TCC 视野｜2021 年用户体验设计趋势分析


- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～
添加小助手微信，备注「社群」，即可加入读者群。
浏览 360
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
盘点Lombok的几个骚操作，你绝对没用过！
👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目 2.0 版本完结啦， 演示链接：http://116.62.199.48/ ，新项目正在酝酿中
小哈学Java
0
堪称最优秀的Docker可视化管理工具——Portainer你真的会用吗？
来源：blog.csdn.net/shark_chili3007/article/details/123366179👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目
小哈学Java
0
JS的这些新特性，你都用过么？
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群作为一门不断演进的语言，JavaScript每年都会引入新特性。这些特性的加入，能够帮助我们编写更加简洁、高效、易于维护的代码。然而，并非所有新特性
程序员成长指北
1
【深度学习】人人都能看懂的LSTM
熟悉深度学习的朋友知道，LSTM是一种RNN模型，可以方便地处理时间序列数据，在NLP等领域有广泛应用。在看了台大李宏毅教授的深度学习视频后，特别是介绍的第一部分RNN以及LSTM，整个人醍醐灌顶。本文就是对视频的记录加上了一些个人的思考。0. 从RNN说起循环神经网络（Recurrent Neur
机器学习初学者
0
我发现 Lombok的几个骚操作，哈哈好用
大家好，我是小富～前言本文不讨论对错，只讲骚操作。有的方法看看就好，知道可以这么用，但是否应用到实际开发中，那就仁者见仁，智者见智了。一万个读者就会有一万个哈姆雷特，希望这篇文章能够给您带来一些思考。耐心看完，你一定会有所收获。@onX例如 onConstructor, oMet
程序员内点事
0
测试新人，如何快速上手一个陌生的系统！
大家好，我是狂师！作为刚入行不久的测试新人，面对一个陌生的系统时，可能会感到有些手足无措。面对一个全新的系统系统，如何快速上手并展开有效的测试工作是一个重要的挑战。本文将探讨测试新人如何通过一系列步骤和策略，快速熟悉并掌握新系统的测试要点，从而提高测试效率和质量。本文旨在为测试新手提供一份指导，帮助
测试开发技术
0
如何计算数据中心的冷却需求？
  今日分享  【导读】数据中心的冷却要求受多种因素影响，包括设备的热量输出、占地面积、设施设计和电气系统功率额定值等等……众所周知，环境因素会严重影响数据中心设备。过多的热量积聚会损坏服务器，可能导致其自动关闭。经常在高于可接受的温度下运行服务器会缩短其使用
数据中心运维管理
0
多人同时导出 Excel 干崩服务器！新来的阿里大佬给出的解决方案太优雅了！
点击关注公众号，Java 干货及时推送↓推荐阅读：面试辅导，我们出大成果了！来源：juejin.cn/post/7259249904777838629前言 业务诉求：考虑到数据库数据日渐增多，导出会有全量数据的导出，多人同时导出可以会对服务性能造成影响，导出涉及到mysql查询的io操作，
Java技术栈
1
知乎热议：博士生最好的状态是什么？
链接：https://www.zhihu.com/question/447412618编辑：深度学习与计算机视觉声明：仅做学术分享，侵删作者：JackieLeehttps://www.zhihu.com/question/447412618/answer/2963078772最好状态比较难说，最开心
机器学习初学者
0
什么样的冷却方法适合数据中心运营?
​冷却数据中心的最简单方法是安装空气交换器，通过服务器室生成冷空气。但是，如果想要节省资金，至少从长远来看，更好的方法可能是在每个机架上安装空气交换器，并使用它们为单个机架的服务器降温。"后机架冷却"，与数据中心中更为传统的空气冷却系统相比，特别是在能源效率方面，其具有一些优势。冷却数据中心的最简单
数据中心运维管理
0
点赞
评论
收藏
分享

手机扫一扫分享

举报