FRMSKI開発ブログ

AWS、iOS、AR/VRなど開発メモ

【iOSデザインガイドライン】最適化されたアップルの最強フォントSFとは...タイポグラフィ和訳

デザインの重要な要素の一つであるタイポグラフィについてのiOSデザインガイドラインです。

Typography - Visual Design - iOS - Human Interface Guidelines - Apple Developer

以下和訳です。

タイポグラフィ

サンフランシスコ(SF)はiOSのシステム書体です。この書体のフォントは、テキストの見やすさ、明瞭性、一貫性を提供するように最適化されています。ここ(Fonts - Apple Developer)でサンフランシスコのフォントファミリーをダウンロードしてください。

f:id:frmski:20181127162109p:plain

  • 重要な情報を強調する
     フォントの太さ、サイズ、色を使用して、アプリで最も重要な情報を強調表示します。

  • 可能であれば、単一の書体を使用してください
     いくつかの異なる書体を混在させると、アプリが断片的に見えにくくなることがあります。 1つの書体と、わずかなフォントの変形とサイズの使用を検討してください。

  • 可能であれば、組み込みのテキストスタイルを使用してください
     組み込みのテキストスタイルを使用すると、視覚的に明確な方法でコンテンツを表現し、最適な読みやすさを維持できます。これらのスタイルはシステムフォントに基づいており、Dynamic Typeなどの主要な文字の特徴を利用して、あらゆるフォントサイズの追跡と誘導を自動的に調整します。 iOSには次のテキストスタイルがあります: 「 Large Title , Title 1 , Title 2 , Title 3 , Headline , Body , Callout , Subhead , Footnote , Caption 1 , Caption 2 」開発者向けガイダンスはこちら(UIFontTextStyle - UIKit | Apple Developer Documentation

  • カスタムフォントが見やすいことを確認してください
     カスタム書体はiOS上でサポートされていますが、読みにくいことがよくあります。あなたのアプリがブランディング目的や臨場感あふれるゲーム体験を作成するなど、カスタムフォントが魅力的に必要とされている場合を除き、通常はシステムフォントを使用することをお勧めします。カスタムフォントを使用する場合は、小さなサイズでも簡単に判読できることを確認してください。

  • カスタムフォントのアクセシビリティ機能を実装する
     システムフォントは、太字や大文字のようなアクセシビリティ機能に自動的に反応します。カスタムフォントを使用するアプリケーションは、アクセシビリティ機能が有効かどうかをチェックし、変更があったときに通知の登録を行うことで同じ動作を実装する必要があります。アクセシビリティHuman Interface Guidelines③ - App Architecture / Accessibility まとめ&和訳 - FRMSKI開発ブログ)を参照してください。

ダイナミックタイプのサイズ

 サンフランシスコの書体は、小さなサイズと大きなサイズの両方で読みやすいように設計されています。 Dynamic Typeは、読者が好みのテキストサイズを選択できるようにすることで、柔軟性を向上させます。 「リソース(Apple Design Resources - Apple Developer)」の動的型サイズ表をダウンロードしてください。

  • テキストサイズの変更に応答するときは、コンテンツの優先順位をつけます
     すべてのコンテンツが同じように重要であるとは限りません。誰かがより大きなサイズを選ぶと、気になる内容を読みやすくすることができます。彼らは必ずしも画面上のすべての単語が大きくなることを望んでいません。

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

 標準的なダイナミックタイプのサイズに加えて、アクセシビリティのニーズを持つユーザーにはさらに多くの種類のサイズが用意されています。

フォントの使用とトラッキング

  • インタフェースモックアップで正しいフォントバリアントを使用してください
     ボタンやラベルなどの標準コントロールのテキストにサンフランシスコを使用すると、iOSはポイントサイズとユーザーのアクセシビリティ設定に基づいて最も適切なバリエーションを自動的に適用します。インターフェースモックアップでは、SF Proテキストを19ポイント以下のテキストに使用し、SFプロディスプレイをテキストの20ポイント以上に使用し、文字間の間隔を適切に調整します。