Meet the expanded San Francisco font family

ハイライト

San Francisco フォント ファミリは、WWDC22 で 3 つの新しいフォント幅バリアント (Condensed、Compressed、Expanded) を追加しました。これらは、元のフォントのウェイトと組み合わされて、より豊かなタイポグラフィ レベルを形成します。 SF アラビア語および SF アラビア語ラウンドも開始され、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 などのコーディング環境で使用される等幅フォント

各ファミリーは、ウルトラライトからブラックまでの完全なフォント ウェイト グラデーションと、光学サイズの自動調整を提供します。システムは、フォント サイズに応じて、ストロークの太さ、フォント キャビティの開口部、およびフォントの間隔を自動的に微調整します。フォント サイズが大きいほどエレガントになり、フォント サイズが小さいほど鮮明になります。

3 つの新しいフォント幅: 組版コントロールの新次元

WWDC22 より前は、SF Pro のフォント幅は「標準」の 1 つだけでした。新たに 3 名のメンバーが追加されました。

Condensed: 通常よりも狭いですが、快適な読書比率を維持しています。ニュースの見出しを 5 行から 4 行に減らすなど、限られたスペースにより多くのテキストを配置する場合に適しています。

圧縮: 現在SFで最もコンパクトなフォント幅で、フラットなストローク形状により非常にグラフィックになります。大きなフォントのタイトルや短いタグには適していますが、長い段落を読むのには適していません。

拡張: ゆったりとしたオープンなストロークのプロポーションは、視覚的にインパクトがあります。表示レイアウト、地図上の地理タグ、または本文と対比するタイトルとして適しています。

これらの幅とウェイトを組み合わせて「スタイル マップ」を形成します。中央の領域 (通常の幅と中程度のウェイト) が最もニュートラルで多用途です。エッジ領域 (極端な重量と幅の組み合わせ) はより表現力豊かで、注目を集めるのに適しています。

実際の応用例

写真の思い出のタイトル: 圧縮と拡張を使用して、強いコントラストを作成します。大きなフォント サイズとさまざまなフォント幅により、テキスト自体が視覚要素となり、UI の背景から飛び出すようになります。

ニュースの見出し: 長い見出しは、圧縮を使用すると 5 行から 4 行に、さらには圧縮を使用すると 3 行に短縮できます。節約されたスペースは写真と要約用であり、タイトル自体の存在感が増します。 Expanded を使用して、サブタイトルとメイン タイトルを対比させます。

マップのマップ ラベル: さまざまな地理的フィーチャは、さまざまなフォント幅によって区別されます。山のラベルはフォントの間隔が緩やかな拡張を使用し、道路ラベルは圧縮を使用し、国と大陸は標準を使用します。マップ全体のレイアウト システムは統一されており、階層化されています。

アラビア語フォント: SF アラビア語および SF アラビア語 Rounded

WWDC21 では、ナスク スタイルの現代的な解釈に基づいた、サンフランシスコの家族と視覚的に調和した SF アラビア語を紹介します。ウルトラライトからブラックまでの完全なフォント ウェイトと、アラビア語に最適化された光学サイズをサポート - テキスト スタイルのストロークは、読みやすさを確保するために高コントラストと広いフォント間隔を備えています。表示スタイルのジオメトリはより簡潔になり、SF の現代的な雰囲気と一致します。

WWDC22 では SF アラビア語の Rounded が追加されます。角の丸いデザインはアラビア語のタイポグラフィーの表現力を豊かにし、リマインダーやフィットネスなどのアプリで使用されています。

詳細

単語幅のコントラストの視覚効果

（07:52）

同じテキスト、同じフォントの太さ、異なるフォント幅の比較:

フォント幅	特長	該当するシナリオ
拡大	最もゆるくて、最も視覚的にインパクトのある	見出し、マップラベル、サブタイトル
レギュラー	標準比率、最も一般的	本文テキスト、ほとんどの UI テキスト
凝縮	狭いながらも読みやすい	スペースに制約のあるタイトル、長いタグ
圧縮された	最もコンパクトで強力なグラフィックセンス	短いタイトル、大きなフォント表示

重要な洞察: 異なるフォント幅の垂直方向の比率はまったく同じであり、混合時にフォント サイズを調整して揃える必要はありません。フォントを置き換えても、水平方向の比率のみが変更され、視覚的なスケールは一貫したままになります。

フォントペアリング戦略

（09:48）

タイポグラフィ階層を確立する 3 つの方法:

同じ単語幅、単語の重みを比較:

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 アラビア語および SF アラビア語 Rounded はシステム フォントであり、追加のインストールは必要ありません。
• デバイスの言語がアラビア語に設定されている場合、システムは自動的に SF アラビア語を呼び出します。
• 光学サイズ、フォントの太さ、角の丸いバリエーションは、デザイン言語のラテン語版と一致しています。

重要ポイント

1.読書アプリ用の階層タイトル システムを設計する

• 対処法: ニュース、ブログ、読書アプリでタイトル階層を作成するには、フォント サイズの違いだけに依存するのではなく、異なるフォント幅を使用します。
• 実行する価値がある理由: Condensed では長いタイトルがよりコンパクトになり、Expanded では字幕がよりわかりやすくなり、同じページ内のテキスト レベルがより豊富になります。
• 開始方法: を使用します.fontWidth(.compressed)第一レベルのタイトルを作成し、.fontWidth(.standard)サブタイトルを作成し、.fontWidth(.expanded)タグとメタデータを作成する

2.データ集約型のダッシュボードを構築

• 対処法: 在庫、天気、フィットネス データ パネルの限られたスペースに大きな数字を表示するには、圧縮フォント幅を使用します。
• 実行する価値がある理由: 圧縮すると、同じフォント サイズで必要な水平方向のスペースが最小になるため、小さなカードに大きな数字を入れて読みやすくすることができます。
• 開始方法: キーインジケーター番号が使用されます.fontWidth(.compressed) + .weight(.bold)、単位と小数部分は通常のフォント幅と対比されます。

3.複数の言語で一貫性のあるグローバル アプリを設計します

• 内容: SF Arabic の光学サイズと重量システムを活用して、アプリのインターフェイスをアラビア市場向けに最適化します。
• 価値がある理由: SF アラビア語と SF Pro は視覚的に調整されており、混合してもフォント スタイルが分離されません。完全なフォント ウェイトのサポートにより、アラビア語インターフェイスでも植字階層が同様に明確になります。
• 開始方法: 必ずシステム フォントを使用してください (.font(.body)など) アラビア語レイアウトをテストするときに、フォント名をハードコーディングする代わりに、RTL 適応とフォント ウェイトの一貫性をチェックします。

4.表現力豊かなオンボーディングと空のステータス ページを作成します

• 対処法: 極端なフォント幅の組み合わせを使用して、アプリのオンボーディング ページと空のステータス ページに視覚的な記憶ポイントを作成します。
• 実行する価値がある理由: 圧縮 + 黒と拡張 + ライトのコントラストは非常にインパクトがあり、テキスト自体がイラスト要素になります
• 開始方法: 見出しの場合.fontWidth(.compressed).fontWeight(.black)、補助テキスト用.fontWidth(.expanded).fontWeight(.light)大きなフォントサイズとの強いコントラストを生み出します。

関連セッション

• UI タイポグラフィの詳細 — SF フォントの光学サイズ、バリアブル フォント、ダイナミック タイポグラフィのメカニズムについての深い理解
• アラビア語向けのデザイン — アラビア語ユーザー向けのインターフェイス設計の原則とベスト プラクティス
• SF Symbols で可変色を採用 — SF Symbols 可変色と植字システムの統合と応用