版式指南

说明

版式是 Microsoft 设计语言的核心。每个 Microsoft 设计原则都强调版式的重要性。应用开发人员首次可以使用一组支持高级版式功能的框架。

应做事项和禁止事项

• 使用版式网格为你的文本布局。
• 使用 Unicode 改进你的文本。
• 全局应用 Microsoft OpenType 功能。
• 使用句子大小写。
• 在数字范围中使用短破折号代替连字符。
• 如果不使用建议的字体，请不要应用任意连字。
• 不要使用两端对齐的文本。

其他使用指南

Segoe UI

Segoe UI 是 Windows 中的签名用户界面字体，是在 Windows Vista/Office 2007 时间范围内引入的。 它是按照标志组和路径查找字样的传统绘制的 sans serif 设计。Segoe UI 自引入之后，已经定义了所有 Microsoft 产品的个性化，不仅影响了操作系统、应用和设备的外观，而且还影响了徽标、品牌、广告和包装。此字样代表 Microsoft 的版式本质。

在 Windows 8 中，我们对 Segoe UI 系列进行了重大升级。共进行了如下重大更改：

• 为了提高 Segoe UI Light 和 Segoe UI Semibold 的屏幕呈现质量，对它们进行了调整。
• 我们调整了默认数字以及 "Q" 与 "I" 的设计，使它们与 Windows Phone 版本的 Segoe 相匹配。你仍可以通过使用 OpenType“样式集”(SS01) 来使用原始的 Windows Vista 窗体。
• 在 Segoe UI Light、Semilight 和 Semibold 中，默认情况下我们按比例创建了数字空格。通过将 Typography.NumeralAlignment 附加属性设置为“Tabular”，可以在使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用中访问更传统的固定间距数字。如果使用 JavaScript 和 HTML，请将 font-feature-settings property 设置为“TNUM”以应用表格（固定间距）数字间距 OpenType 特性。
• 由于设计人员通常使用小于 20pt（即设计字体）的 Segoe UI，因此我们添加了 Segoe UI 半细（一种轻量版本的 Segoe UI，甚至以低到 11p 的较小尺寸完美呈现）。当你希望时较小的文本看上去较细时，我们建议使用此字体。
• 在 Windows Vista 和 Windows 7 中，Segoe UI 支持拉丁语、希腊语、西里尔文和阿拉伯语（仅限常规字体和粗体）。对于 Windows 8，我们为了包括希伯来语、亚美尼亚语和格鲁吉亚语而对 Segoe UI 进行了扩展，我们还更细了阿拉伯语。Segoe UI 现在包括所有主要欧洲和中东语言的全套字符集。
• 尽管 Windows UI 不使用斜体，但是我们为所有五个 Segoe UI 粗细添加了斜体变体以供应用使用。
• 我们为字体添加了高级 OpenType 变体（包括所有粗细的小型大写、连字和数字样式）。

在 Windows 8.1 中，我们添加了 Segoe UI Black 和 Segoe UI Black 斜体（包含许多泛欧洲语言），进一步扩展了可用字体选择的范围。

其他语言的字体

Windows 8 还包括大多数其他语言的 Segoe UI 对齐字体。这些字体用以下两种粗细来提供：常规和粗体。尽管我们没有为日语包括 Segoe UI 对齐字体，但是我们的日语 UI 字体 Meiryo UI 包括 Segoe UI 样式的拉丁语字符和作为 OpenType 样式集 (ss20) 的数字。

以下是适用于常用语言和脚本的建议字体列表：

请注意，Windows 8.1 还提供了以下字体：

• Microsoft YaHei UI 细（可用于 20pt 及以上）
• Microsoft JhengHei UI 细（可用于 20pt 及以上）
• Leelawadee UI 半细（可用于 11pt 及以上）
• Nirmala UI 半细（可用于 11pt 及以上）

如果你在对应用进行本地化时使用内置字体，请参阅 Windows.Globalization.Fonts API 来为给定的书写系统识别建议的 UI 和文档字体。

使用备用字体

将 Segoe UI 与 Windows 8 和 Microsoft 关联既有优点又有缺点。一方面，如正确使用，可以立即增加应用的可信度。但是，使用该字体可能会很难将你自己的独特个性或品牌融入应用中。

幸运的是，Windows 8 附带了许多高质量的字体来替换 Segoe UI。Serif 字体（如 Cambria）能够适用于许多语言并可以提供传统外观。用户将会熟悉 Calibri（我们的默认创作字体）。 在 Windows 8 中，已向 Calibri 添加了粗细，从而使用良好的 sans-serif 替代对象替换 Segoe UI。与 Segoe UI 一样，Cambria 和 Calibri 都包括高级 OpenType 功能。在 Windows 8.1 中，我们也添加了称为 Sitka 的新字样集，它可用于大小范围。

当你使用内置字体时，请在全新安装 Windows 8 的计算机上测试它，以便你可以验证该字体是否可用，以及它是否不需要安装 Microsoft Office 或其他应用。无论 Windows 8 和 Windows 8.1 是否经过本地化或者采用哪个版本，它们都随附了完全相同的字体集。

