typographyMay 3, 202615 min read

展示字体选择:如何挑出真正合适的标题字体

一份实战的展示字体选择指南。包含四问框架、覆盖现代展示用途的七大类别、与正文字体的搭配规则,以及能尽早揪出错误选择的匹配测试。

By Boone
XLinkedIn
Voxel display type stage with a tall coral monolith carrying a display A glyph and three small body-type slabs to the right

展示字体选择:如何挑出真正合适的标题字体

展示字体是最响亮的那个选择

展示字体决定了品牌在每一个标题级时刻的性格,而其他大多数字体决策都会跟着它走。它是读者注意到的第一件事,是为整个系统里每一个标题、主视觉和引文染色的基调。选对了,它能用上好几年。选错了,它会成为创意总监在第二年注意到、之后再也无法视而不见的那个东西。

大多数设计师凭感觉选字体。他们翻字体厂商的目录,找到一个在情绪板里放大到 96 像素看起来不错的字体,然后就上线了。这招一直管用,直到系统要扩展,直到品牌走向成熟,直到这套字体要在 32 像素下承载产品文案。凭感觉的方法撑不住,而只靠感觉选字体的设计师,往往会在十八个月后字体不再适配产品时,把预算烧在一次改版上。

展示字体与正文字体,真正的区别

展示字体是为大字号设计的,在这里,对比、细节和个性才派得上用场。正文字体则是为小字号设计的,目的是隐身,用个性换取长距离阅读时的可读性。

这种设计差异是真实且可衡量的。展示字体的粗细笔画对比更高,光学细节更突出,字脚和曲线也更有表现力。把展示字体设成 12 像素,那些细节就成了噪点。把正文字体设成 96 像素,读起来就像一个被浪费的机会。

一些现代字体家族通过光学字号变体来弥合这个差距,但底层事实不变:展示字体为存在感而生,正文字体为耐力而生。把其中一种当成另一种来用,是生产环境中最常见、也最显眼的字体错误之一。如果你想深入技术层面,生产环境中的可变字体讲到了可变轴语境下的光学字号。


四个选择问题

声音、调性、字号范围、寿命。任何候选展示字体过一遍这四问,糟糕的选择很快就会掉出来。这不是品味测试,而是一套诊断,每个问题都会淘汰那些不适合字体实际使用环境的候选。

这四个问题按顺序起作用。一款字体可能通过了声音这关,却栽在寿命上。另一款可能四关全过,却在字号范围上露怯。这套框架找的不是最漂亮的字体,而是能在真实系统中活下来的那一个。

问题一:声音是什么

声音问题是在问,品牌是温暖、技术、编辑感、表现力强还是克制,而字体必须落在同一个坐标上。字体在开口之前就已经在沟通了。字形、笔画粗细、字脚,读者看到第一个词时,这一切都已经在说话。

带有柔和光学细节的人文主义无衬线体传达温暖、亲切、有人的手感。间距紧凑的几何怪诞体传达精确、系统、规模。高对比的现代衬线体传达权威、智识、匠心。这些不是字体设计师发明的规则,而是读者从几十年的设计语境中吸收来的模式,展示字体的声音一旦错位,就会在一个多数客户说不清、却立刻能感觉到的层面上破坏品牌信任。

问题二:调性是什么

调性是指品牌被允许有多大声。一个高端金融产品不能用和音乐 App 一样的展示字重,而且调性不等于声音:品牌可以温暖而安静,也可以技术感十足而响亮。

展示字体分布在一条响度光谱上,一端是隐形的权威(安静的现代衬线体),另一端是无法忽视的宣言(表现型展示体,带花体、镂空切割或极端比例)。正确的调性问题不是“我们想说什么”,而是“我们被允许说得多大声”。大多数 B2B 和 SaaS 品牌应该落在中等偏安静到中等偏响亮之间。高端品牌几乎总是比设计师最初想要的更安静。


问题三:字号范围是什么

在 96 像素下唱得响亮的字体,到了 32 像素可能直接崩塌,而字号范围决定了你需要的是光学字号轴,还是两款独立的字体。这是生产约束,不是审美偏好。

如果展示字体只承担 80 像素及以上的主视觉标题,几乎任何强势的展示字体都能撑住。一旦降到 32 到 40 像素,用于章节标题、副标题或卡片标题,选择标准就变了。要找带有光学字号范围的展示字体,或者规划第二款字体来处理中间地带。在没有光学字号轴的情况下,把高对比现代衬线体用在 28 像素,就是一个等着被提 bug 的可读性问题。

