出自UXGuide.net

字体

Fonts (Segoe UI)

目录 1 设计理念 1.1 字体、字型、点大小及属性 1.2 衬线（serif）与非衬线（sans serif） 1.3 对比度 1.4 视觉可见性（affordance） 1.5 辅助特性及系统字体、大小及颜色 2 使用模式 3 设计规范 3.1 字体及颜色 3.2 属性 4 注释与引用

用户在 Windows Vista® 上与文字的交互超过了其他任何类型的元素。Segoe UI（发音为“SEE-go”）是新的 Windows Vista® 系统字体^[1]。标准字体大小已经增加到 9 点。

Segoe UI 字体

“Segoe UI”和“Segoe”是两种不同的字体。Segoe 是为印刷设计的品牌字体，而 Segoe UI 是为用户界面文本设计的 Windows 字体。

Segoe UI 是一种亲切、开放、友好的字体，比 Tahoma、Microsoft Sans Serif 及 Arial 的可读性更强。它具有人文主义无衬线字体的特点：非等宽的大写字母（较窄的字母 E 和 S，例如，相比而言，在 Helvetica 字体中则要宽得多）；小写字母的强调及字型；以及真正的斜体（而不仅仅是“倾斜”或像许多看起来很工业化的无衬线字体那样只是把正体歪过来）。该字体希望为屏幕和印刷提供相同的视觉效果。它的设计目标是一种没有强烈字符或古怪间隙的人文主义无衬线字体。

Segoe UI 是为 ClearType 优化的，这在 Windows Vista 上是默认打开的。使用 ClearType 之后，Segoe UI 即是一种优雅可读的字体。如果没有 ClearType，Segoe UI 则只能勉强接受。这一因素决定了你何时应当使用 Segoe UI。

Segoe UI 只包含拉丁文、希腊文及西里尔文字符集。还有一些同样为 ClearType 进行了优化的，用于其他字符集的新字体。包括用于日文的 Meieryo、用于朝鲜文的 Malgun Gothic、用于中文（繁体）的 Microsoft JhengHei、用于中文（简体）的 Microsoft YaHei（微软雅黑）、用于希伯来文的 Gisha 以及用于泰文的 Leelawadee。

这些字体有两种不同的粗细样式：常规及真正的粗体。对于拉丁字母来说，Meiryo 具有斜体和加粗斜体，并为其东亚字符使用一种经过定制的合适的 Verdana 字体。而 Malgun Gothic、Microsoft JhengHei 及 Microsoft YaHei（微软雅黑）字体则使用经过定制的 Segoe UI。

为了支持在本地化中使用这些字符集，Segoe UI 应当被哪种字体替换取决于具体的本地化流程。

注：与风格与语气和用户界面文本相关的设计规范请参考各自相应的章节。

设计理念

字体、字型、点大小及属性

在传统的排版印刷术中，“字体（font）”是对字型（typeface）、点大小（point size）及属性的总体描述。“字型”是指字体的外形。Segoe UI、Tahoma、Verdana 和 Arial 都是字型。“点大小”是指字体的大小，从上伸部（ascender）的顶端算起，到下伸部（descender）的底部为止，减去内部间距（称为行距（leading））。一个点（point）大致等于 1/72 英寸。最后，字体还可以具有粗体或斜体的“属性（attribute）”。

非正式的情况下，人们通常会用“字体（font）”来代替“字型（typeface）”——就像本文所做的一样——但是从技术上来说，Segoe UI 是一种字型（typeface），而非字体（font）。这些属性的任何一种组合都是单独的字体（如 9 点的 Segoe UI 正常体、10 点的 Segoe UI 粗体等等）。

衬线（serif）与非衬线（sans serif）

字型分为衬线与非衬线两种。“衬线”是指字体中在字母笔划的末端的小转角。“非衬线”字型则没有衬线。

读者通常喜欢在文档中将衬线字体用作正文。衬线字体可以使文档看起来更加正式和典雅。对于 UI 文本来说，对清晰外观的需求以及计算机显示器的低分辨率则使非衬线字体是更好的选择。

对比度