如果核心的 Windows 字体集没有提供你所需的字体，你可以在你的应用中嵌入备用字体。但是，请注意可能的呈现和许可问题，如：

• 大多数第三方字体都与 Windows 内置字体具有不同的暗示级别，因此请确保以你所关注的大小彻底测试它们。
• 尽管大多数字体许可证都允许使用某种形式的文档字体嵌入，但是大多数许可证都不允许在应用或游戏中重新分发或嵌入字体。在嵌入字体之前，请确保仔细阅读字体许可证，如果你对于自己能否嵌入某个字体有疑问，请与字体的创建者联系。

选择合适的大小和粗细

伴随着桌面出版的到来，现在能够方便地访问大量字型大小和粗细。早期的桌面出版商经常在同一个文档中使用大量字型大小和粗细 - 这是业余版式的标志。如果字型大小和粗细太多，可能会很难建立有效的信息层次结构。因此，Windows 8 UI 仅使用少量的字体大小和粗细：

• Segoe UI 细 42 磅（针对大标题）
• Segoe UI 细 20 磅（针对标题）
• Segoe UI 半细 11 磅（针对正文）
• Segoe UI 常规 9 磅（针对大字幕）

有关完整的字型渐变，请参阅字体指南。

  Windows 字型渐变是为黑色背景上的浅色文本优化的，特意使用较细的字体。如果你的应用主要是在浅色背景上显示深色文本，则可能不适合遵循此渐变，因为 Segoe UI 细或半细之类的字体在小字体（浅灰色背景上的深灰色文本）下不能很好地显示。字体越粗（如常规或半粗），越适合在浅色背景上显示深色文本。

如果你决定不遵循 Windows 8 字型渐变，请尽量缩小字型大小和样式的范围。

布置应用页面

文本周围的空白量与字体大小一样重要，因此，我们建议你使用版式网格来布置文本。如需深入了解 Windows 网格的处理，请参阅设置应用页面的布局。 除了使用网格外，请特别注意图片和插图周围的页边距和空白。如果文本以较差的方式排列在图像周围，或者页面元素的页边距不一致，则可能会使布局遭到破坏。

实现良好版式的 8 个提示

为了实现良好的版式，远不只是使用合适的字体、字体大小和不错的间距那么简单。尽管有许多关于版式的手册（请参阅建议的阅读部分），但下面的几个提示能够帮助你将版式提升一个级别。

1. 在全局应用 OpenType 功能

如果你使用一个建议的 UI 字体，请将下列 OpenType 功能应用于所有文本：字距调整 (kern)、任意连字 (dlig) 和样式集 20 (ss20)。

• 字距调整可改进文本的字母间距，字体越大越明显（例如，下面的“应用之前”和“应用之后”插图中的 "To"。
• 连字是高质量版式的关键元素，但是为了防止出现传统内容中的对话框重排，我们在 Segoe UI 中将标准的连字编码为任意连字，因此你必须打开它们才能使用它们。
• OpenType 样式集 20 允许你访问首选字母形状和间距。（这个样式集对于数字尤其重要。）还有一个额外的好处，那就是当你应用此样式集时，它确保在所有的 Segoe UI 粗细和样式之间进行一致的文本呈现。

如果你未使用建议的 UI 字体，最好仅应用字距调整 (kern) 和标准连字 (liga)。 如果你决定不使用建议的字体，请不要应用任意连字。

<p class='note'>
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>

.note {
    font-family: 'Segoe UI';
    -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1
}

下面的两个插图分别显示在应用 OpenType 功能之前和之后的文本。

应用之前	应用之后

2. 利用 Unicode 的功能

通过使用正确的字符来避免纯 ASCII 文本是实现专业文本外观的首选方法。

• 避免使用直引号和撇号
• 使用乘号字符而不使用小写 "x"
• 考虑使用比率符号（而非冒号）作为时间分隔符
• 利用正确的破折号而非连字符或减号

连字符的最常见错误用法是用在数字范围中；应改用短破折号。另外一个版式细化就是在短破折号之前和之后使用微间隔。最后，使用齐线数字或全大写文本，将短破折号稍微提升一些，以便它位于视觉字母的中心。

如果你的应用会显示你不能控制的内容（例如新闻源），你可以使用基本的字符串搜索和替换技术自动地实时更正此内容。

下面是几个使用 Unicode 改进文本的示例。

没有 Unicode 符号	有 Unicode 符号	要使用的 Unicode 代码点
		U+201C, U+201D
		U+2019
		U+2236
		U+00D7
		U+00BD
		U+2026
		U+2013、U+200A （微间隔）

Unicode 还包括数千个符号（其中包含已添加到标准中的 722 个 emoji 符号）。你可以在你的应用中使用其中的许多符号来代替文本和位图。有关可用符号的列表，请参阅 Segoe UI Symbol 图标列表。

3. 使用句子大小写

