🍎HIGざっくりまとめ Foundations編 vol. 11 Typography（タイポグラフィ）

はらぐち | COMPASS

2022年12月26日 23:05

タイポグラフィーは、読みやすさを確保するだけでなく、情報階層の明確化、重要なコンテンツの伝達、ブランドの表現に役立ちます。

ベストプラクティス

多くの人が読みやすい最小フォントサイズを維持するように努めます。
ピクセル密度や明るさなど、デバイスのディスプレイの違いは、適切な最小フォントサイズに影響を与える可能性があります。また、読み手とディスプレイの距離、視力、動いているかどうか、環境光の状態など、その他の要因も読みやすさに影響します。
Dynamic Typeをサポートすると、ユーザーがテキストを自分に合ったサイズに調整した時に、アプリケーションやゲームが適切に対応できるようになります。
重要な情報を強調し、階層構造を視覚化するために、必要に応じてフォントの太さ、大きさ、色を調整する。
文字サイズを変更した場合にも、各要素の相対的な階層性や視覚的な区別が保たれるよう配慮してください。
インターフェイスに使用する書体の数は最小限にすること。
さまざまな文脈で読みやすさをテストする。
たとえば、テキストのサイズを調整するだけでなく、明るい屋外でコンテンツを見る人、移動中にちらっと見る人、遠くから見る人など、さまざまな状況下で読みやすさをテストします。
テストの結果、テキストの一部が読みにくい場合は、コントラストを高める、文字サイズを大きくする、読みやすい書体を使用する、などの方法を検討してください。
一般に、読みやすさを維持するために、フォントの太さはあまり太くしないでください。
例えば、システム提供のフォントを使用する場合、Regular、Medium、Semibold、Boldのいずれかのフォントウエイトを使用し、Ultralight、Thin、Lightのフォントウエイトは、特に小さい場合に見にくくなることがありますので、避けてください。
文字サイズの変更に対応する場合、重要なコンテンツを優先する。
ユーザーが大きなテキストサイズを選択する場合、通常は重要なコンテンツを読みやすくすることを望んでおり、必ずしも画面上のすべての単語のサイズを大きくしたいわけではありません。
（あまり重要でないテキストは小さいまま表示されてもいいんだよ。）

システムフォントの使用

Appleは2つの書体ファミリーを提供し、さまざまなウェイト、サイズ、スタイル、言語に対応しています。

サンフランシスコ（SF）
サンセリフ書体のファミリーで、SF Pro、SF Compact、SF Arabic、SF Monoの各バリエーションが含まれる。
また、SF Pro Rounded、SF Arabic Rounded、SF Compact Roundedの各バリエーションは、ソフトまたはラウンドしたUI要素の外観とテキストを調整したり、別のタイポグラフィボイスを提供するために使用することが可能です。
ニューヨーク（NY）は、単体でも、SFフォントと並んでも使えるようにデザインされたセリフ書体ファミリーです。

サンフランシスコとニューヨークのフォントは、こちらからダウンロードできます。
ウルトラライト（ultralight）からブラック（black）まで9種類のウェイトがあり、SFの場合はCondensedやExpandedなどのいくつかの幅が用意されています。

SF、NYフォントは、異なるフォントスタイルを1つのファイルにまとめたバリアブルフォント形式で提供され、スタイル間の補間による中間生成もサポートしています。

注）バリアブルフォントは、異なるサイズに適合するように異なるタイポグラフィデザインを調整することを意味する、オプティカルサイジングを可能にします。これは、テキストやディスプレイなどの個別のオプティカルサイズとウェイトを 1 つの連続したデザインに統合し、システムが各グリフまたは文字フォームを補間してポイントサイズに正確に適合する構造を生成するものです。ダイナミックオプティカルサイズを使用すると、バリアブルフォントフォーマットのすべての機能をサポートしていないデザインツールを使用している場合を除き、ディスクリートオプティカルサイズを使用する必要がありません。

カスタムフォントの使用

カスタムフォントが読みやすいことを確認する。
ブランディングや没入感のあるゲーム体験の実現など、カスタムフォントの必要性が高い場合を除き、システムフォントを優先してください。カスタムフォントを使用する場合は、さまざまな視距離や条件下で読みやすいことを確認してください。
カスタムフォントのアクセシビリティ機能を実装します。
システムフォントは、Dynamic Type（利用可能な場合）を自動的にサポートし、ユーザーがBold Textなどのアクセシビリティ機能をオンにしたときに応答します。カスタムフォントを使用する場合は、同じ動作が実装されていることを確認してください。

プラットフォームごとのシステムフォント

iOS, iPadOS

SF ProはiOS、iPadOSのシステムフォントです。iOS、iPadOSのアプリでもNYを使用することができます。

macOS

SF Proは、macOSのシステムフォントです。NYは、Mac CatalystでビルドされたMacアプリケーションで利用可能です。

tvOS

SF ProはtvOSのシステムフォントで、アプリもNYを使用することができます。

watchOS

SF CompactはwatchOSのシステムフォントで、アプリはNYを使うこともできます。コンプリケーションでは、watchOSはSF Compact Roundedを使用しています。

感想

最小サイズを定義するのっていつも迷いました。レスポンシブWEBデザインの時は特に。
「読みやすい」かどうかは、ディスプレイの質や距離、利用シーンやユーザーの視力などによるので一概に言えないのでやはりDynamic Typeをサポートが一番よさそうですね。
レイアウトむずかしそうだと思ってましたが、

必ずしも画面上のすべての単語のサイズを大きくしたいわけではありません。例えば、アクセシビリティのテキストサイズを大きくすると、メールの件名と本文は大きく表示されますが、日付や差出人など、あまり重要でないテキストは小さいまま表示されます。

という文章（つまり、あまり重要でないテキストは小さいまま表示されてもいいんだよ）でだいぶ気が楽になりました。