问题四:寿命是什么

展示字体必须经得起变老,而潮流化的细节背后有一笔没人谈论的改版债务。极度拉伸、极度压缩、极度镂空的展示字体,有趣的时间大约是十八个月,然后它们就成了上一次品牌重塑里那个令人尴尬的 logo。

寿命问题不是“这款字体是否永恒”,因为没有什么是永恒的。它问的是“这款字体最具辨识度的细节,半衰期有多长”。极端横向压缩的字体,一旦另一种设计潮流接管,立刻就会显得过时。比例均衡、个性温和的怪诞体可以用上十年,而不会让人觉得它是某年某月设计出来的。潮流化的展示字体就是一场等着发生的改版,而大多数品牌还负担不起下一次。


七大展示字体类别

几何怪诞体、人文主义无衬线体、现代衬线体、过渡衬线体、展示手写体、表现型展示体、等宽展示体。大多数现代品牌工作都落在这七类之一,知道候选字体属于哪一类,你在设下第一个字之前就能知道它为什么而优化。

类别优化方向常见风险示例字体
几何怪诞体科技、产品、SaaS没有温暖的系统就显得冰冷Inter Display, Söhne, GT America
人文主义无衬线体消费品、编辑大规模使用时缺乏权威感Freight Sans, Aktiv Grotesk
现代衬线体高端、编辑32px 以下很脆弱Tiempos, GT Sectra, Lyon Display
过渡衬线体机构、法律读起来像银行Chronicle Display, Söhne Schmal
展示手写体奢侈品、时尚快速阅读时难以辨认Canela, Cormorant
表现型展示体娱乐、文化半衰期只有十八个月镂空切割、极端可变新奇款
等宽展示体技术、近代码领域冰冷,新奇感有天花板Geist Mono, Pitch Display

几何怪诞体,现代的默认选项

Inter Display、Söhne、GT America 这样的几何怪诞体是科技和产品品牌的默认选择,而且老得很体面,因为它们拒绝给自己打上时代烙印。均衡的比例和中性的构造读起来很能干,却不宣告任何一个设计潮流。

风险在于冰冷。几何怪诞体如果没有谨慎的搭配、字号和字重选择,就会变成一堆毫无区分度、带着硅谷味的文字。这款字体很宽容,但它本身并不有趣。字体拒绝承担的情感工作,必须由它周围的系统来完成。

现代衬线体回来了

Tiempos、GT Sectra、Lyon Display 这样的现代衬线体是编辑型品牌和高端产品定位的支柱,它们读起来比看起来更聪明。高对比的笔画能立刻与大多数产品设计里怪诞体占主导的基线区分开来。

风险在于脆弱。高对比衬线体需要仔细的光学字号管理,在 32 像素以下会迅速崩坏。它们还带有调性上的含义:现代衬线体天生就是高阶的,如果产品撑不起这种调性,字体就会许下一个虚假的承诺。这一类别与对的品牌匹配时寿命极佳,但硬套在没有资格的产品上就像是在 cosplay。想进一步了解品牌如何建立持久的字体识别,请看品牌识别案例。


表现型展示体只适合短期使用

表现型展示字体最有趣也最危险,只有当系统的其余部分足够安静时,它们才配得上自己的位置。它们拥有最大的个性和最小的灵活性。

错误在于把表现型展示字体当成主系统字体。它不是。它是用于特定时刻的专用工具:一次战役、一次产品发布、只有一个标题的主视觉区。当表现型展示体碰到所有东西时,就没有什么东西读起来是有表现力的了。对比才是关键。如果你在挑选表现型字体,问题四的寿命问题是最重要的过滤器。


想要一款第一天就适配品牌、第五年依然适配的展示字体吗? Brainy 用方法挑选展示字体,跑匹配测试,交付的搭配比它们所属的品牌老得还好。雇用 Brainy。


与正文字体的搭配规则

是展示字体挑正文字体,而不是反过来,三条规则是:角色上有对比,感觉上要一致,字行节奏上要共享。

角色上有对比意思是,正文字体不应该与展示字体争夺个性。如果展示字体是表现型的,正文就应该是中性的。如果展示字体是现代衬线体,正文就应该是一款简单易读的怪诞体。两款有主见的字体争夺同一份注意力,是初级字体决策最清晰的信号之一。

