Apple HIG:字体排版(Typography)

2026年5月10日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 20 篇文章查看全部

你选择的字体排印方式有助于显示清晰易读的文本、传达信息层级结构、传递重要内容,以及宣传你的品牌或风格。


一、确保易读性

使用大多数用户都可轻松阅读的字号。用户需要在不同视距和各种条件下都能够阅读你的内容。对于自定义和系统字体,遵循每个平台建议的默认和最小文本字号,从而确保文本在所有设备上都清晰易读。请注意,字重也会影响文本的易读性。如果使用纤细体自定义字体,请尽量使用比建议字号更大的字号提高易读性。


平台默认字号最小字号
iOS、iPadOS17 点11 点
macOS13 点10 点
Apple tvOS29 点23 点
visionOS17 点12 点
watchOS16 点12 点

测试不同环境下的易读性。例如,你需要在游戏所运行的每个平台上测试游戏文本的易读性。如果测试表明部分文本难以阅读,应考虑使用更大的字体字号,通过修改文本或背景颜色以增加对比度,或者使用像系统字体这样旨在改善易读性的字样。

截屏显示在横排 iPhone 上运行的游戏。三株植物的每株上方都显示一个名称,状态信息显示在右上角的圆角矩形中。所有文本使用的字号都太小,且三个植物的名称没有可见背景。


在新平台上测试游戏可呈现文本难以阅读的位置。

截屏显示在横排 iPhone 上运行的游戏。三株植物的每株上方都显示带阴影的药丸形状,名称显示在其中,状态信息显示在右上角的圆角矩形中。所有文本都使用了推荐的最小文本字号。


增加文本字号和添加可见背景形状有助于增加文本的易读性。

一般而言,避免采用细体字重。例如,如果使用系统提供的字体,应首选“常规体”、“中黑体”、“中粗体”或“粗体”字重,避免使用“极细体”、“纤细体”和“细体”字重,因为尤其当文本较小时,这类字重会难以看清。

二、传达层级结构

根据需要调整字重、字号和颜色以强调重要信息并帮助用户看清信息层级结构。当用户调整文本字号时,确保维持文本元素的相对层级结构并在视觉上进行区分。

尽量减少字样的使用数量,在高度自定义的界面中也是如此。混用太多种不同的字样可能会让信息层级结构变得模糊,并妨碍阅读,此外还会让用户觉得界面内部不一致或者设计拙劣。

响应文本字号更改时,优先显示重要内容。并非所有内容都同等重要。当用户选择更大的文本字号时,他们通常想让关注的内容更易阅读,而不会总是想要放大屏幕上的每个字词。例如,当用户增加文本字号以阅读标签页窗口中的内容时,他们不希望标签页标题的字号也随之增加。同理,相较于游戏中的瞬态命中伤害值,用户往往对角色的对话更感兴趣。

三、使用系统字体

Apple 提供了两种字样系列,可支持各种不同的粗细、字号、样式和语言。

San Francisco (SF) 属于 Sans Serif 字样系列,其中包括 SF Pro、SF Compact、SF Arabic、SF Armenian、SF Georgian、SF Hebrew 和 SF Mono 变体。


系统还提供了 SF Pro、SF Compact、SF Arabic、SF Armenian、SF Georgian 和 SF Hebrew 圆体变体供你使用,让文本与柔和或圆润的用户界面元素保持协调,或者提供备选字体排印个性。

New York (NY) 属于 Serif 字样系列,可单独使用,也可结合 SF 字体使用。


你可以在此处下载 San Francisco 和 New York 字体。

系统以可变字体格式提供了 SF 和 NY 字体,该格式将不同字体样式全都整合到一个文件中,并支持样式间内插以创建中间样式。

注:可变字体支持视觉字号调整,它指的是调整不同的字体排印设计以适应不同的字号。系统字体在所有平台上支持动态视觉字号,该功能会将独立的视觉字号(例如“文本”和“显示”)和粗细合并到单个连续的设计中,从而让系统内插每个图形或字形以生成精确适应点大小的结构。有了动态视觉字号,你便无需使用独立的视觉字号,除非你使用的工具并未支持可变字体格式的所有功能。

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
Apple HIG:页面控制(Page controls)Apple HIG:页面控制(Page controls)
Apple HIG:提醒(Alerts)Apple HIG:提醒(Alerts)
Apple HIG:操作表单(Action sheets)Apple HIG:操作表单(Action sheets)
Apple HIG:进度指示符(Progress indicators)Apple HIG:进度指示符(Progress indicators)
Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Apple HIG:材质(Materials)Apple HIG:材质(Materials)