← BACK TO THE MAIN BLOG
MAY 13, 2025

typography 基本概念扫盲

Typography Basic

字体排印基本概念扫盲

1. 基线 (Baseline)

想象一下我们写字时用的横格本，那条让大部分字母“坐”在上面的横线，就是基线。它是字体垂直度量的核心参考线，几乎所有字母的底部都与它对齐。

  • 作用： 确保一行文字看起来整齐划一。
  • 例子： 字母 “A”, “b”, “c”, “x” 的底部都稳稳地站在基线上。

2. 大写字母高度 (Cap Height)

顾名思义，这就是指标准大写字母（比如 “H”, “M”, “Z”）从基线到其顶部的垂直距离。

  • 作用： 决定了大写字母的视觉高度和突出程度。
  • 小提示： 像 “O” 或 “S” 这样带有弧线的字母，其顶部可能会略微超出大写字母高度线一点点，这种现象称为“视觉矫正”或“溢出 (Overshoot)”，目的是让它们在视觉上与其他大写字母看起来一样高。

3. x高度 (x-height / 字高)

这是指小写字母中没有上伸部或下伸部的主体部分的高度，例如 “x”, “a”, “e”, “m”, “n”, “u”。因为小写 “x” 的顶部和底部恰好能完美界定这个高度，所以得名 “x高度”。

  • 作用：
    • 可读性： x高度是影响字体易读性的关键因素。通常，相对于大写字母高度，x高度较大的字体在小字号下更易于阅读，因为小写字母的细节更清晰。
    • 视觉大小： 即使磅值相同，x高度较大的字体看起来会显得更大。
  • 相关线条： 标记x高度顶部的水平线被称为平均线 (Mean Line)。

4. 上伸部 (Ascender)

指某些小写字母（如 “b”, “d”, “f”, “h”, “k”, “l”, “t”）向上延伸超过x高度（平均线）的部分。

  • 作用： 帮助区分字母，增加字体的个性和美感。
  • 相关线条： 上伸部所能达到的最高点构成了上伸部线 (Ascender Line)。这条线可能高于、等于或低于大写字母高度线，具体取决于字体设计。

5. 下伸部 (Descender)

指某些小写字母（如 “g”, “j”, “p”, “q”, “y”）向下延伸到基线以下的部分。

  • 作用： 同样有助于区分字母，并影响字体的整体平衡感。
  • 相关线条： 下伸部所能达到的最低点构成了下伸部线 (Descender Line)。

一张图看懂它们的关系：

      +------------------+  <-- 上伸部线 (Ascender Line)
      |         h        |  (h 的顶部)
      +------------------+  <-- 大写字母高度线 (Cap Height Line)
      |         H        |  (H 的顶部)
      +------------------+  <-- 平均线 / x高度线 (Mean Line)
      |         x        |  (x 的顶部，x高度的主体)
 ----====================----  <-- 基线 (Baseline)
      |         p        |  (p 的下半部分)
      +------------------+  <-- 下伸部线 (Descender Line)

6. 行距 (Leading - 发音同 “ledding”)

指连续文本行之间，从一行基线到下一行基线的垂直距离。

  • 作用： 极大地影响阅读的舒适度。合适的行距能让文本段落清晰易读，避免拥挤或过于松散。
  • 小知识： 这个词来源于传统铅活字排版时代，排版工人会在金属活字行之间插入铅制薄片 (lead strips) 来增加行间距。

7. 字身高度 / Em Square (Body Height / Em Square)

可以将 Em Square 想象成每个字符所居住的“专属小房间”或“虚拟容器”。这个“房间”的高度决定了字体的基础大小，而所有字符（无论高矮胖瘦）都在自己的“房间”内活动。例如，12磅的字体，其 Em Square 就有12磅高。理解这一点有助于我们理解为何磅值相同的不同字体，其实际视觉大小可能不同，因为它们在各自“房间”内的设计和占据空间的方式不同。

  • 作用： 它为字体中最高的上伸部到最低的下伸部以及字符宽度提供了一个边界框。行距、缩进等排版单位也常常以 em 为单位。

