The details of UI typography

ハイライト

Apple は、WWDC 2020 で UI の組版を実行可能な API のセットに削減しました。SF Pro は可変フォントに移行され、システムは光学サイズを自動的に同期しました。 UIKit、AppKit、および SwiftUI は、テキストスタイル、行送り、およびシステム設計の入力を完了し、UIKit と SwiftUI はカスタムフォントのダイナミックタイプのサポートを引き続き改善しました。

主要内容

(00:37) 多くのアプリのレイアウトの問題は、実際のデバイスで使用されるまで露呈しないことがよくあります。フォントサイズが小さいとテキストの同じ段落がぼやけ、ボタンのタイトルが数ピクセル以内で切り詰められ、ユーザーがダイナミックタイプを増やした後、カスタムフォントのタイトルとパディングは一緒に変更されません。表面上、開発者はフォントとフォントサイズを選択しているだけです。実際、光学サイズ、トラッキング、行送り、テキストスタイル、およびアクセシビリティ設定の間のリンクに対処する必要があります。

(01:47) Apple はまず、サンフランシスコ (SF) に SF Text と SF Display がある理由を説明します。 20 pt 未満の小さなフォントサイズでは、より広いフォント間隔とより安定した詳細が必要ですが、20 pt を超える大きなフォントサイズでは、より多くの視覚性を維持できます。 2020年の変化はSF Proがバリアブルフォント（バリアブルフォント）に移行し始めたことです。光学サイズ軸は、フォントのサイズ変化を表現するために内部で使用され、システムはコード内のポイントサイズと光学サイズを自動的に調整します。 (06:31)

(09:22) この問題は UI レイアウトに直接影響します。トラッキングはカーニングではありません。トラッキングはテキスト全体のカーニング調整であり、カーニングはカーニング間の微調整です。タイトルが切り詰められそうになったときに、カーニング API でテキストを絞ると合字がそのまま残り、リズムが崩れてしまいます。トラッキング API を使用するか、システムが自動的に締めることを許可すると、システムはフォントサイズごとに適切なトラッキングテーブルを使用し、必要に応じて合字を解凍できます。

(16:11) 後半では、これらの原則を UIKit、AppKit、SwiftUI に結び付けます。テキストスタイルは、フォントサイズ、フォントの太さ、行の高さをシステムレベルで組み合わせます。ダイナミックタイプを使用すると、これらの組み合わせをユーザーの好みに応じて拡張できます。カスタムフォントはアクセシビリティを放棄する必要はありません: UIKit は次のことを使用しますUIFontMetrics, iOS 14でSwiftUIが可能に.customデフォルトでボディごとに拡大縮小し、使用しますrelativeTo対象のテキストスタイルを指定します。 (25:10)

詳細

トラッキング: 正しい API を使用してカーニングと切り詰めを処理します。

(12:19) テキスト全体のカーニングを手動で調整したい場合は、UIKit側ではCore Textのトラッキング属性を、SwiftUI側ではトラッキング属性を使用します。.tracking()。セッションでは、この要件をカーニングと間違えないように注意する必要があります。

// UIKit
label.attributedText =
    NSAttributedString(string: "hamburgefonstiv",
        attributes: [kCTTrackingAttributeName as NSAttributedString.Key: -0.5])

// SwiftUI
Text("hamburgefonstiv").tracking(-0.5)

キーポイント:

kCTTrackingAttributeName2 つの文字間のカーニングではなく、テキスト全体の追跡を表します。 --0.5文字間隔が狭くなります。この値はフォントサイズに応じて確認する必要があり、小さなフォントサイズの値を大きなタイトルに直接適用することはできません。
SwiftUI.tracking(-0.5)これは同じ種類のセマンティクスであり、微調整が必要な少量のテキストに適しています。

(12:45) より一般的な切り捨てシナリオはシステムに任せる必要があります。allowsDefaultTighteningForTruncationそして.allowsTightening(true)システムフォントのタイトなトラッキングテーブルを使用して、文字列を可読範囲内に収めようとします。