当文本与背景的亮度差非常大时，文本最易于阅读。白色背景上的黑色文本对比度最高——很浅的背景上的深色文本同样也具有高对比度。这种组合最适合于主要的 UI 界面。

深色背景上的浅色文本具有很好的对比度，但没有在浅色背景上的深色文本那么好。这种组合适用于次要的 UI 界面，如 Explorer 任务窗格这类与主要 UI 界面相关的你希望弱化的部分。

如果你希望确保用户能够阅读你的文本，则应在浅色背景上使用深色文本。

视觉可见性（affordance）

文本可以通过以下视觉可见性来指示如何使用：

• 鼠标指针。I 字型鼠标指针表明该文本是可以选中的，而左指向箭头（“常规选择”）鼠标指针则表明文本不能被选中。
• 插入符。当文本具有输入焦点时，插入符是闪烁的竖直线以表明此可选择或可编辑文本的插入/选择位置。
• 框。文本周围的边框表明它是可编辑的。要减少呈现的复杂度，该边框可以仅在可编辑文本选中时显示。
• 前景色。浅灰色表示该文本是禁用的。非灰色，尤其是蓝色和紫色，表示该文本是链接。
• 背景色。浅灰背景色勉强可以暗示该文本是只读的，实践中，只读文本可以具有任何颜色的背景。

以下是一些视觉可见性的组合含义：

• 可编辑。显示在框内，带有文本选择鼠标指针、插入符（具有输入焦点时）以及通常位于白色背景上的文本。
• 只读、可选择。带有选择鼠标指针和插入符（具有输入焦点时）的文本。
• 只读、不可选择。带有箭头鼠标指针的文本。
• 被禁用。带有箭头鼠标指针、有时位于灰色背景上的浅灰色文本。

只读文本习惯上具有灰色背景，但灰色背景是不够的。事实上，灰色背景是不好的，尤其对大段文本，因为它暗示文本已被禁用，不鼓励阅读。

辅助特性及系统字体、大小及颜色

关于使文本能够被那些残疾或有损伤的用户访问的设计规范可以被归结为一条简单的规则：尊重用户的设置，始终使用系统字体、大小及颜色。

最重要的一件事：

尊重用户的设置，始终使用系统字体、大小及颜色。

致开发人员：在代码中，你可以通过 GetThemeFont API 函数来确定系统字体属性（包括大小）。你可以通过 GetThemeSysColor API 函数来确定系统颜色。

因为你不能对用户的系统主题设置做出任何假设，所以你应当：

• 你的字体颜色及背景应当始终基于系统主题颜色。绝不要基于固定 RGB（红绿蓝）值创建你自己的颜色。
• 始终使用与系统文本颜色相对应的背景色。例如，如果你选择 COLOR_STATICTEXT 作为文本颜色，你必须也选择 COLOR_STATIC 用作背景颜色。
• 始终基于按比例缩放的系统字体变体来创建新字体。根据系统字体度量，你可以创建加粗、倾斜、更大及更小的变体。

一个简单的确保你的程序尊重用户设置的方式是通过不同的字体大小及高比对度色彩方案来测试。所有文本的大小都应当改变，且在所选的色彩方案下应当正确显示。

使用模式

文本具有下列使用模式：

标题栏文本 在标题栏上用于标识窗口的文本。
主标题说明 在页面、窗口或对话框上解释要做什么的文本。
辅助说明 在页面、窗口或对话框上解释要做什么的附加文本。
元数据大标签 当对象被选中时显示在元数据面板内的文本。
未选中标题 当没有任何选中对象时显示在元数据面板内的文本。
普通文本 显示在用户界面上的普通（只读）文本。
强调文本 粗体文本用于用户必须阅读的文本，使其更易于分析及受到关注。斜体文本则用于文本的字面引用（代替引号）及强调特定的字词。
可编辑文本 用户可以编辑的文本会显示在文本框内。要减少呈现的复杂度，该边框可以仅在可编辑文本选中时显示。
被禁用的文本 不适用当前上下文的文本，如用于被禁用控件的标签等。被禁用文本表示用户（通常）无须阅读该文本。
链接 用于导航至其他页面、窗口或帮助主题，或是启动一个命令的文本。
文档文本 用于文档的文本（区别于用户界面文本）。
文档标题 在文档中用作标题的文本。