8. 衬线 (Serif) 与 无衬线 (Sans Serif)

这是字体风格上最基本也是最重要的分类之一。

衬线 (Serif)：

  • 特点： 字母笔画的末端带有装饰性的短横线或小三角，这些就是“衬线”。
  • 感觉： 通常给人传统、典雅、正式的感觉。
  • 易读性： 传统观点认为衬线有助于引导视线，在印刷长文阅读中更舒适（但这在屏幕阅读时代存在一些争议）。
  • 例子： Times New Roman, Georgia, 宋体, 明朝体。

无衬线 (Sans Serif)：

  • 特点： “Sans” 在法语中是“没有”的意思，所以无衬线字体就是笔画末端没有额外装饰的字体。
  • 感觉： 通常显得现代、简洁、干净、直接。
  • 易读性： 在屏幕显示上通常表现良好，尤其是在低分辨率或小字号下。
  • 例子： Arial, Helvetica, Verdana, Geist Sans, 黑体。

9. 字重 (Weight)

指字体笔画的粗细程度。一款字体通常会有一系列不同的字重，形成一个字体家族 (Font Family)。

常见字重：

  • Thin / Hairline (极细)
  • ExtraLight / UltraLight (特细)
  • Light (细)
  • Regular / Normal (常规)
  • Medium (中等)
  • SemiBold / DemiBold (中粗)
  • Bold (粗)
  • ExtraBold / UltraBold (特粗)
  • Black / Heavy (超粗)
  • 作用： 用于创建视觉层级（如区分标题和正文）、强调内容、改变文本的整体“灰度”和视觉冲击力。

10. 字偶距调整 (Kerning)

指对特定字母对之间的间距进行微调，以改善其视觉效果和可读性。有些字母组合天然会产生不均匀的空白，比如 “AV”, “To”, “WA”。字偶距调整就是为了修正这些问题。

  • 作用： 使文字排列更美观、更专业，阅读更流畅。
  • 注意： 大部分现代字体都内置了字偶距信息，排版软件会自动应用。

11. 字间距 (Tracking / Letter Spacing)

指对一段文本中所有字符之间的间距进行统一的增加或减少。

  • 作用：
    • 调整文本的整体密度和“透气感”。
    • 略微增加字间距有时可以提高大写字母组合或小字号文本的可读性。
    • 过大或过小的字间距都会影响可读性。

12. 字怀 / 字腔 (Counter)

指字母内部完全或部分封闭的空间。

  • 完全封闭： 如 “o”, “p”, “a”, “B” 中间的孔。
  • 部分封闭 (开放字怀)： 如 “c”, “n”, “s”, “h” 中笔画围合但未完全封闭的区域。
  • 作用： 字怀的大小和形状对字母的可识别性和字体的整体风格有重要影响。通常，开放且清晰的字怀有助于提高字体的易读性，尤其是在小字号时。

12.5. 全角 (Full-width) 与 半角 (Half-width)

这两个概念主要用于描述字符（特别是标点符号、数字和拉丁字母）在排版时所占据的水平宽度，尤其在处理东亚文字（如中文、日文、韩文）与西文混排时非常重要。

全角 (Full-width)：

  • 定义： 一个全角字符占据的宽度通常等于一个标准汉字的宽度。可以想象成每个字符都住在一个正方形的“格子”里。
  • 常见应用：
    • 汉字、日文假名、韩文谚文本身就是全角字符。
    • 中文标点符号（如：。，！？（）【】《》）通常是全角形式。
    • 在特定排版需求下，数字和拉丁字母也可以输入为全角形式（如：１２３ＡＢＣ），它们看起来会比半角形式更宽，并且字符间距也更大。
  • 视觉效果： 全角字符排列整齐，尤其在中日韩文字排版中能保持统一的字间距和对齐。全角拉丁字母和数字会显得比较“松散”。