// UIKit: UILabel
label.allowsDefaultTighteningForTruncation = true

// AppKit: NSTextField
textField.allowsDefaultTighteningForTruncation = true

// SwiftUI
Text("hamburgefonstiv").allowsTightening(true)

キーポイント:

UIKit、AppKit、SwiftUI にはすべて対応する入り口があり、ボタン、ラベル、ナビゲーションタイトルなどのスペースに制約のあるテキストに適しています。
システムは締め付け範囲を制御します。妥当な範囲を超える場合は、切り捨てのほうがより良い結果になります。
このパスはサイズ固有の追跡を取得するため、開発者自身が追跡テーブルを保守する必要はありません。

テキストスタイル: システムレベルから強調と行の高さのバリエーションを取得します

(17:45) テキストのスタイルは単なるフォントサイズではありません。強調タイトル 1 を作成するには、まず次のようにします。preferredFontDescriptor(withTextStyle:)、次に太字の象徴的な特性をオーバーレイします。中太字、半太字、太字、太字への実際のマッピングは、テキストスタイルに応じてシステムによって決定されます。

// Getting emphasized text styles

let label = UILabel()
label.text = "Ready. Set. Code."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .title1)
    .withSymbolicTraits(.traitBold) {
    // 28 pt Bold on iOS
    label.font = .init(descriptor: descriptor, size: 0)
}

キーポイント:

preferredFontDescriptor(withTextStyle: .title1)title1 のシステムディメンションとダイナミックタイプの動作は保持されます。 -.withSymbolicTraits(.traitBold)強調のバリエーションを要求することは、固定のフォントのウェイト値を指定することを意味するものではありません。 -size: 0記述子でシステムサイズを使用し、フォントサイズを手動でオーバーライドしないことを示します。

(20:03) 行の高さはテキストスタイルから派生することもできます。タイトなリーディングは情報密度が高いインターフェイスに適しており、ルーズなリーディングは長い段落を読むのに適しています。セッションの例では、本文の行高さが 22 ポイントから 20 ポイントまたは 24 ポイントに変更されることが示されています。

// Getting tight/loose leading variant

// AppKit
let descriptor = NSFontDescriptor.preferredFontDescriptor(forTextStyle: .headline)
    .withSymbolicTraits(.tightLeading) // Use .looseLeading for loose leading font
let tightLeadingFont = NSFont(descriptor: descriptor, size: 0) // 14 pt line height

// UIKit/Catalyst
if let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .title1)
    .withSymbolicTraits(.traitTightLeading) { // Use .traitLooseLeading for loose leading
    let tightLeadingFont = UIFont(descriptor: descriptor, size: 0) // 36 pt line height
}

// SwiftUI
// Use .loose for loose leading font
let tightLeadingFootnoteFont = Font.footnote.leading(.tight) // 16 pt line height on iOS

キーポイント:

AppKitの使用法.tightLeadingまたは.looseLeading、UIKit/Catalyst の使用.traitTightLeadingまたは.traitLooseLeading。
SwiftUIの使用.leading(.tight)または.leading(.loose)システムのテキストスタイルを受信します。
タイトな先頭は、すべての長文には適していません。このセッションでは、本文の段落が狭すぎると読書体験が悪化することが 19:43 で明確に示されています。

システム設計: テキストスタイルを保持し、フォントスタイルのみを置き換えます。

(20:56) SF Pro Rounded、New York、SF Mono はテキストスタイルで動作します。 UIKit の場合、既存のテキストスタイル記述子から開始して、次のメソッドを呼び出します。.withDesign(.rounded);このようにフォントのデザインは変更されていますが、フォントサイズ、フォントの太さ、行の高さはシステムスタイルをそのまま使用しています。

// Access rounded system font design
import UIKit

let label = UILabel()
label.text = "Today"

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .largeTitle)
    .withSymbolicTraits(.traitBold)?
    .withDesign(.rounded) {
    // SF Pro Rounded Bold
    label.font = UIFont(descriptor: descriptor, size: 0)
}