设计规范

字体及颜色

• 下列字体及颜色是 Windows Vista 中默认使用的。

  模式	主题符号	字体，颜色
  	CaptionFont	9 pt. 黑色 (#000000) Segoe UI
  	MainInstruction	12 pt. 蓝色 (#003399) Segoe UI
  	Instruction	9 pt. 黑色 (#000000) Segoe UI
  	（无）	12 pt. 白色 (#FFFFFF) Segoe UI
  	（无）	17 pt. 白色 (#FFFFFF) Segoe UI
  	BodyText	9 pt. 黑色 (#000000) Segoe UI
  	BodyText	9 pt. 黑色 (#000000) Segoe UI，粗体或斜体
  	BodyText	9 pt. 黑色 (#000000) Segoe UI，文本框内
  	Disabled	9 pt. 深灰色 (#323232) Segoe UI
  	HyperLinkText	9 pt. 蓝色 (#0066CC) Segoe UI
  	Hot	9 pt. 浅蓝色 (#3399FF) Segoe UI
  	（无）	9 pt. 黑色 (#000000) Calibri
  	（无）	17 pt. 黑色 (#000000) Calibri

• 应当基于 UI 技术及目标 Windows 的版本来选择字体并优化窗口布局：

  UI 技术	目标窗口版本	要使用及优化的字体
  Windows Presentation Foundation	所有	使用 WPF 主题部分。
  Win32 或 WinForm	Windows Vista 或更高	使用适当的 Segoe UI 字体。
  	可扩展组件或 Windows Vista 之前的	对于 Windows® XP 和 Windows 2000，应使用 8 点的 MS Shell Dlg 2 伪字体，它将映射到 Tahoma。 对于更早版本的 Windows，使用 8 点的 MS Shell Dlg 伪字体，它在 Windows 2000 和 Windows XP 上将映射到 Tahoma，而在 Windows 95、Windows 98、Windows Millennium Edition 和 Windows NT 4.0 上将映射到 MS Sans Serif。

  致开发人员：

  • 对于使用固定布局的元素来说（如 Windows 对话框模板及 WinForm），根据上表将合适的字体进行硬编码。
  • 对于使用动态布局的元素来说（如 Windows Presentation Foundation），使用主题字体。使用像 DrawThemeText 这样的主题 API 来基于主题符号。确保包含了用于主题服务未运行时基于系统度量的备用方案。
• 对于 Segoe UI，使用 9 点或更大的字体。Segoe UI 字体是为这些大小优化的，避免使用更小的尺寸。
• 始终使用与系统文本颜色相对应的背景色。例如，如果你选择 COLOR_STATICTEXT 作为文本颜色，你必须也选择 COLOR_STATIC 用作背景颜色。
• 始终基于按比例缩放的系统字体变体来创建新字体。根据系统字体度量，你可以创建加粗、倾斜、更大及更小的变体。
• 将大段的只读文本（如许可协议）显示在浅色背景而非灰色背景上。灰色背景暗示文本已被禁用，不鼓励阅读。
• 考虑每行最多 65 个字符以使文本易于阅读。（字符包括字母、标点及空格。）

属性

• 绝大多数用户界面文本应当是普通的——没有任何属性。属性可以按下列方式使用：
  • 粗体。用于控件标签以使文本易于阅读。保守使用以将用户的注意力吸引到那些必须阅读的文本上。使用过多的粗体会削弱其影响。
  • 斜体。用于代替引号进行字面引用。保守使用以强调特定的字词。也在文本框及可编辑下拉列表中用于提示（prompt）。
  • 粗斜体。不使用。
  • 下划线。不要在链接以外的地方使用。用斜体来表示强调。

并非所有字体都支持粗体和斜体，因此这不应影响到对文本的理解。

注释与引用

1. ^ 指拉丁文，中文系统字体为微软雅黑——译者注