WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Meet the expanded San Francisco font family

Meet the expanded San Francisco font family

DesignTypographySwiftUI
观看原视频

Highlight

San Francisco 字体家族在 WWDC22 新增三种字宽变体（Condensed、Compressed、Expanded），与原有字重组合形成更丰富的排版层级；同时推出 SF Arabic 和 SF Arabic Rounded，将 SF 的设计语言扩展到阿拉伯语系。

核心内容

San Francisco 字体家族概览

Apple 平台的系统字体 San Francisco 经过多年演进，已经形成一个功能完整的字体家族。不同子家族针对不同场景优化：

  • SF Pro / SF Pro Rounded：iOS、iPadOS、macOS、tvOS 的主系统字体
  • SF Compact / SF Compact Rounded：为窄栏和小字号优化，watchOS 默认字体
  • SF Mono：等宽字体，用于 Xcode 和 Swift Playgrounds 等编码环境

每个家族都提供从 Ultralight 到 Black 的完整字重梯度，以及光学尺寸（Optical Sizes）自动调整——系统根据字号自动微调笔画粗细、字腔开口和字距，大字号更优雅，小字号更清晰。

三种新字宽：排版控制的新维度

WWDC22 之前，SF Pro 只有 Regular 一种字宽。现在增加了三个新成员：

Condensed：比 Regular 窄，但仍保持舒适的阅读比例。适合在有限空间内放更多文字，比如新闻标题从五行缩到四行。

Compressed：目前 SF 中最紧凑的字宽，扁平的笔画造型让它极具图形感。适合大字号标题和短标签，但不适合长段落阅读。

Expanded：宽松开放的笔画比例，视觉上很有冲击力。适合展示性排版、地图上的地理标签、或作为标题与正文形成对比。

这些字宽和字重组合后，形成一个”风格地图”：中心区域（Regular 宽度配中等字重）最中性、最通用；边缘区域（极端字重和字宽组合）更富表现力，适合吸引注意力。

实际应用案例

Photos 的 Memories 标题：用 Compressed 和 Expanded 形成强烈对比，大字号配不同字宽让文字本身成为视觉元素，从 UI 背景中跳脱出来。

News 的新闻标题：一条长标题用 Condensed 可以从五行缩到四行，用 Compressed 甚至可以缩到三行。省出的空间给图片和摘要，同时标题本身更有存在感。副标题用 Expanded 与主标题形成层次对比。

Maps 的地图标签：不同地理要素用不同字宽区分——山脉标签用 Expanded 配宽松字距，道路标签用 Condensed，国家和洲用 Regular。整个地图的排版系统既统一又有层次。

阿拉伯语字体：SF Arabic 和 SF Arabic Rounded

WWDC21 推出了 SF Arabic，基于 Naskh 风格的现代诠释，与 San Francisco 家族视觉协调。支持 Ultralight 到 Black 的完整字重，以及针对阿拉伯文优化的光学尺寸——Text 样式笔画对比度高、字距宽，保证可读性；Display 样式几何更简洁，与 SF 的现代感一致。

WWDC22 新增 SF Arabic Rounded，圆角设计丰富了阿拉伯语排版的表现力，在 Reminders 和 Fitness 等 App 中已有应用。

详细内容

字宽对比的视觉效果

（07:52）

同一文本、同一字重、不同字宽的对比：

字宽特点适用场景
Expanded最宽松，视觉冲击力强大标题、地图标签、副标题
Regular标准比例，最通用正文、大多数 UI 文本
Condensed较窄，仍保持可读性空间受限的标题、长标签
Compressed最紧凑，图形感强短标题、大字号展示

关键洞察：不同字宽的垂直比例完全一致，混用时不需要调整字号来对齐。只有水平比例变化，替换字体时视觉尺度保持一致。

字体配对策略

（09:48）

三种建立排版层级的方法：

同一字宽，对比字重：

Text("主标题")
    .font(.system(size: 48, weight: .black, design: .default))
    .fontWidth(.expanded)

Text("副标题")
    .font(.system(size: 24, weight: .light, design: .default))
    .fontWidth(.expanded)

同一字重，对比字宽：