感觉上一致意思是,即使两款字体看起来不同,它们也应该共享某种底层的审美。用 Söhne 做展示、Freight Text 做正文行得通,因为两者都有温暖、周到的比例。Inter Display 搭配装饰性手写体,则像是两个不同品牌的样式表撞在了一起。

字行节奏上共享意思是,两款字体应该有兼容的 x 高度和光学字号,让文字能在不同场景中舒适落位,而无需不停地重新缩放。这是大多数设计师跳过、直到布局在生产环境中崩掉才想起来的规则。


体素概念图,展示三条展示字体与正文字体的搭配规则:角色对比、感觉一致、字行节奏共享
体素概念图,展示三条展示字体与正文字体的搭配规则:角色对比、感觉一致、字行节奏共享

五分钟匹配测试

在确定一款展示字体之前,跑一遍这个测试:渲染品牌名、渲染一条标题、渲染一句引文、渲染一个数字,再用三种字号渲染。

品牌名渲染。 用候选展示字体把品牌名设成 64 像素。它撑得住品牌的分量吗?它看起来属于这家公司,还是另一家?个性应该无需额外语境就能落地。

标题渲染。 把品牌内容里的一条真实标题设成 48 像素。不是 lorem ipsum,而是真实的标题。如果这款字体承载不了带有实际含义的真实文字,测试立刻就破功了。

引文渲染。 把一句话设成 32 到 36 像素,这正是展示字体开始吃力的区间。如果对比保持住了,个性也没有崩塌,它就能熬过生产环境。

数字渲染。 用这款字体设一个价格、一个日期或一个统计数据。数字比其他任何字符集都更快暴露一款字体的品质。糟糕的数字说明这款字体不值得用。

三种字号。 把同一行文字分别渲染成 96、48 和 28 像素。即使细节层次变了,这款字体在每个字号下也应该传达同样的个性。如果个性在 28 像素处崩了,你就需要光学字号变体或者换一款字体。

五项全过,这款字体就值得做一整套系统。有一项没过,说明你足够早地发现了生产问题,避免了为它付两次钱。这个测试只要五分钟。定稿之前跑一遍。


体素概念图,展示五步匹配测试:品牌名、标题、引文、数字和三种字号渲染,用于在定稿前评估展示字体
体素概念图,展示五步匹配测试:品牌名、标题、引文、数字和三种字号渲染,用于在定稿前评估展示字体

七个选对展示字体且老得很好的品牌

Stripe Press、Linear、Apple、Vercel、Notion、Substack 和 Figma 各自选了经得起时间考验的展示字体,这些规律值得研究。

Stripe Press 以 Söhne 作为主展示字体。它行得通,因为 Söhne 足够温暖,避开了会毁掉编辑型品牌的那种冷冰冰的读感,又足够精确,能承载 Stripe 的权威调性。这套搭配五年下来依然稳固。

Linear 以紧凑的字距使用 Inter Display,这几乎是默认的几何怪诞体选择,但落地执行的纪律无可挑剔。即使在很小的产品 UI 字号下,这款字体也从不出问题,因为 Inter 从第一天起就是为这个范围打造的。

Apple 把带光学字号切换的 SF Pro Display 作为一套系统来使用。这款字体在最好的意义上是隐形的:它传达了 Apple 的精确,却不自我宣告。寿命基本上是无限的,因为这款字体是一项受控的专有资产。

Vercel 迁移到了自家的 Geist,这是唯一能保证寿命的策略:拥有这款字体。Geist 承载了技术调性,却没有泛用几何怪诞体的冰冷,而且没有其他品牌能宣称拥有它。

Notion 在部分主视觉和编辑场景中使用 Lyon Display。Lyon 是一款高对比的旧式衬线体,立刻与生产力工具品类里怪诞体占主导的基线区分开来,给了 Notion 一种产品配得上的知性调性。

Substack 在各刊物页头使用 Söhne 作为主展示层。这款字体传达出编辑的严肃感,同时在系统必须大幅伸缩的邮件正文字号下依然可读。

Figma 在品牌和营销场景中使用 Whyte。Whyte 的怪诞体构造略带柔化,读起来是亲切又高级,这与 Figma 作为协作型专业工具、而非纯技术工具的定位相吻合。


三个没选对的品牌

一些品牌选了重度跟风的展示字体,老得很难看,它们引发的改版是警示故事。

最常见的失败模式是:在某个设计潮流期,选了极度压缩的表现型展示字体,当时那种压缩看起来很前卫。十八个月后,这种压缩随处可见,品牌看起来像个追随者,而不是标杆。由这种模式引发的改版代价高昂、扰乱运营,而且只要在定稿前先跑一遍寿命问题就能避免。