半角 (Half-width)：

  • 定义： 一个半角字符占据的宽度通常是全角字符宽度的一半，大致相当于标准西文字体中一个字母（如 “n” 或 “x”）的平均宽度。
  • 常见应用：
    • 标准西文字母（a-z, A-Z）、阿拉伯数字（0-9）。
    • 英文标点符号（如: . , ! ? ( ) [ ] < >）。
    • 在编程、URL、电子邮件地址等场景中，通常强制使用半角字符。
  • 视觉效果： 半角字符宽度不一（比例字体中），排列紧凑，符合西文阅读习惯。

为什么重要？

  • 排版美观与一致性： 在中英文混排时，不恰当地混用全角和半角标点或字母，会导致版面混乱，间距不均，影响阅读体验。例如，中文段落中夹杂一个半角的逗号 ”,” 会显得很突兀。
  • 数据处理与兼容性： 在计算机处理中，全角和半角字符的编码是不同的。在需要精确匹配或数据交换的场景（如数据库查询、代码编写），错误地使用全角/半角可能导致问题。
  • 输入法切换： 大部分中文输入法都允许用户在全角和半角输入模式之间切换，以方便输入不同类型的字符。

扩展主题：字体选择、排版与视觉效果

了解了基础概念后，我们来看看如何在实际中运用这些知识。

13. 如何挑选合适的字体？

挑选字体不仅仅是“好看”那么简单，它需要服务于内容和目标受众。

在挑选字体前，不妨先问自己几个关键问题来明确方向：

  • 品牌个性： 字体是品牌声音的视觉延伸。希望品牌感觉现代、传统、友好、严肃还是有趣？例如，科技公司可能偏爱无衬线体，而律师事务所可能选择经典的衬线体。
  • 内容类型： 长篇文章（如博客、报告）需要高度易读的字体，通常是x高度较大、字怀清晰的字体。标题或Logo设计则可以选用更具个性和装饰性的字体。
  • 目标受众： 考虑受众的年龄、文化背景和阅读习惯。例如，给儿童阅读的内容，字体需要更友好、圆润；给老年人阅读的内容，则需要更大的字号和更清晰的笔画。
  • 媒介： 印刷品和屏幕显示的字体选择标准有所不同。屏幕显示更强调清晰度和像素友好性，无衬线字体通常表现更好。
  • 易读性与可读性 (Legibility & Readability)：
    • 易认性 (Legibility)： 指单个字符是否容易被识别和区分。避免选择那些字母形态模糊或容易混淆的字体（比如 “l” 和 “I” 难以区分）。
    • 易读性 (Readability)： 指大段文字阅读起来是否流畅舒适。这与字体的x高度、字怀大小、字间距、行距以及字重都有关系。
  • 测试！测试！测试！ 在不同字号、不同设备上测试字体的实际显示效果。
  • 字体家族的完整性： 一个完整的字体家族通常包含多种字重（如 Light, Regular, Bold）和样式（如 Italic 斜体）。选择拥有完整家族的字体，可以让你在排版时有更多选择，轻松创建视觉层级和强调。
  • 语言支持： 如果内容涉及多种语言（如中英文混排），确保所选字体能良好支持所有需要的语言字符集。否则，未支持的字符会由系统后备字体显示，导致风格不统一。
  • 授权与成本： 确认字体的使用授权范围（个人、商业、Webfont等）以及相应的费用。有许多优秀的开源免费字体可供选择（如 Google Fonts 上的字体）。
  • 不要过度设计： 一个项目中使用的字体种类不宜过多，通常2-3种足矣（例如，一种标题字体，一种正文字体）。过多的字体会让版面显得混乱。

14. 如何进行有效的排版 (Typography Layout)？