キーポイント:

.preferredFontDescriptor(withTextStyle: .largeTitle)まずシステムレベルを決定します。 -.withSymbolicTraits(.traitBold)大きなタイトルを強調表示します。 -.withDesign(.rounded)デザインを SF Pro Rounded に切り替えますが、大きいタイトルのサイズ、ウェイトセマンティクス、行の高さは維持します。

(21:08) 同じ機能は AppKit、UIKit/Catalyst、SwiftUI にも入り口があります。 SwiftUI は、既存のフォントを再度変換するのではなく、フォントを構築するときにデザインを渡す必要があります。

// Access system font designs

// Use .serif for New York, .monospaced for SF Mono

// AppKit
let descriptor = NSFontDescriptor.preferredFontDescriptor(forTextStyle: .body)
    .withDesign(.rounded)
let roundedBodyFont = NSFont(descriptor: descriptor, size: 0) // SF Pro Rounded

// UIKit/Catalyst
if let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .body)
    .withDesign(.rounded) {
    let roundedBodyFont = UIFont(descriptor: descriptor, size: 0) // SF Pro Rounded
}

// SwiftUI
let roundedBodyFont = Font.system(.body, design: .rounded) // SF Pro Rounded

キーポイント:

.serifニューヨークに相当する、.monospacedSFモノに対応し、.roundedSF Pro Roundedに対応。
UIKit/Catalyst と AppKit はどちらもフォント記述子から取得されます。
SwiftUIFont.system(.body, design: .rounded)文字スタイルとデザインを同時に宣言します。

ダイナミックタイプ: カスタムフォントとレイアウトを一緒にスケールできるようにします

(25:05) UIKit は iOS 11 以降で利用可能ですUIFontMetrics。特定のテキストスタイルのダイナミックタイプスケーリングカーブを任意のカスタムフォントに適用し、レイアウト定数をスケーリングすることもできます。

// Support Dynamic Type with custom font in UIKit

if let customFont = UIFont(name: "Charter-Roman", size: 17) {
    let bodyMetrics = UIFontMetrics(forTextStyle: .body)

    // Charter-Roman scaled relative to body text style
    // in different content size categories.
    let customFontScaledLikeBody = bodyMetrics.scaledFont(for: customFont)
    label.font = customFontScaledLikeBody
    label.adjustsFontForContentSizeCategory = true

    // Scaling constant 10 relative to body text style.
    let scaledValue = bodyMetrics.scaledValue(for: 10)
}

キーポイント:

UIFontMetrics(forTextStyle: .body)固定倍率だけでなく、ボディのスケーリング動作を選択します。 -scaledFont(for:)させてCharter-Romanユーザーの文字サイズ設定に従ってください。 -adjustsFontForContentSizeCategory = true設定が変更された場合でもラベルが応答し続けるようにします。 -scaledValue(for:)スペースやパディングなどのレイアウト定数を同期して拡大する場合に適しています。

(26:25) SwiftUI は、iOS 14 のカスタムフォントスケーリングを改善します。.custom(_:size:relativeTo:)どのテキストスタイルでズームするかを指定できます。省略relativeToの場合、デフォルトではボディごとにスケールします。@ScaledMetric次に、レイアウト値を同じテキストサイズ設定セットに接続します。

struct ContentView: View {
    let prose = "Apple provides two type families you can use in your iOS apps. San Francisco (SF). San Francisco is a sans serif type family that includes SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded."
    @ScaledMetric(relativeTo: .body) var padding: CGFloat = 20

    var body: some View {
        VStack {
            Text("Typography")
                .font(.custom("Avenir-Medium", size: 34, relativeTo: .title))
            Text(prose)
                .font(.custom("Charter-Roman", size: 17))
                .padding(padding)
        }
    }
}

キーポイント:

タイトルは Avenir-Medium ですが、経由relativeTo: .titleタイトルのスケーリングカーブを使用します。
テキストには Charter-Roman を使用し、省略します。relativeTo次に、本体を押してズームします。 -@ScaledMetric(relativeTo: .body)フォントサイズが大きい場合にテキストの縁取りを避けるために、テキストサイズに応じてパディングを変更します。

重要ポイント

ブランドフォント閲覧ページ: ユーザーの文字サイズに応じてブランドフォントが変化するように、ダイナミックタイプをサポートする記事または説明ページを作成します。実行する価値がある理由: セッションはカスタムフォントとアクセシビリティを明示的に結び付けます。開始方法: UIKit の使用UIFontMetrics(forTextStyle:)SwiftUI のカスタムフォントのラッピング.custom(_:size:relativeTo:)そして@ScaledMetricフォントとパディングを同期します。
機密性の高いボタンとナビゲーションタイトルを切り捨てる: 手書きのカーニングの代わりに、短いボタン、ラベル、ナビゲーションタイトルのシステム強化を有効にします。実行する価値がある理由: システムは厳密な追跡テーブルを使用し、読み取り可能な範囲内で調整します。開始方法: UIKit/AppKit のセットアップallowsDefaultTighteningForTruncation,SwiftUI設定.allowsTightening(true)、次に、最長のローカライズされたコピーを使用してテストします。
小画面情報密度モード: watchOS、ウィジェット、またはコンパクトカード用のタイトな先行バージョンを準備します。実行する価値がある理由: Session では、watchOS と Fitness の例を使用して、タイトなリードにより単位画面あたりの情報量が増加する可能性があることを説明しています。開始方法: 最初にシステムテキストスタイルを使用し、次に SwiftUI で試してください。.leading(.tight)、長いテキストの場合は、デフォルトまたはゆるい行頭のままにします。
ブランド感を持ちながら階層を破壊しないシステムフォントスキーム: 丸みを帯びたセリフまたは等幅デザインを使用して、リマインダー、会計、読書アプリでさまざまなコンテンツの気質を表現します。実行する価値がある理由:.withDesignそしてFont.system(_:design:)テキストスタイルのフォントサイズ、フォントの太さ、行の高さは保持されます。開始方法: タイトル試してみる.rounded、テキストの読み取り試行.serif、金額または番号を試してください.monospaced。
タイポグラフィー回帰チェックリスト: 光学サイズ、トラッキング、行送り、およびダイナミックタイプを UI QA に組み込みます。実行する価値がある理由: セッションに関する中核的な問題はすべて、実際のサイズ、実際の言語、実際のユーザー設定で発生します。開始方法: すべての主要なインターフェイスについて、少なくとも小さなフォントサイズ、大きな見出し、最大アクセシビリティフォントサイズ、ローカライズされた長い文字列、アラビア語などの行高の高い言語を確認します。

The details of UI typography

ハイライト

主要内容

詳細

トラッキング: 正しい API を使用してカーニングと切り詰めを処理します。

テキストスタイル: システムレベルから強調と行の高さのバリエーションを取得します

システム設計: テキストスタイルを保持し、フォントスタイルのみを置き換えます。

ダイナミックタイプ: カスタムフォントとレイアウトを一緒にスケールできるようにします

重要ポイント

関連セッション

コメント

ハイライト

主要内容

詳細

トラッキング: 正しい API を使用してカーニングと切り詰めを処理します。

テキスト スタイル: システム レベルから強調と行の高さのバリエーションを取得します

システム設計: テキスト スタイルを保持し、フォント スタイルのみを置き換えます。

ダイナミック タイプ: カスタム フォントとレイアウトを一緒にスケールできるようにします

重要ポイント

関連セッション

コメント

テキストスタイル: システムレベルから強調と行の高さのバリエーションを取得します

システム設計: テキストスタイルを保持し、フォントスタイルのみを置き換えます。

ダイナミックタイプ: カスタムフォントとレイアウトを一緒にスケールできるようにします