# 字体 ### 字体基础 ### 英文字体的特征 #### 衬线与非衬线（Serif vs. Sans-Serif） 衬线，是指笔画末端的装饰线，是否有衬线是区分不同英文字体最显著的特征。有衬线的字体叫做衬线字体（Serif），而没有的则是非衬线（Sans-Serif）。（「Serif」意为「衬线」，「Sans」在法文中意为「没有」） 衬线体是古典的英文字体，源于古罗马的石刻拉丁字母。 1968 年爱德华·卡蒂奇神甫在其著作《衬线的起源》一书中指出，在石刻时人们会先用方头笔将字写在石头上，再按照痕迹刻画。由于方头笔画出的笔画起笔处和收尾处比较粗糙，于是就加上了衬线。 在传统印刷中，衬线字体常用于正文。因为衬线有视觉引导的作用，可以加快读者的阅读速度。但在现代排印中已经不再有这样的死规矩，非衬线体也有不错的阅读体验，但传统的纸媒仍然坚持使用衬线体。 非衬线体的出现比较晚，有说法是起源于希腊的字母形式和罗马帝国的非正式铭文，80 年代开始兴起。非衬线字体曾经被称作「Grotesque」（荒唐的）或者「Gothic」（哥特的），这反映了早期人们对非衬线体的看法。如果你看到了某个叫做「xxx grotesque」的字体，那么他的意思就是「xxx 非衬线体」。 非衬线体在早期的电子屏幕上会有更好的显示效果，基本成为了电子显示器上的最佳选择，无论是 iOS、Windows 还是 Android，都选择了非衬线字体作为系统字体。但其实随着高分辨率屏幕的出现，今天的我们大多不需要担心显示效果，而更多是出于功能和美感的考虑去选择字体。 #### x 高度（x-height） x 高度指英文小写字母 x 的高度，它决定了整套字体小写字母的高度，以及 p、j、y、f、b 这些字母的身材。 一般中英混排时使用 x 高度较高的英文字体。因为 x 高度较高的英文字体会显得更加方正一些，和方块字更般配。 #### 升部（Ascender）、降部（Descender） 字母中 x 高度以上的部分称为升部，以下部分称为降部。区分他们的线叫做升部线（ascender line）和降部线（descender line）。 如果一套字体的 x 高度越高，那么留给升部和降部的空间就越少，字体会显得比较憨厚、稳重。相反的，如果升部和降部都比较伸展，字体会显得比较清秀、飘逸、活跃。 #### 字怀（Counter） 字怀是字母的全封闭或半封闭区域，他其实是文字中的留白，留白越大对比度就越高。字怀的形状和大小是区分字体的重要特征。 通常字怀较大的字体会更舒展，稳定，容易阅读；字怀较小的字体看起来更有个性。除了大小，字怀也有形状之分，比如 Gill Sans 几乎为正圆的字怀看上去很有几何感。 #### 中轴线（Axis） 观察字母 o 可以轻易找到中轴线，中轴线决定了字体的重心，非衬线字体的中轴线通常是竖直的，衬线体的中轴线通常是倾斜的。 通常竖直中轴线的字体偏几何化（比如字母 O 像一个圆形而非椭圆形）所以看上去更加现代，标准，工业化因为这种完美的圆形很像是标准化的工业制品；而倾斜中轴线的字体则像是手写出来的（想象一下用平头笔书写字母 O ，左右两边自然会粗一些），更有人文气息。 #### 小细节 第一个小细节是文字的写法。英文中 a 与 g 都有两种写法，有两个字怀叫 double story，有一个字怀叫 single story。同一种字体通常选择同一种写法来处理 a 和 g，非衬线体常用 single story 的写法，double story 更多出现在衬线体中。 第二个小细节是笔画结束时的角度和方向，也能区分字体，尤其是小写字母 e 的末端。同一款字体通常会保持同样的角度和方向、同一种笔画结尾风格。末端较平的字体看上去比较稳定，末端有角度的字体看上去更灵动。 第三个小细节是「点」，尤其是字母 i、j 上的点。有些字体使用方形点，视觉上会和下方的竖线更加接近。 不同字体的数字风格也有不同处理，有 old-style 和 lining 两种。 old-style figures 的数字拥有大小写字母一样的升部和降部，适合大小写字母协调；Lining 则高度统一，和中文字体配合更加和谐，Old-style figures 拥有升部和降部的特点更能配合英文字体的美感。不过 Old-style figures 同时阅读起来也相对慢一些，在讲究阅读效率的场景下（比如数据表格），Lining figures 更合适一些。 #### 进一步阅读 由 Typography Deconstructed 制作的 英文字体结构表（[点击下载](https://typedecon.com/collections/frontpage/products/digital-download-free)）。 如果你想深度了解西文字体，可以阅读这本《西文字体：字体的背景知识和使用方法》。 本书的作者小林章是一位日籍著名字体设计师，任 Monotype 字体总监，曾参与 Optima 等著名字体的改刻，以及腾讯字体的设计。这本书对西文字体的基础术语概括全面，还包括一些知名字体的解析以及故事，是非常好的英文字体入门书籍。读完这本书之后，你会对很多经典的英文字体了如指掌，并且进一步加深对西文字体构造的认识，甚至对字体的选择和搭配有所了解。 #### 国际主义设计风格 （英语：International Typographic Style），又称为瑞士风格（Swiss Style），是 1920 年代在俄罗斯、荷兰、德国萌芽，最终于 1950 年代在瑞士兴起的一种平面设计风格。作为现代主义设计运动的一部分，国际主义设计风格对于平面设计产生了巨大的影响，并进而影响了建筑、艺术等其他设计相关的领域。 国际主义设计风格强调干净、易读、客观，其主要特征包括非对称排版、栅格、无衬线字体（如 Akzidenz-Grotesk）、靠左对齐而右边不齐等。此外，这一风格更倾向于使用摄影，而非插图或绘画。许多早期的国际主义风格的作品将字体排印作为主要的设计元素，而不仅仅只用于正文之中，这也是其英文名称「International Typographic Style」（国际字体风格）得名的原因。时至今日，该运动对平面设计策略与理论仍有着深远的影响。 ### 中文字体的特征 #### 衬线与非衬线 对于中文字体，我们仍然可以将其分为「衬线字体」和「非衬线字体」两种。书法中的「顿笔」，印刷字体末尾三角都可以算作衬线。 拓展阅读 所谓顿笔，是书法中在笔画开头和末尾处更多用力并多做停留的一种手法。通过顿笔，笔画的开头和末尾会显得更粗且富有变化，字体看上去就更有美感。 顿笔放在印刷字体中就是一种衬线。而一些印刷字体，比如宋体，在顿笔处理上更加几何化，比如「一」字的末尾就处理成了类似三角形。 衬线字体显得比较有古典韵味。非衬线体在电子显示媒介上应用广泛，传播信息更加清晰，但也少了些书法之美。与英文字体相同，衬线字体的衬线也各式各样，对比衬线形态是区分字体的好办法。 我们常见的宋体与楷体属于衬线体，而黑体则属于非衬线体。虽然楷体与宋体都可以认为是衬线体，但楷体更加偏向模拟毛笔书写，而宋体则更加锋利平整，适合打印。 #### 内白（字怀） 与英文字体「字怀」一样，字怀是文字内中空的空间，也叫内白、字谷。与英文字体不同的是，汉字的字数多且笔画差距大，有些笔画少的字天生字怀大，笔画多的字自然字怀较小，而英文字母相对平均一些。 观察「口、回、国」三个字，你会发现最简单的「口」字反而内白最小，这是因为「口」字中心是空的，视觉上会显得很空很大，所以字体设计者通过缩小内白的方式来达到视觉上的平衡。 字怀偏大的字体观感稳定，反之则比较灵动。内白均衡的字体视觉更稳定均衡，适于阅读。而内白对比强烈的字体（如书法字体）会更有律动。目前市面上的印刷字体大多追求内白上的均衡。 #### 重心 重心指的是字体的纵向视觉中心，通常会比几何中心偏上一些。让字体「看起来是一套」的重要手法就是重心位置一致，不同字体的重心略有不同。 重心决定了字的身材比例，重心越低越稳重，字面越高越高挑轻盈。最近几年新设计的字体都倾向于提高字体重心，增加轻盈感。比如 1997 年的微软雅黑、2015 年的苹方、2019 年的 OPPO Sans，重心在不断提高。 #### 字面 字面，可以理解为字所占的面积。同样字号的字体，有些显得大有些显得小，这就是字面的不同。字面大的字体会观感比较稳重，字面小的观看会比较清秀。 #### 小细节 喇叭口 喇叭口是笔画末端变宽的部分。喇叭口最初是由于铅字印刷的技术限制，导致笔画开始和结束的地方着色较少，显得圆润不锋利。于是字体设计师在笔画两端稍微加粗，也就是加了喇叭口，印刷出来的效果就能达到视觉上的均衡。 而如今的屏幕清晰度已经可以精确地显示字体，喇叭口已经由「技术限制」变为「审美选项」，它能让字体看上去更有力道和韵味。在苹果推出「苹方」字体前使用的「华文黑体」就是有喇叭口的。但由于在屏幕上出现喇叭口并非本意，近些年带喇叭口的字体出现频率越来越低，甚至有些「古典黑体」的感觉。还记得 Bell Centennial 吗？ 虽然大家越来越少用电话簿了，但这种挖掉一块的设计也成为了一种审美选项。当下很多新字体采用了类似的设计，而且看起来非常潮。比如设计工具 Figma 的官网所使用的 Whyte 字体，设计于 2019 年。 折 「折」笔画是分辨字体的好办法。不同字体「折」的角度、顿笔（衬线）的形状、笔画结束形态都可能有所不同。下图可以看出，华文宋体的折在结束的时候有一种笔逐渐离开纸面的感觉。思远宋体则感觉是用了一些力再离开纸面，比较丰满。 点 记得小学写「心」字的时候，这三个点儿一直点不对地方。「点」在中文字体中可比想象中要复杂，点的弧度、长度、位置都会呈现不同的气质，况且很多字不只有一个点。我们可以通过对比「点」这个简单笔画分辨字体。 #### 进一步阅读 如果你对中文字体想有更深入的了解，这里有三个延伸阅读推荐给你： 《中国字体设计人：一字一生》---廖洁连：相比上一期推荐的《西文字体》，这本书更加有文化积淀，通过采访十二位中文字体设计人，讲述了中文字体设计的产生和变迁，也反映了社会的变化。整本书虽然气氛悲观，但能从其中了解不少关于中文字体设计背后的艰辛以及与西文字体的不同之处。 The Type ：[The Type](https://www.thetype.com/) 是一个中文字体设计博客，他们的文章能够帮助你很好地了解字体设计的基础、排版原理的基础以及一些历史背景，而且不失趣味性。推大家去看看他们整理的这份 [书单](https://thetype.com/booklist/)，以及 [基础文章汇总](https://thetype.com/basics/)，都是非常棒的入门文章，可以做为知识的巩固。 同时，他们也拥有一个名为《字谈字畅》的播客栏目，是目前唯一一档专注于字体的中文播客。《字谈字畅》是了解字体知识以及背后故事的好渠道。你可以在播客应用中搜索「字谈字畅」或访问 字谈字畅官网 进行收听。 justfont 博客：[justfont blog](https://blog.justfont.com/) 是之前提到的一家位于台湾的中文 Webfont 工作室。他们的博客有许多关于繁体中文字体设计的文章，文章内讨论的内容同样适用于简体中文的排版。justfont 的选题非常有趣，比如《筆畫都是選票：從字型設計看首長大選》《颱風天，談一下颱字的設計》等等。 --- 思源宋体（Source Han Sans Source Han Serif or Noto Sans CJK） ### 其他字体相关 - - - - [Get Started with the Google Fonts API  |  Google Developers](https://developers.google.com/fonts/docs/getting_started?hl=en) - - [Web 中文字体应用指南 · Ruby China](https://ruby-china.org/topics/14005) - - [赫蹏 - （hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。](https://github.com/sivan/heti) ### 阅读文章 #### Typography for Developers 在网页设计中，95% 的部分与字体设计相关。 1. 什么是字体设计？ 字体设计关乎可用性。字体是传递信息的界面，而传递信息是 Web 存在的全部使命。 可用之后关乎情感。 2. 字体里有什么？ 1. Typeface vs. Font 前者是一组字形设计的集合，后者则指特定字体的大小、字重、或者是字体样式。 本质上，typeface 是一首歌的话，font 就是它的 MP3 文件。 2. 字体是如何被分类的 最广泛的分类方法------衬线和非衬线。 衬线又可分为 didone, slab, old style；非衬线可分为 humanist, geometric, grotesk。 还有一种需要特别注意的字体------Monospace。等宽字体中的每个字符的字形都具有相等的宽度。 3. 如何选择字体，如何选择字体对？ 这完全是主观判断。 1. 考虑字重 2. 字体是否容易阅读 3. 字体样式多变 4. 其他需要考虑的事情 - 多语言 - Ligatures - 字体文件大小 4. 在 Web 中使用字体 1. 字体性能 - 对字体进行 gzip 压缩 - 关闭不用的字体特性，hinting、kerning - 移除不用的字符 [生成 @font-face](https://transfonter.org/) 2. 字体服务 - 5. CSS 与字体设计 1. 调整字体大小 px,em 对比不同 em 大小 2. 调整字体的垂直间距和对齐方式 line-height；字体虽然不会跳舞，但垂直的起伏也让它变得有节奏。 3. 水平形状 letter-spacing 4. CSS 可以平滑原本脆弱的字体 -webkit-font-smoothing font [网页中文字体加载速度优化 - 字体分包](https://www.hehehai.cn/posts/chinese-web-font-optimize) ### System Font Stack - - - - - - - - [Never, ever use system-ui as the value of font-family --- Not ready yet](https://infinnie.github.io/blog/2017/systemui.html) #### 非衬线 ```css font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; ``` #### 衬线 ```css font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; ``` #### 等宽 ```css font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; ``` > Your website doesn't need to look the same everywhere. It just needs to work everywhere. > [Moving to a system font stack in WordPress (how and why)](https://woorkup.com/system-font/) ### 标点符号与汉字字体 https://web.archive.org/web/20190629022513/http://ethantw.net/lab/han/biaodian_fuhao_yangshi.html https://github.com/ethantw/Han https://blog.yorkxin.org/posts/assign-fonts-for-specific-characters/ 相关：[[middleware|middleware]]