字体常识

基本概念

字形(glyph)

单个字的形体

glyphs

字体(typeface/font-family)

一个或多个字型的一个或多个尺寸的集合

如谷歌Noto Sans字体系列包含了Noto Sans Black、Noto Sans Black Italic、Noto Sans Bold、Noto Sans Condensed等多个字型

字型(font)

具有相同样式风格和尺码的字形(glyph)的集合 比如Consolas字体的Consolas Italic就是一个具体的字型

行高(line-height)

连续两行文字基线之间的距离

合字(Ligature)

用多个字形合成一个字形

= ≥

ligature_drawing Chinese_Character_zhao1_cai2_jin4_bao3

字型特征

字重(Weight)

笔画粗细程度,一般情况下一个字型会带标准和粗体两种字重

Helvetica Neue weights

  • 100 - 淡体 Thin ( Hairline )
  • 200 - 特细 Extra-light ( ultra-light )
  • 300 - 细体 Light
  • 350 - 次细 Demi-Light
  • 400 - 标准 Regular ( normal / book / plain )
  • 500 - 适中 Medium
  • 600 - 次粗 Demi-bold / semi-bold
  • 700 - 粗体 Bold
  • 800 - 特粗 Extra-bold / extra
  • 900 - 浓体 Black ( Heavy )
  • 1000 - 特浓 Extra-black
  • 1100 - 超浓 Ultra-black

倾斜(Slope/Slant)

字形倾斜,用于强调、书籍名称、几何符号、计量单位等。中文通常不使用斜体。

Garamond_Roman_Italic

如谷歌Noto Sans字体包含了Noto Sans Italic、Noto Sans Black Italic、Noto Sans Bold Italic等一系列斜体字型

宽度(Width)

字形宽度 compressed/condensed/narrow normal/regular wide/extended/expanded

如Roboto Condensed

衬线(Serif)

衬线指的是字形笔画末端的装饰细节部分。

衬线体易于阅读,是比较正统的,多用文字较多的文章正文。不过为衬线体在笔划上有过多的点缀(笔划末端的小三角)很容易造成视觉疲劳。

Serif_and_sans_serif

衬线体又称罗马体(roman)。东亚文字(CJK)字体中与衬线字体对应的为白体,最常见的白体类型为宋体(亦称明体、明朝体)。

常见衬线字体

  • Droid Serif
  • Noto Serif
  • Imprint
  • Times New Roman
  • 宋体、中易宋体
  • 文泉驿点阵宋体
  • 华文仿宋
  • 花园明朝体

粗衬线(Slab-serif)

Courier

顾名思义就是更粗、成块的衬线。粗衬线字体比较显眼,通常用于杂志封面、海报、标题等。最知名的粗衬线字体应该是Courier,大部分操作系统自带该字体。

无衬线(Sans-serif)

Chinese_typefaces

无衬线体又称哥特体(grotesque),具有笔画粗细基本一致,没有衬线装饰的特征。无衬线体较为醒目,常用于标题、导语、标志等。

东亚文字(CJK)字体中与无称线体对应的为黑体(中国大陆)或哥特体(日韩)。

常见无衬线字体

  • Arial
  • Comic Sans
  • Droid Sans
  • Helvetica & Helvetica Neue
  • Lato
  • Open Sans
  • Overpass
  • Proxima Nova
  • Roboto
  • Segoe UI
  • San Francisco
  • 兰亭黑
  • 冬青黑
  • 雅黑
  • 文泉驿正黑/微米黑
  • 苹方
  • 思源黑体(Source Han Sans / Google Noto Sans CJK)

等宽(Monospace)

proportional_vs_monospace

所有字形宽度相同,视觉上非常整齐。计算机终端模拟程序默认使用等宽字体,程序员写代码也通常使用等宽字体。

常见等宽字体

  • Courier New
  • Consolas
  • Fira Code / Fira Mono
  • Monaco
  • Menlo
  • Ubuntu Mono
  • Source Code Pro

手写体(Script/Cursive/Handwriting)

Cursive

手写体在中文语境下通常指草书

美术体(fantasy/display)

oramental_font