好的排版能引导阅读、传递信息、提升美感。

  • 建立清晰的视觉层级 (Visual Hierarchy)： 通过改变字体大小、字重、颜色、间距等手段，区分信息的主次关系。例如，主标题最大最粗，副标题次之，正文则需要保证良好的可读性。
  • 留白 (White Space / Negative Space)：合理的留白非常重要，它可以让元素呼吸，引导视线，避免版面拥挤。
  • 选择合适的行长 (Line Length / Measure)： 一行文字的长度不宜过长或过短。过长会导致读者视线难以换行，过短则会频繁打断阅读节奏。 对于单栏排版，英文通常建议每行45-75个字符（包括空格），中文则建议每行25-45个汉字。过长或过短的行都会显著影响阅读的流畅度和舒适度。如果一行字太长，读者的眼睛很容易在换行时“迷路”；如果太短，则眼睛需要频繁换行，打断阅读节奏。虽然精确计算字符数可能繁琐，但你可以通过观察来判断：当一行文字让你读起来感觉自然，不需要费力寻找下一行，并且段落整体看起来和谐，那么行长可能就比较合适了。多尝试调整并观察效果是关键。
  • 设置舒适的行距 (Leading)： 行距通常应为字体大小的1.2倍到1.6倍之间。例如，10pt 的正文，行距可以在12pt到16pt之间。 x高度较大的字体可能需要更大的行距。 中文字符由于其方形结构，通常比拉丁字符需要更大的行距。
  • 对齐方式 (Alignment)：
    • 左对齐 (Left-aligned / Ragged Right)： 最自然、最易读的对齐方式，尤其适用于大段文本。右边缘不规则，但单词间距均匀。
    • 右对齐 (Right-aligned / Ragged Left)： 通常用于较短的文本块，如引言、图注，不适合大段阅读。
    • 居中对齐 (Centered)： 具有仪式感和强调作用，适用于标题、诗歌、邀请函等，不适合正文。
    • 两端对齐 (Justified)： 左右边缘都整齐，但容易在单词间造成不自然的空白（称为“河流”），需要仔细调整字间距和断字。在网页上实现完美的英文两端对齐比较困难。中文由于字符等宽，两端对齐效果通常较好。
  • 段落处理：
    • 段落间使用空行或首行缩进（通常缩进1-2个em）来区分。避免同时使用两者。
    • 注意“孤行” (Orphan - 段落最后一行单独出现在下一页或下一栏的顶部) 和“寡行” (Widow - 段落第一行单独出现在上一页或下一栏的底部)，应尽量避免。
  • 一致性 (Consistency)： 在整个文档或网站中保持排版风格的一致性，例如标题级别、引用样式、列表样式等。

15. 不同字体和间距在视觉效果上的差异