Text("HEADLINE")
    .font(.system(size: 36, weight: .bold, design: .default))
    .fontWidth(.compressed)

Text("Caption text")
    .font(.system(size: 14, weight: .bold, design: .default))
    .fontWidth(.expanded)

混合字重和字宽：

Text("EXTREME")
    .font(.system(size: 48, weight: .black, design: .default))
    .fontWidth(.compressed)

Text("contrast")
    .font(.system(size: 48, weight: .ultraLight, design: .default))
    .fontWidth(.expanded)

在 SwiftUI 中使用新字宽

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Compressed Title")
                .font(.system(size: 32, weight: .bold))
                .fontWidth(.compressed)
            
            Text("Regular Body Text")
                .font(.body)
                .fontWidth(.standard)
            
            Text("Expanded Label")
                .font(.system(size: 16, weight: .medium))
                .fontWidth(.expanded)
        }
    }
}

关键点：

  • .fontWidth() 是 iOS 16/macOS 13 新增的修饰符
  • 可选值：.compressed、.condensed、.standard、.expanded
  • 与 .font() 搭配使用，先设置字号和字重，再调字宽
  • 系统会自动选择对应的光学尺寸

在 UIKit 中使用

import UIKit

let label = UILabel()
let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .headline)
    .withDesign(.default)
    .withSymbolicTraits(.traitExpanded)

if let expandedDescriptor = descriptor {
    label.font = UIFont(descriptor: expandedDescriptor, size: 0)
}

关键点：

  • withSymbolicTraits(.traitCompressed)、.traitCondensed、.traitExpanded 控制字宽
  • withDesign(.default) 确保使用 SF Pro
  • 字号传 0 表示使用描述符中的默认字号

阿拉伯语字体支持

// 系统会根据当前语言环境自动选择 SF Arabic
Text("مرحبا بالعالم")
    .font(.largeTitle)

// 显式指定设计变体
Text("Hello")
    .font(.system(size: 24, design: .rounded))

关键点：

  • SF Arabic 和 SF Arabic Rounded 是系统字体，不需要额外安装
  • 当设备语言设为阿拉伯语时，系统会自动调用 SF Arabic
  • 光学尺寸、字重、圆角变体与拉丁文版本保持一致的设计语言

核心启发

1. 为阅读类 App 设计层次分明的标题系统

  • 做什么：在新闻、博客、阅读 App 中用不同字宽建立标题层级，替代单纯依赖字号大小区分
  • 为什么值得做：Condensed 让长标题更紧凑，Expanded 让副标题更有呼吸感，同一页面内的文字层次更丰富
  • 怎么开始：用 .fontWidth(.compressed) 做一级标题，.fontWidth(.standard) 做二级标题，.fontWidth(.expanded) 做标签和元数据

2. 构建数据密集型仪表板

  • 做什么：在股票、天气、健身数据面板中，用 Compressed 字宽在有限空间内展示大数字
  • 为什么值得做：Compressed 在相同字号下占用的水平空间最少，可以在小卡片里放下更大的数字，提升可读性
  • 怎么开始：关键指标数字用 .fontWidth(.compressed) + .weight(.bold)，单位和小数部分用 Regular 字宽形成对比

3. 设计多语言一致的全球化 App

  • 做什么：为阿拉伯语市场优化 App 界面，利用 SF Arabic 的光学尺寸和字重系统
  • 为什么值得做：SF Arabic 与 SF Pro 视觉协调，混排时不会出现字体风格割裂；完整的字重支持让排版层级在阿拉伯语界面中同样清晰
  • 怎么开始：确保使用系统字体（.font(.body) 等）而非硬编码字体名，测试阿拉伯语布局时检查 RTL 适配和字重一致性

4. 制作富表现力的 onboarding 和空状态页面

  • 做什么：在 App 的引导页和空状态页面中，用极端字宽组合创造视觉记忆点
  • 为什么值得做：Compressed + Black 和 Expanded + Light 的对比极具冲击力，让文字本身成为插画元素
  • 怎么开始：大标题用 .fontWidth(.compressed).fontWeight(.black)，辅助文字用 .fontWidth(.expanded).fontWeight(.light)，配合大字号形成强烈对比

关联 Session

评论

GitHub Issues · utterances