Typography(印刷)


Apple は、iOS アプリで使用できる 2 つの型のファミリーを提供しています。


San Francisco (SF)。 San Francisco は、SF Pro、SF Pro Rounded、SF Mono、SF Compact、および SF CompactRounded を含むサンセリフ型のファミリーです。SF Pro は、iOS、macOS、および tvOS のシステムフォントです。SF Compact は、watchOS のシステムフォントです。プラットフォーム UI の視覚的な明瞭さに一致するようにデザインされており、システムフォントは読みやすく自然です。



New York (NY)。 New York は、SF フォントを補完するようにデザインされた独自のトーンを提供するセリフ書体です。NY は、グラフィック表示コンテキスト (大きいサイズ) でも、読み取りコンテキスト (テキストサイズ) と同様に機能します。



サンフランシスコとニューヨークのフォントは こちら からダウンロードできます。


(訳注:このリンクは当面日本語化の予定はありません。)


iOS 14 以降、システムはサンフランシスコとニューヨークのフォントを variable (可変) フォント形式で提供しています。この形式は、異なるフォントスタイルを 1 つのファイルに結合し、スタイル間の補間をサポートして中間スタイルを作成します。補間を使用すると、書体はすべてのサイズに適応しながら、各サイズ用に特別にデザインされたように見えます。


補間により、光学的サイズ化も可能になり、これはさまざまなサイズに合わせてさまざまな印刷デザインを作成することを意味します。iOS 14 以降では、システムフォントは 動的な光学サイズ をサポートし、フォントの個別の光学サイズ (SFPro および SF Compact の場合はテキストとディスプレイ、New York の場合は Small、Medium、Large、Extra Large など) を 1 つの、継続的デザインにに結合します。このデザインにより、各グリフまたは文字形式を補間して、ポイントサイズに正確に適合した構造を作成できます。

注意

以前のバージョンの iOS で実行されているデザインツールで可変フォントを使用すると、予期しない結果が生じる可能性があります。この場合、引き続き テキストDisplay(表示) を使用してください。


SF Pro と NY は互換性があるため、一貫したルックアンドフィールを維持しながら、活印刷のコントラストと多様性を iOS インターフェイスに組み込むことができる多くの方法があります。たとえば、両方の書体を使用すると、より強力な視覚的階層を作成したり、コンテンツの意味の違いを強調したりするのに役立ちます。


Apple がデザインした書体は、さまざまなウェイト、サイズ、スタイル、そして言語をサポートしているため、あなたのアプリ全体を通して快適で美しい読書体験をデザインできます。システムフォントでテキストスタイルを使用すると、Dynamic Type (動的タイプ) と、より大きなアクセシビリティタイプのサイズもサポートされ、これにより人々は自分に合ったテキストサイズを選択できます。具体的な値については、動的タイプサイズ および より大きなアクセシビリティタイプサイズ を参照してください。追跡値を含むサイズ情報は、iOS 用の Sketch、Photoshop、および Adobe XD Apple Design Resources でも入手できます。


システムは、SF および NY 書体を簡単に使用できるように API を定義しています。開発者向けガイダンスについては、UIFontDescriptorwithDesign メソッドSystemDesign 構造体 (SystemDesign structure) を参照してください。


SF Pro と SF Compact


システムフォントの柔軟性は、すべてのポイントサイズで最適な読みやすさを実現するのに役立ち、あなたのアプリ全体を通して正確な植字に必要な幅と深さを提供します。