字体和间距的细微调整，会对整体视觉感受产生巨大影响。

  • 衬线体 vs. 无衬线体：

    • 衬线体： 通常更具传统感、文学气息，适合营造正式、优雅或经典的氛围。笔画的粗细变化和衬线细节丰富了视觉质感。
      • 例子： Times New Roman 给人经典、严肃的学术感；Georgia 则因其较大的x高度和清晰的衬线，在屏幕上也有不错的可读性，常用于博客等。宋体/明朝体是中文衬线体的代表，文化底蕴深厚。
      • 视觉对比： 将一段文字分别用 Times New Roman 和 Arial 显示，你会立刻感受到前者更正式，后者更现代。
    • 无衬线体： 显得更现代、简洁、功能性强，适合科技、设计、新闻等领域。视觉上更直接、干净。
      • 例子： Helvetica 以其中性、清晰著称，应用极为广泛；Arial 作为其常见替代品，也具备相似的现代感。Geist Sans 如我们之前讨论的，强调简洁和开发者友好。黑体是中文无衬线体的统称，风格多样，现代黑体通常笔画粗细均等，结构清晰。
      • 视觉对比： 想象一下科技公司的网站和一本古典文学书籍的封面，它们所使用的字体风格差异就能体现无衬线体和衬线体的不同气质。

  • 字重的影响：

    • 细字重 (Light/Thin)： 给人轻盈、精致、优雅的感觉，但可读性较低，不适合大段正文，常用于大字号标题或装饰性文字。
      • 视觉对比： 用一款字体的 Thin 字重和 Regular 字重书写同一个词，Thin 字重会显得非常纤细、空灵，而 Regular 则更扎实。
    • 常规字重 (Regular)： 最适合正文阅读，平衡了可读性和视觉舒适度。
    • 粗字重 (Bold/Black)： 具有强烈的视觉冲击力，用于强调、标题，能吸引注意力。但过多使用会使版面显得沉重压抑。
      • 视觉对比： 网页上的链接或重要提示使用 Bold 字重，能立刻从普通文本中跳脱出来。

  • x高度的差异：

    • 高x高度： 字体看起来更“饱满”，小写字母更清晰，整体感觉更现代、开放。在相同磅值下，视觉上显得更大，小字号时可读性更好。
      • 例子： Verdana 就是一款以高x高度著称的无衬线字体，专为屏幕显示设计，即使在小字号下依然清晰易读。
      • 视觉对比： 将 Verdana 和一款x高度较低的字体（如 Garamond 的某些版本）以相同磅值并列显示，你会发现 Verdana 的小写字母主体部分明显更高，整体看起来也更大、更“开放”。
    • 低x高度： 字体看起来更“古典”或“优雅”，上下伸展的空间更明显，但小字号时可能不易辨认。
      • 例子： 很多古典衬线体（如某些版本的 Garamond 或 Caslon）的x高度相对较低，这赋予了它们独特的优雅感，但也限制了它们在小字号屏幕显示时的表现。

  • 字间距 (Tracking) 的影响：

    • 紧凑的字间距： 文本显得更密集、有力，但过度紧凑会降低可读性。
      • 视觉对比： 某些电影海报或品牌Logo为了追求视觉冲击力，可能会采用非常紧凑的字间距。
    • 宽松的字间距： 文本显得更“透气”、轻松，有时能提升大写字母或标题的可读性，但过度宽松会使文字失去整体感。
      • 视觉对比： 一些奢侈品牌的广告或高端杂志的排版，可能会使用略微宽松的字间距来营造高级感和空间感。

  • 行距 (Leading) 的影响：

    • 紧凑的行距： 页面可以容纳更多文字，但阅读起来会很累，缺乏呼吸感，文字行与行之间几乎没有空隙。
    • 适中的行距： 提供最佳的阅读流畅性和舒适度，文字行之间有足够的空间让眼睛轻松移动。
    • 宽松的行距： 给人奢华、从容的感觉，但如果过于宽松，段落的凝聚力会下降，读者视线可能在行间“漂移”。
      • 视觉对比： 想象一下法律文件（通常行距较小，信息密集）和一本诗集（行距可能较大，营造意境）的排版差异。

  • 字怀 (Counter) 的影响：

    • 开放/大的字怀： 字母内部空间充足，轮廓清晰，易于辨认，尤其在小字号或低分辨率屏幕上。这使得字体在视觉上更“透气”。
      • 例子： 无衬线字体如 Open Sans 或 Lato 通常拥有较大的字怀。
    • 封闭/小的字怀： 字母可能显得拥挤，辨识度降低，尤其是在字重较粗或字号较小时。某些风格化字体可能会故意缩小字怀以达到特定视觉效果。
      • 视觉对比： 观察字母 “e” 或 “a”，如果它们的内部“小洞”很大很清晰，那么这款字体的字怀就比较开放。

  • 多种字体搭配的对比与考量： 当一个设计中需要使用多种字体时（例如，一种用于标题，一种用于正文），对比和协调就显得尤为重要：

    • 衬线体 + 无衬线体： 这是非常经典且有效的搭配方式。
      • 常见组合： 无衬线体作标题（现代、醒目），衬线体作正文（传统、易读）；或者反过来，衬线体作标题（优雅、权威），无衬线体作正文（简洁、清晰）。
      • 视觉效果： 通过衬线有无的对比，可以轻松建立视觉层级，增加版面的丰富性和趣味性。关键在于选择气质相投的两种字体，例如，一款几何感强的无衬线标题字体搭配一款结构清晰、x高度适中的现代衬线体正文字体。
      • 例子： 用 Open Sans (无衬线) 做标题，搭配 Lora (衬线) 做正文，前者简洁现代，后者优雅易读。
    • 不同风格的无衬线体搭配：
      • 常见组合： 一款具有人文主义风格的无衬线体（笔画有轻微粗细变化，更具手写感）搭配一款几何风格的无衬线体（基于圆形、方形等几何形状构建）。
      • 视觉效果： 可以在保持整体现代感的同时，通过细微的风格差异来区分信息层级。需要注意避免选择风格过于接近而导致混乱，或风格差异过大而显得不协调。
      • 例子： 用 Gill Sans (人文无衬线) 做引言，搭配 Futura (几何无衬线) 做小标题。
    • 不同字重的同款字体：
      • 常见组合： 使用同一字体家族中的不同字重来区分标题、副标题、正文、强调等。
      • 视觉效果： 能保证最高的视觉统一性和品牌一致性。通过字重的变化来引导视线，创建清晰的层级。这是最安全也最常用的方法之一。
      • 例子： 正文使用 Geist Sans Regular，标题使用 Geist Sans Bold，小字说明使用 Geist Sans Light。
    • 避免冲突：
      • 相似但不同： 避免使用两款看起来非常相似但细节略有不同的字体，这会让读者感到困惑，以为是排版错误。
      • 情绪冲突： 避免将情绪表达截然相反的字体放在一起，例如一款非常俏皮的手写体和一款极其严肃的哥特体，除非你有意制造强烈的戏剧性对比。

    关键在于“对比”与“和谐”的平衡。 好的字体搭配能够让信息传递更有效，视觉体验更愉悦。多观察优秀的排版案例，并亲自尝试不同的字体组合，是提升排版能力的不二法门。