当与文本通信时，全局适用的方法是使用传统的句子大小写。全大写或全小写样式的文本将不会转换到仅使用一个大小写的国际书写系统中。使用标准句子大小写以使更广泛的受众更易于访问你的应用。

4. 有选择性地使用 OpenType 功能

如果遵循前三个规则，则文本的形状将非常好。但是，如果你希望将文本的外观提升一个级别，则可以向文本的特定部分应用 OpenType 功能。例如，使用小型大写这一 OpenType 功能来将首字母缩略词换行。此功能应用真正的小型大写（而不是按比例缩小的大写）。如果你的内容包含数字，请向文本应用旧样式的数字。此功能使用可能会使内容更好看的旧样式数字（又称为小写数字）。

下面是一个示例：

<p style="font-family: ’Segoe UI’;" >
   In <span style="font-feature-settings: ’onum’ 1;">2012</span> <span style="font-feature-
   settings: ’c2sc’ 1;">NASA</span> sent <span style="font-feature-settings: ’onum’ 1;">5</span> 
   astronauts to the <span style="font-feature-settings: ’c2sc’ 1;">ISS</span>
</p>

在应用旧样式数字这一功能之前：

之后：

5. 编辑

编辑是通常被忽略的版式方面。许多设计人员忘了考虑文本本身需要进行某些方面的修改。但是，如果文本编写得不够好且不易于理解，再好看也没用。

6. 有效地使用字距调整、字距、连字符和对齐

正如任何字型设计人员告诉你的那样，字母之间的距离与字母形状一样重要。字距调整（在第一个规则中提到过）在特定的字母对之间应用间距调整以改进字母间距。我们建议你向所有的内容应用字距。

另一方面，字距将字符串中所有字母之间的距离增加（或去除）相同的大小。由于字体的默认字母间距通常为了增强特定大小时的可读性而进行优化，因此稍微增加些间距可能会非常适合。字距值为 .01em 或 .02em 可能会非常有用。

使用完全对齐文本会使获得比较好的间距变得很难。 当文本被强制通过对齐适应容器时，它的间距总是不好看。在对齐文本的内容中，字与字之间通常有一个较大的空白区域。请尽可能避免使用完全对齐的文本并遵循左对齐原则，还应当应用连字符以使文本的右边缘看上去比较齐。

7. 使用基于字体的控件

Windows 版式的一个神奇之处就是 UI 中使用的许多按钮、图标和控件实际上都是基于字体的。这些不是位图或可缩放矢量图形 (SVG)，而是映射到 Segoe UI Symbol 字体的 Unicode 专用区的字形。各种展示应用都使用同一方法来提供其图标和控件。

基于字体的图标和控件与常规字体字符一样缩放，可以与其他文本元素对齐，可以通过分层来用不同的颜色显示。Windows 8.1 支持所有颜色的字体，进一步扩展了基于字体的控件的可能性。

8. 让读者自定义阅读体验

提供一些允许用户更改正文大小而不影响系统范围设置的设置。我们建议使用以下值：小 (11pt)、中 (14pt) 和大 (18pt)。另外，应用还可以允许读者在浅色背景深色文本（最适于提高可读性）和深色背景浅色文本（在某些环境中可能有助于减少眼睛疲劳）之间进行选择。为用户提供不同的正文字体选项会受到在专用的电子阅读设备上使用此功能的读者的青睐。请使选项列表尽可能小而且适合所用语言。

在创建阅读应用时，请考虑在底部应用栏中添加一个浮出控件，该控件允许用户在文本大小之间切换。你可以使用 Segoe UI Symbol 字号图标为用户创建一致的可预知体验。有关标准图标概述，请参阅 Segoe UI Symbol 图标列表。

下图显示了一个带有浮出控件的新应用，该控件用于调整应用栏上的文本大小。

建议的阅读

遵循上面概述的基本建议会为你的应用提供不错的版式。但是，上面只是肤浅地探讨了在使用现代字样和 OpenType 功能时可能遇到的事情。如果你还有兴趣，我们建议你查阅下列书籍：

• The Elements of Typographic Style（版式风格应用），作者为 Robert Bringhurst
• Inside Paragraphs: Typographic Fundamentals（段落内幕：版式基础），作者为 Cyrus Highsmith
• Detail in Typography（版式细节），作者为 Jost Hochuli
• Thinking with Type（字型思维），作者为 Ellen Lupton
• Stop Stealing Sheep（别再偷羊），作者为 Erik Spiekermann 和 E.M. Ginger

IEBlog 文章 Using the whole font（使用所有字体）提供了有关如何应用级联样式表 (CSS) OpenType 功能的绝佳入门，Monotype、FontShop 和 Font Bureau 提供的链接演示说明了在使用该技术时可能出现的各种情况。

对于设计人员

字体指南

标签（或文本块）

Segoe UI Symbol 图标指南

设置应用页面的布局

浮出控件指南（Windows 应用商店应用）

对于开发人员 (HTML)

font-feature-settings property

对于开发人员 (XAML)

Windows.Globalization.Fonts

Typography.NumeralAlignment 附加属性