SF Pro と SF Compact は以下をサポートします:


  • ラテン文字、ギリシャ文字、キリル文字を使用する 100 を超える言語

  • 直立の書体と斜体の両方で、超軽量から黒までの 9 つのウェイト

  • テキストのサイズに基づいて自動的に調整される可変文字の間隔

  • 小さいキャピタル、分数、および下つきと上つきの数字

  • 動的光学サイズ

  • 開発者向けガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の default プロパティ) を参照してください。


    SF Pro Rounded と SF Compact Rounded


    システムフォントの rounded (丸みのある) バリアントは、テキストスタイルをソフトまたは丸みを帯びた UI 要素の外観と調整したり、代替の印刷の voice (声?) を提供するのに役立ちます。


    SF Pro Rounded と SF Compact Rounded は以下をサポートします:


  • ラテン文字、ギリシャ文字、キリル文字を使用する 100 を超える言語

  • 直立の書体の 9 つのウェイトで、超軽量から黒まで

  • テキストのサイズに基づいて自動的に調整される可変文字の間隔

  • 小さいキャピタル、分数、および下つきと上つきの数字

  • 動的光学サイズ

  • 開発者向けのガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の rounded プロパティ) を参照してください。


    SF Mono


    SF Mono は、San Francisco の等幅バリアントです。つまり、すべての文字の幅が等しい書体です。コード化する環境などでテキストの列を揃えたい場合は、通常、等幅書体を使用して下さい。たとえば、Xcode と Swift Playgrounds はデフォルトで SF Mono を使用します。

    注意

    SF Pro は、OpenType の表形式の行描写機能を使用して、等幅の数値と通貨の表示をサポートします。


    SF Mono は以下をサポートします:


  • ラテン文字、ギリシャ文字、キリル文字を使用する 100 を超える言語

  • 直立の書体と斜体の両方で、軽量から重量までの 6 つのウェイト

  • すべてのウェイトで等幅フォント (つまり、フォントのウェイトを変更してもテキストは再流動しません)

  • 動的光学サイズ

  • 開発者向けガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の 等幅プロパティ (monospaced property) を参照してください。


    New York


    New York は、インターフェイスで使用したり、従来の読書体験を提供したりできる古典的な serif (セリフ) 書体です。


    NY は以下をサポートします:

  • ラテン文字、ギリシャ文字、キリル文字を使用する 100 を超える言語

  • 直立の書体と斜体の両方で、通常から黒までの 6 つのウェイト


    テキストのサイズに基づいて自動的に調整される可変文字間隔


    動的光学サイズ


    開発者向けガイダンスについては、SystemDesign 構造体 (SystemDesign structure) の serif プロパティ を参照してください。


    アプリを強化するフォントの選択


    可能な限り、組み込みのテキストスタイルを使用してください。 組み込みのテキストスタイルを使用すると、最適な読みやすさを維持しながら、視覚的に区別できる方法でコンテンツを表現できます。見出し、本文、吹き出し、いくつかのサイズのタイトルなど、これらのスタイルはシステムフォントに基づいており、すべてのフォントサイズの追跡と誘導を自動的に調整する 動的タイプ などの主要な印刷機能を利用できます。開発者向けガイダンスについては、 UIFontTextStyle を参照してください。


    重要な情報を強調します。 フォントのウェイト、サイズ、色を使用して、あなたのアプリで最も重要な情報を強調します。


    テキストサイズの変更に対応する場合は、コンテンツに優先順位を付けて下さい。 すべてのコンテンツが等しく重要とは限りません。誰かがより大きなサイズを選択するとき、彼らは気にかけているコンテンツを読みやすくしたいと思います。スクリーン上のすべての単語を大きくしたいとは限りません。


    インターフェイスで使用する書体の数を最小限に抑えます。 あまりにも多くの異なる書体を混在させると、あなたのアプリが断片化されてずさんなように見えます。


    読みやすさを向上させるか、スペースを節約するために誘導を変更しましょう。 Leading (誘導) は、テキスト行間のスペースです。場合によっては、このスペースを増減すると、テキストレイアウトがより良く機能します。幅の広い列や長い文章でテキストを表示する場合、行間のスペースを増やすと (loose leading (ゆるい誘導))、ある行から次の行に移動するときに人々が場所を維持しやすくなります。逆に、高さが制限されている領域 (たとえば、リストの行) に 2 行のテキストを表示する必要がある場合は、行間のスペースを減らす (窮屈な誘導) と、テキストをうまく収めることができます。3 行以上のテキストを表示する必要がある場合は、高さが制限されている領域でも窮屈な誘導を避けてください。システムは、行間のスペースを 2 ポイント増減できる API を定義しています。開発者向けのガイダンスについては、loosetight (SwiftUI)、および traitLooseLeadingtraitTightLeading (UIKit) を参照してください。


    カスタムフォントが読みやすいことを確認してください。 カスタム書体は iOS でサポートされていますが、特に小さいサイズで表示されたときに書体を識別しにくくするスタイルの属性がある場合は、特に読みにくい場合があります。ブランド化の目的や没入型のゲーム体験を作成するためなど、あなたのアプリにカスタムフォントがやむを得ず必要な場合を除いて、通常はシステムフォントを使用するのが最適です。表示テキストのみにカスタムフォントを使用することを検討してください。テキストの読み取りやインターフェースに使用する場合は、小さいサイズでも読みやすいことを確認してください。


    カスタムフォントのアクセシビリティ機能を実装しましょう。 システムフォントは、太字や大きな文字などのアクセシビリティ機能に自動的に反応します。アクセシビリティ機能が有効になっていることを確認し、変更されたときに通知を登録することで、カスタムフォントを使用するアプリに同じ動作を実装します。ガイダンスについては、テキストのサイズとウェイト を参照してください。


    インターフェイスのモックアップで必要に応じて追跡を調整します。 実行中のアプリでは、システムフォントがすべてのポイントサイズで追跡を動的に調整しています。可変システムフォントを使用する UI の正確なインターフェイスモックアップを作成するには、追跡を調整する必要があります。ガイダンスについては、追跡値 にリストされ、Apple Design Resources で利用可能な値を参照してください。

    注意

    iOS は、ラテン語、ギリシャ語、キリル文字アルファベットのシステムフォントとして San Francisco を使用し、他のスクリプトでは他のさまざまな書体を使用します。


    動的タイプサイズ


    動的タイプは、読者が好みのテキストサイズを選択できるようにすることで、追加の柔軟性を提供します。さまざまな動的タイプサイズでの各テキストスタイルのウェイト、サイズ、および誘導値は以下のとおりです。


    xSmallSmallMediumLarge (Default)xLargexxLargexxxLarge


    Large (Default)


    スタイルウェイトサイズ (pts)誘導 (pts)
    Large TitleRegular3441
    Title 1Regular2834
    Title 2Regular2228
    Title 3Regular2025
    HeadlineSemi-Bold1722
    BodyRegular1722
    CalloutRegular1621
    SubheadRegular1520
    FootnoteRegular1318
    Caption 1Regular1216
    Caption 2Regular1113

    ポイントサイズは @2x の場合は 144 ppi、@3x デザインの場合は 216 ppi のイメージ解像度に基づきました。



    より大きなアクセシビリティタイプサイズ


    標準の動的タイプサイズに加えて、システムはアクセシビリティを必要とするユーザ向けに、さらに大きなサイズを多数提供しています。アクセシビリティタイプのサイズが大きい場合の各テキストスタイルのウェイト、サイズ、および誘導の値は以下のとおりです。


    AX1AX2AX3AX4AX5


    AX1


    スタイルウェイトサイズ (pts)誘導 (pts)
    Large TitleRegular4452
    Title 1Regular3846
    Title 2Regular3441
    Title 3Regular3138
    HeadlineSemi-Bold2834
    BodyRegular2834
    CalloutRegular2632
    SubheadRegular2531
    FootnoteRegular2329
    Caption 1Regular2228
    Caption 2Regular2025

    ポイントサイズは @2x の場合は 144 ppi、@3x デザインの場合は 216 ppi のイメージ解像度に基づきました。



    追跡値

    正確なインターフェイスモックアップを作成するのを補助するため、さまざまなサイズの SF Pro、SF Pro Rounded、および New York に対してシステムが定義する追跡値を使用します。


    SF ProSF Pro RoundedNew York


    SF Pro


    サイズ追跡値 (1/1000em)追跡値 (pts)
    6+41+0.24
    7+34+0.23
    8+26+0.21
    9+19+0.17
    10+12+0.12
    11+6+0.06
    1200.0
    13-6-0.08
    14-11-0.15
    15-16-0.23
    16-20-0.31
    17-26-0.43
    18-25-0.44
    19-24-0.45
    20-23-0.45
    21-18-0.36
    22-12-0.26
    23-4-0.10
    24+3+0.07
    25+6+0.15
    26+8+0.22
    27+11+0.29
    28+14+0.38
    29+14+0.40
    30+14+0.40
    31+13+0.39
    32+13+0.41
    33+12+0.40
    34+12+0.40
    35+11+0.38
    36+10+0.37
    37+10+0.36
    38+10+0.37
    39+10+0.38
    40+10+0.37
    41+9+0.36
    42+9+0.37
    43+9+0.38
    44+8+0.37
    45+8+0.35
    46+8+0.36
    47+8+0.37
    48+8+0.35
    49+7+0.33
    50+7+0.34
    51+7+0.35
    52+6+0.33
    53+6+0.31
    54+6+0.32
    56+6+0.30
    58+5+0.28
    60+4+0.26
    62+4+0.24
    64+4+0.22
    66+3+0.19
    68+2+0.17
    70+2+0.14
    72+2+0.14
    76+1+0.07
    8000
    8400
    8800
    9200
    9600

    すべてのアプリが追跡値を 1/1000 em として表現しているわけではありません。ポイントサイズは @2x の場合は 144 ppi、@3x デザインの場合は 216 ppi のイメージ解像度に基づいたものです。








    前:用語 次:ビデオ





    目次

    Xcode の新機能



    iOS

    テーマ

    インターフェースの本質

    アプリの構造

    起動

    搭載機能

    ロード

    モダリティ

    ナビゲーション

    ユーザデータへのアクセス

    設定


    ユーザとの対話

    3D タッチ

    アップルペンシルと落書き

    オーディオ

    認証

    データ入力

    ドラッグアンドドロップ

    フィードバック

    ファイル処理

    ゲームコントローラ

    ジェスチャ

    触覚

    キーボード

    近距離通信

    ポインタ (iPadOS)

    空間的対話

    取り消しとやり直し


    システムの機能

    拡張現実

    ホームスクリーンのアクション

    マルチタスクと複数のウィンドウ

    通知

    印刷

    クイックルック(検索)

    評価とレビュー

    スクリーンショット

    TV プロバイダー


    ビジュアルデザイン

    適応性とレイアウト

    アニメーション

    ブランド化

    ダークモード

    起動スクリーン

    材料

    用語

    印刷

    ビデオ


    アイコンと画像

    画像のサイズと解像度

    アプリのアイコン

    システムアイコン


    バー

    ナビゲーションバー

    検索バー

    サイドバー

    ステータスバー

    タブバー

    ツールバー


    ビュー

    アクションシート

    アクティビティビュー

    アラート

    コレクション

    画像ビュー

    ページ

    ポップオーバー

    スクロールビュー

    シート

    分割ビュー

    テーブル (表)

    テキストビュー

    Web ビュー


    コントロール

    ボタン

    色の源

    コンテキストメニュー

    編集メニュー

    ラベル

    ページコントロール

    ピッカー

    進行状況インジケータ

    内容コントロールの更新

    セグメント化されたコントロール

    スライダ

    ステッパー

    スイッチ

    テキストフィールド


    拡張機能

    カスタムキーボード

    ファイルプロバイダ

    メッセージ

    写真編集

    共有とアクション





    macOS


    tvOS


    watchOS


    Technologies

    アクセシビリティ

    序文

    ベストプラクティス

    ユーザとの対話

    ナビゲーション

    テキストのサイズと太さ

    色とコントラスト

    外観の効果と動き

    コンテンツ


    AirPlay

    メディア再生

    アイコン

    社説


    アプリクリップ

    序文

    ユーザ体験

    アプリクリップカード

    アプリのクリップコード

    印刷ガイドライン

    法的要件


    Apple Pay(アップルペイ)

    序文

    Apple Pay の提供

    チェックアウトと支払い

    エラー処理

    サブスクリプションと寄付

    ボタンとマーク

    社説


    拡張現実

    ホームスクリーンのアクション

    マルチタスクと複数のウィンドウ

    通知

    印刷

    クイックルック(検索)

    評価とレビュー

    スクリーンショット

    TV プロバイダー


    CareKit

    序文

    データとプライバシー

    ビュー

    ユーザー体験

    シンボルと商標化


    CarPlay

    序文

    オーディオアプリ

    自動車メーカーのアプリ

    伝達および VoIP アプリ


    アーキテクチャ

    バッジ付け

    エラー処理

    ロード

    ナビゲーション

    テスト


    対話

    オーディオ

    車のデータ

    iPhone

    ノブとコントロール

    タッチスクリーン

    Voice (Siri)


    視覚的デザイン

    アニメーション

    商標化

    レイアウト

    タイポグラフィ(印刷)


    アイコンと画像

    画像のサイズと解像度

    アプリのアイコン

    カスタムアイコン

    システムアイコン


    システム要素

    アクションシート

    活動指標

    アラート

    ボタン

    コレクション

    ラベル

    ナビゲーションバー

    スクロールビュー

    タブバー

    テキストビュー

    Web ビュー


    CareKit

    序文

    データとプライバシー

    ビュー

    ユーザ体験

    シンボルと商標化


    ゲームセンター

    序文

    アクセス・ポイント

    ダッシュボード

    実績

    順位表

    マルチプレイヤー

    カスタムダッシュボードリンク


    象形文字

    HealthKit

    HomeKit

    序文

    用語とレイアウト

    設定

    Siri の作用

    カスタム機能

    アイコン

    社説


    iCloud

    アプリ内購入

    序文

    自動更新可能なサブスクリプト


    inclusion(含有)

    ライブ写真

    Mac Catalyst

    序文

    アプリの構造

    ユーザとの対話

    視覚的デザイン

    Mac 慣用句


    マシン学習

    序文

    マシン学習の役割


    入力

    明示的なフィードバック

    暗黙のフィードバック

    較正

    訂正


    出力

    間違い

    複数のオプション

    自信

    帰属

    制限事項


    地図(Maps)

    アプリとウェブサイトの地図

    Apple Watch の地図

    屋内の地図


    ResearchKit

    序文


    右から左へ

    序文

    テキストと文字

    コントロール

    画像と象形文字


    SharePlay

    Apple でサインイン

    序文

    データ管理

    ボタン


    Siri

    序文

    システムインテント

    カスタムの注視

    ショートカットと提案

    編集ガイドライン


    ソーシャルメディア

    SF Symbols

    Wallet(財布)

    序文

    許可証のデザイン


    小道具

    序文

    コンテンツ

    編集と対話

    デザイン



    Human Interface Guidelines


    概要


    リソース


    ビデオ


    新規事項



    ニュース

    見つける

    デザイン

    開発

    配信

    サポート

    アカウント
    (セキュリティの面で、リンクを提供できませんでした。)













    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