通过有意识地观察和实践，你会逐渐培养出对字体和排版的敏感度，从而能够更有效地利用它们来提升你的设计和内容表达。

16. 中英文混排的痛点与解决方案

中英文混排是数字时代非常常见的排版需求，但由于两种文字系统的巨大差异，处理不当很容易出现视觉上的不和谐。

中英文混排的常见痛点：

  • 基线不一致： 很多中文字体和西文字体的基线设计并不完全对齐。直接混排时，英文字母可能会显得比汉字“高”或“低”，造成视觉上的跳跃感。
  • 字号匹配困难： 即使设置相同的磅值 (point size)，由于中文字符通常占据一个完整的方形空间（全角），而西文字符宽度各异（半角），视觉上西文常常显得比中文小。为了达到视觉上的大小均衡，往往需要对西文字号进行微调（通常是调大一些）。
  • 风格冲突： 一款优雅的宋体中文搭配一款粗犷的西文无衬线体，或者一款现代的黑体中文搭配一款古典的西文衬线体，都可能产生强烈的风格冲突，破坏整体美感。
  • 标点符号的尴尬：
    • 全角/半角： 中文标点通常是全角，占据一个汉字宽度；英文标点是半角。混排时，标点符号的宽度和位置需要统一协调，避免突兀。例如，中文句号“。”和英文句点“.”的视觉差异。
    • 标点挤压/悬挂： 专业的排版会考虑标点符号的视觉优化，如标点挤压（让标点占据更少的实际空间）和悬挂标点（让标点位于行框之外，使文本边缘更整齐）。
  • 间距问题：
    • 中英文之间的间距： 汉字与西文字母或数字之间是否需要以及如何添加间距，是一个常见的讨论点。通常建议在汉字与西文之间保留一个适当的半角空格或通过CSS进行微调，以增加可读性，避免粘连。
    • 行距： 中文字符的方形结构使得其行与行之间通常需要比纯西文更大的行距才能保证良好的阅读体验。混排时需要找到一个平衡点。
  • 字重匹配： 中文字体的字重选择往往没有西文字体那么丰富。在需要强调或区分层级时，很难找到与西文字重完美匹配的中文字重，导致视觉效果不均衡。