西方文字型结构

详细说明参见 Anatomy of a Character

基线(baseline)

多个字母排列时其中多数字母的底线

typographic_baseline

x字高(x-height)

字母的基本高度(以小写字母x的高度为准)

typographic_x_height

主线(mean line)

小写字母x顶部虚拟的一条水平线。为了美观,通常圆的字形(如字母O)和尖的字形(A)会稍稍高于主线

大写高度(cap height)

基线上大写字母的高度,通常取 H 或者 I 的高度

升部(ascender)

字母中向上超过主线笔画的部分,也就是超出x字高的部分,可以增强单词的识别率

typographic_ascender

降部(descender)

字母向下延伸超过基线的笔画部分,可以增强单词的识别率

typographic_descender

中文字型结构

  • 结构 字形的骨架

hanzi-structure

  • 重心 字体视觉中心点的高低

hanzi-pivot

  • 中宫 字体内部结构的松紧,决定了重心高低

hanzi-center

  • 字怀 笔画中留白的部分

hanzi-space-size

  • 字面 字体所占字面框的字面率比例大小

hanzi-glyph-area

笔画中留白部分的多少,决定了字体的视觉平衡性;

更多详情参见:必看!字体设计的基础常识

字体(Typeface / Font Family)

设计风格一致的一套字形

Font-hinting-example

字体光栅化(Font rasterization)

将文字从矢量表示转化为光栅或者位图表示的过程。通俗地将就是将图像转化为屏幕上一个个的像素点。

font-rasterization

亚像素渲染(Subpixel rendering)

LCD、OLED显示屏上一个像素点通常由红绿蓝(RGB)三种颜色点组成,这些颜色点就是亚像素,人眼是无法直接感知亚像素点的。按亚像素来渲染,那么实际的分辨率就变成了原来的3倍,渲染出的字体自然就更加细腻清晰。

subpixel-rendering

pixel-geometry

subpixel-rendering-rgb

pixel-level-renderingsubpixel-level-rendering

Windows上亚像素渲染实现被称为ClearType。Adobe的实现称之为CoolType。

更多字体渲染知识参见:

A Closer Look At Font Rendering

Subpixel - How It Works

抗锯齿(anti-aliasing)

消除显示器输出的画面中图物边缘出现凹凸锯齿的技术,经过抗锯齿处理的图形看起来更加平滑自然。

anti-aliasing

字体微调(Hinting)

调整轮廓字体使其和栅格对齐的过程

字体文件格式

  • PostScript(Type 1),1980年代Adobe公司
  • TTF(TrueType Font),1980年代晚期Apple和微软联合开发,屏显字体和打印机字体数据包含在一起,支持字形微调(hinting)。未经压缩,所以文件体积较大。支持嵌入到PDF和网站使用。包含版权标记,但是可以被修改。
  • OTF(OpenType Font),TTF升级版,Adobe和微软联合开发,支持多操作系统平台,最大支持65000个字符
  • EOT(Embedded Open Type),微软开发,用于网站,版权标记增强,支持加密、压缩和子集(仅包含需要的字符),未被W3C选为标准,只有IE支持。
  • WOFF/WOFF2(Web Open Font Format),带metadata的OTF/TTF字体,支持压缩,所有主流现代浏览器均支持的格式。Mozilla基金会、微软、Opera联合开发。W3C推荐字体格式。WOFF2是WOFF的升级版,采用Brotli压缩算法,压缩比相较WOFF1平均高出30%。
  • SVG(Scalable Vector Graphics),不支持字形微调(hinting),只能选中整行或整段文字,不支持选择单个字符和词。

Fontology

A Visual Guide to the Anatomy of Typography [Infographic]

FONT FAMILIES & FONT STYLES

The Complete Beginner’s Guide to Chinese Fonts

The missing guide to font formats

Font hinting

Hint 字形微调技术是什么?

活字字体的基础讲座

一套完整的中文字体是如何开发出来的?

设计的中宫指什么?不懂这个谈字体结构和造型都白搭!

宋体

思源宋体,如何评价,以及如何正确使用

给自己的Fonts教程

Intro to font metrics