2024-7-26更新链接: 《从设计看美国大选：哈里斯标志一天内完成更新、各个环节都是“视觉锤”》

2023-06-09

之前在《从字体开始-设计改变的生活与社会》看到过 ‘Gotham’ 字体的介绍，当时并不以为意，觉得是某种提高档次的套路，晚上偶然看了一下 Gotham 字体的百科，哇哦～太有趣了！

Gotham、Sharp Sans Display No.1、Optima 分别是奥巴马、希拉里和约翰麦凯恩在竞选时使用的无衬线字体，下面分别来看看这三种。

Gotham

Gotham是一个几何 无衬线字体 系列，由美国字体设计师 Tobias Frere-Jones 和 Jesse Ragan 设计，并于 2000 年通过 Hoefler & Frere-Jones 铸造厂发布。Gotham 的字体灵感来自 20世纪中叶的建筑标志示例。

20世纪中叶，纽约城市建筑中很多手写体代表了纽约 “直率、坚韧、富有个性” 的特点， 设计师结合建筑铭牌、商店招牌、卡车上的文字、店铺广告等设计出了富有地域特色的字体 Gotham（哥谭）。

自创建以来，Gotham 因其出现在许多著名的地方而备受瞩目。这包括奥巴马的 2008 年竞选活动、密歇根州立大学品牌推广活动，以及澳大利亚工党的2016 年联邦竞选活动。该字体还被用在纽约世贸中心一号大楼的基石上。它也是美国电影预告片的 MPAA 标题卡中当前使用的字体。

Gotham 也找到了进入其他商业媒体的途径。可口可乐、电视节目《柯南》、《莫瑞》和《周六夜现场》 、翠贝卡电影节、Qwest广告和佐治亚州州长客户服务办公室都在徽标中使用了Gotham。佐治亚州政府引用 Gotham 的 “干净、清新的线条” 和 “为所有营销、广告和标牌应用提供多种选择” 的变体作为其使用的理由。星巴克在2008 年总统大选中使用了该字体向投票的人宣传免费咖啡。

• 2014 年 5 月 30 日，Twitter宣布，“从今天开始，我们将使用一种新字体，从 Helvetica Neue 移至 Gotham ”。该更改于 2014 年 9 月 3 日恢复。

OpenType可变字体（英语：OpenType variable fonts）是字体格式OpenType在1.8版规范中引入的扩展规范，由苹果、微软、谷歌和Adobe联合开发，于2016年9月14日正式发布。 可变字体的优势：

• 更小的文件体积
• 更自由的设计空间
• 更好的响应式网页适配性

微软可变字体简介： https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview

如何在web使用可变字体

可变字体（Variable fonts） 是 OpenType 字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过 CSS 与一行 @font-face 引用，即可获取包含在这个单一文件中的各种字体变体。

@font-face {

}

静态字体和可变字体的差异

标准（静态）字体

过去，一个字体家族往往由大量独立字体文件组成，每个字体文件都代表某一特定的宽度/字重/样式的组合。因此你会看到有单独的字体文件叫做“Roboto Regular”、“Roboto Bold”，或是“Roboto Bold Italic”——这意味着你可能需要 20 或 30 个不同的字体文件才能算是有了一整个字体家族（对于有着不同宽度的大型字体来说，这个数量还要翻上几倍）。

在这样的情景下，为了在一个单纯显示进行正文展示的页面中使用一个字体，你至少需要四个字体文件：常规、斜体、加粗、斜体加粗。如果你想添加更多的字重，比如让题注更轻或让额外强调的地方更重，意味着你需要更多文件。这就导致了更多大量 HTTP 请求的产生，同时也需要下载更多的数据（通常每个文件至少有 20k 或更多）。

可变字体

通过使用可变字体，所有这些情况的排列组合都可以被装进一个文件中。这个文件可能比常规的单个字体文件大一些，但通常情况下，都不会大于，并且常常是小于你因为要展示正文所需要下载的四个文件的尺寸总和。使用可变字体的优势是你可以直接使用所有可用的字重、宽度和样式的字体，而不必像过去一样仅仅受限于使用其中单独的某一种。一个可变字体文件可以包含传统静态字体系列中的所有字体。 就原始文件大小而言，这是一个直接的胜利，因为它紧凑地打包了整个字体系列。 替换的静态字体越多，节省的空间就越大——对于非常大的字体系列，压缩甚至高达 70%。

这允许使用常见的排版技术，例如在不同的字重中设置不同大小的标题，以便在每种大小下都具有更好的可读性，或者在数据密集展示时使用稍窄一点的字体宽度。相比之下，在杂志的印刷系统中，在整个出版物中使用 10-15 种或更多不同的字重和宽度组合是很典型的——这比目前在 web 上的典型样式提供了更广泛的样式范围 (或者仅从性能方面考虑确实很实用)。