业内知名的解决方案与实践（以苹果公司为例）：

苹果公司在其操作系统（macOS, iOS）和应用中，对于中英文混排的处理是业内公认做得比较出色的典范之一。其主要策略可以总结为：

  • 精心设计和挑选系统字体：
    • 西文字体 (San Francisco - SF Pro/SF Mono/SF Compact, New York)： 苹果为其平台设计了 San Francisco 系列无衬线字体和 New York 衬线字体。这些字体本身设计精良，可读性高，并且拥有非常丰富的字重和光学尺寸 (Optical Sizes)，能够适应不同尺寸和分辨率的屏幕。
    • 中文字体 (苹方 - PingFang SC/TC/HK, 宋体-简/繁 - STSong)： 苹方是苹果设备上主要的无衬线中文字体，设计现代简洁，与 San Francisco 风格较为协调。同时也提供宋体作为衬线选择。
  • 动态字体匹配与调整： 苹果的系统底层会对中西文字体进行动态的匹配和微调。当系统检测到中英文混排时，它并不仅仅是简单地将两种字体并列显示，而是会进行一些优化处理，例如：
    • 基线对齐优化： 尽可能让中西文字符在视觉上处于和谐的基线位置。
    • 字号微调： 在某些情况下，系统可能会对西文字号进行微小的缩放，使其与中文字符在视觉大小上更匹配。
    • 标点符号处理： 优化中英文标点符号的切换和显示，使其更自然。
  • 提供优秀的排版引擎和API：
    • 苹果的 Core Text (macOS/iOS) 和其他文本渲染引擎为开发者提供了强大的工具，可以进行精细的字形选择、字距调整、连字处理、标点悬挂等高级排版操作。
    • 开发者可以利用这些API来实现更专业的中英文混排效果。
  • 设计规范和人机界面指南 (Human Interface Guidelines - HIG)：
    • 苹果的HIG中包含了关于字体选择和排版的详细建议，指导开发者如何在应用中正确使用字体，以保证用户体验的一致性和高质量。
    • 这些规范强调清晰度、易读性和不同语言环境下的适应性。
  • 关注细节：
    • 例如，在数字和单位（如 “100 GB”）与中文之间，系统可能会自动处理间距，使其更易读。
    • 对于特定组合（如英文单词后的中文标点），也会有相应的优化规则。

其他通用解决方案和建议：

  • 选择“泛中日韩 (Pan-CJK)”字体： 像思源黑体 (Source Han Sans / Noto Sans CJK) 和思源宋体 (Source Han Serif / Noto Serif CJK) 这样的字体，其设计初衷就包含了对中、日、韩以及拉丁字符的全面支持和协调。它们在字形风格、基线、字重等方面都做了大量工作，以确保多语言混排时的和谐统一。这是目前解决中英文混排问题最普适和推荐的方法之一。
  • 使用CSS进行精细控制：
    • font-family 字体栈：合理设置字体栈，确保在不同系统和语言环境下都有合适的字体回退。
    • letter-spacing 和 word-spacing：微调中英文之间的间距。
    • line-height：为中英文混排设置合适的行高。
    • font-feature-settings：利用OpenType特性进行更高级的排版控制，如合字、标点变体等。
    • text-spacing (CSS Text Module Level 4 - 实验性)：旨在提供更精细的东亚文字间距控制。
  • 手动调整或脚本辅助： 对于要求极高的排版（如图书、杂志），设计师有时会手动调整特定位置的中英文间距和标点。在Web端，也可以通过JavaScript脚本在特定条件下（如检测到中英文相邻）动态添加微小的间距。
  • 遵循设计规范： 如果是为特定平台（如微信小程序、支付宝小程序）开发，应遵循其官方提供的设计规范和字体建议。

处理好中英文混排是一个需要细心和经验的挑战，但通过选择合适的字体、利用现代排版技术和借鉴优秀实践，完全可以达到清晰、美观且易读的效果。