第二种模式是展示字体的调性与产品调性错配。一个消费级健康品牌选用高对比现代衬线体来暗示奢华,就是在许下产品体验无法兑现的调性承诺。字体说一套,UX 说另一套,用户两边都不信。

第三种模式是为某次战役选的展示字体泄漏进了品牌系统。一款本来从未打算成为永久品牌字体的限定用途表现型字体,因为没有人明确记录这种区别,最终变成了品牌字体。等问题显现时,它已经进了样式指南、印刷物料和十几个数字模板。三者的共同点是:寿命和调性两个问题被跳过了,不是因为设计师不懂,而是紧张的时间表和一份引人入胜的情绪板让跳过显得合理。


FAQ

展示字体到底是什么?

展示字体是为大字号设计的,通常是 36 像素及以上,在这里,对比、个性和光学细节才有用武之地。它有别于正文字体,后者是为阅读字号下的易读性设计的。大多数现代品牌两者都用:展示字体用于标题和主视觉时刻,正文字体用于正文和 UI 文字。

展示和正文可以只用一款字体吗?

有时可以。少数字体的光学字号范围足够宽,能胜任两种角色。Inter 是产品设计中最常见的例子。但大多数展示字体不是为小字号可读性而造的,大多数正文字体也不是为大字号存在感而造的。对于精简产品 UI 之外的任何场景,双字体系统通常是正确的选择。

展示字体该花多少钱?

范围从零成本的开源字体(如 Inter Display),到 Söhne 或 GT America 这类授权字体,根据使用级别,每年几百到几千美元不等。问题不在成本,而在回报。一款能适配品牌五年的字体不算贵。一款在十八个月内就引发改版的字体,花的钱远超授权费。

Inter Display 是好的展示字体吗?

Inter Display 在技术上非常出色,覆盖范围广,但它已经成了一个自带联想的默认选项。如果目标是差异化,除非执行得格外出色,否则很难为选 Inter Display 找到理由。如果目标是可靠和全系统覆盖,它很难被超越。

我怎么知道展示字体和正文字体搭配得对不对?

先做感觉一致性检查:即使两款字体看起来不同,它们是否共享某种底层审美?再做角色对比检查:是否一款明显是个性字体,另一款明显是易读性字体?把两者按实际字号设在同一页上去读。如果你能在一秒内分辨出哪个是展示字体,这个搭配就是有效的。

展示字体需要光学字号变体吗?

如果展示字体会用在 36 像素以下,需要。高对比的展示字体在小字号下会崩坏,同时影响可读性和品牌观感。要么选带光学字号轴的字体(在生产环境中的可变字体中有深入讲解),要么为较小的范围另选第二款字体。

展示字体选择最常见的错误是什么?

只凭某一个字号下的视觉印象来选。一款在深色背景、96 像素的情绪板里看起来很棒的字体,放到白底产品场景的 32 像素下可能完全崩塌。定稿前跑一遍五分钟匹配测试。它只要五分钟,却能在上线前拦下每一个昂贵的错误。


展示字体选择真正解锁的转变

选得好的展示字体是会生息的品牌资产,选得差的则是一场等着发生的改版。

这篇文章里的框架不是设计理论。它是一份决策日志,用来避免上线后的那场字体对话:创意总监意识到展示字体撑不住了,团队不得不向客户解释,为什么一款在提案文稿里看起来对的字体,在生产环境中读起来是错的。

好的展示字体选择不在于找到最漂亮的字体,而在于找到那个契合声音、守住调性、扛得住字号范围、老去也不尴尬的字体。在规模化下依然成立的网页设计原则都共享同一套逻辑:基于真实约束做出的决定,比基于情绪板做出的决定更持久。声音品牌识别在另一种媒介中遵循同样的纪律:能留下来的选择,是着眼于整个系统做出的,而不仅仅是那一刻。

跑一遍四个问题。跑一遍匹配测试。糟糕的选择会在上线前掉出来,而好的选择会变成品牌资产,比它们当初为之挑选的战役活得更久。

如果品牌需要第一天就好用、第五年依然好用的展示字体,雇用 Brainy。我们用方法挑选展示字体,跑匹配测试,交付的搭配比它们所属的品牌老得还好。

Want a display typeface that fits the brand on day one and still fits on year five? Brainy picks display type with a method, runs the matching test, and ships pairings that aged better than the brands they came from.

Get Started

More from Brainy Papers

Keep reading