关于字体系列，字重和变体的说明

您可能注意到，我们一直在讨论为每种权重和样式 (即粗体，斜体以及斜体加粗) 创建特定的字体文件，而不是依赖于浏览器来合成它们。这样做的原因，是大多数字体对于粗体和斜体都有非常特殊的设计，它们通常包含完全不同的字符 (例如，小写字母的“a”和“g”在斜体中常常是完全不同的)。在使用非可变字体时，为了最准确地反映字体设计，避免浏览器之间的差异以及它们如何合成或不合成不同的样式，在需要的地方加载特定的字体文件会更为准确。

您可能还会发现一些可变字体分为两个文件：一个用于正体及其所有变体，另一个包含斜体变体。有时这样做是为了在不需要或不使用斜体的情况下减小整体文件大小。在所有情况下，仍然可以通过通用的 font-family 名称链接它们，以便您可以使用相同的 font-family 和相应的 font-style 来调用它们。

可变轴

可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。 例如： “字重轴”描述了字体的粗细； “宽度轴”描述了字体的宽窄； “斜体轴”描述是否使用斜体字形并且可相应地开关； 等。 请注意，轴既可以是 范围选择 又可以是 开关选择 。

字体分类

Roman Typeface（罗马正体/衬线体）

• Bracket Serif 括弧型衬线
• Hairline Serif 极细型衬线
• Slab Serif 粗衬线

Sans-serif（Sanserif） Typeface（无衬线体）

Script Typeface（手写体）

Blackletter Typeface（黑体/哥特体/破笔体）

Italic Typeface（意大利斜体）

经常被使用的几种字体

Caslon - 美国独立宣言

• 犹豫不决时用的字体

Garamond

• 没有个性的字体

Courier

• 最出名的粗衬线字体

Times Roman

• 泰晤士报字体

Futura

• 德国字体，现代主义中性风格； LV

Helvetica

• 最广泛使用 瑞士字体；FENDI

最近看了「从字体开始」这本书，The Type 编著。有意思的是感觉和印象派的发展如出一辙，字体设计的发展也体现了时代交织的另一面，例如香港颜楷的霓虹灯、字怀开口更大的英文无衬线字体的公路牌、中文识别度更高的宋体港铁、中文印刷术造成的喇叭口、Dyslexic 给学习障碍人士设计的字体。

拉丁字母的欧洲发展史

文艺复兴时期：

• 看关于古腾堡的书籍，感觉欧洲的活字印刷更像独立成长起来的，很难说受到毕赣的影响，大学时期有抄写书籍的经验，最开始制作批量制作的赎罪铜镜，逐步演变成为铅字印刷。
• 这里想说一下古滕堡大学时期要完成基础的博雅教育，取得“自由七艺大师头衔”的头衔才开始真正的学习，即神学、医学或法学。 自由七艺 “la liberalaj artoj"的原意是自由人应该具有的学识和应该学习的七门学科，是相对于专业的、职业的和技术性的课程而言的，即七种人文学科 文法、修辞、辩证 (合称三艺)、算术、几何、天文和音乐 (合称四艺)。 感叹一下中世纪的教育已经这么先进了吗？ By the way，在正式开始大学前有个带动物面具被凉水泼到面具软化的过程，在当时的学者眼中没有上过大学的人只是动物…这该死的仪式感……
• 1455年古腾堡用哥特体风格的金属活字印刷了 42行圣经 （印刷一百八十份，前期有四十行和四十一行版本的调整版本），文艺复兴时期诗人皮特拉克（Petrarch）等人文主义者崇尚向古希腊罗马学习，歌颂人性的伟大。他认为哥特体难以辨别其本意也不是让人细读，而更多的展示宗教权威。圣经内页的红色首字母部分依旧采用人工书写的形式，书皮也是手工制作，所以每一本都是独一无二的，而且当时他觉得只有他们制作印刷书籍没有在书上印刷出版社。
• By the way，似乎纳粹也很钟情哥特体 Fraktur，马丁·鲍曼1941年1月3日公文副本，禁止使用 Fraktur体来“代表元首” 。

新古典主义

• 是西方世界在19世纪对古代希腊罗马的艺术产生的复古和改造运动（介于洛可可和新艺术运动之间），路易十四执政期间，法国学者研究设计了国王罗马体，为后世的现代衬线体做了铺垫，同样思路影响力
• Didot（被Vogue、时尚芭莎、ELLE、阿玛尼、巴宝莉使用）
• Bodoni（被华伦天奴使用）等字体的诞生

工业革命时期

工业化印刷出现了更多易读性跟高更夺人眼球的衬线体