モバイルアプリケーションで2つの異なるフォントを使用する

Question

私のモバイルアプリでは、2つのフォントを使用しています。 MaaxRounded for h1-h6およびRoboto。

同僚から、なぜ2つのフォントを使用しているのかと尋ねられましたが、最初は答えがありませんでした。よく考えてみたところ、対照的で階層構造が良いと答えました。しかし、同僚はフォントを1つだけ使用するように強く要求しました。

モバイルアプリで2つのフォントを使用することについてどう思いますか？それは1つよりも良いですか？

ここに私が作ったいくつかのサンプルページがあります：

DesignerAnalyst · Accepted Answer

次の理由により、2つの異なるフォントの使用は避けてください。

不要なコントラストを作成し、それが混乱を作成します。フォントのサイズと太さの違いにより、視覚的な階層はすでに確立されています。
1つのフォントでの読み取りは、2つの異なるフォントでの読み取りよりも高速です。これはフォントチューニングと呼ばれる現象です。

フォントチューニング（FT）は、オブザーバーが同じフォントで提示された一連の文字を異なるフォントよりも速く認識するときに発生します。 ...いくつかの異なるタスクを使用して、サノッキ（1987a、1987b、1988、1991）は、通常のフォント（同じフォントのすべての文字）または混合フォントの非Word文字列（1つの文字から交互のフォント）の文字認識を研究しました次へ）。文字認識は混合フォント文字列よりも通常フォントでより効率的に進行し、タスクに関係のないフォント情報がオブザーバーによってエンコードされていることを示しています。この現象を「フォント調整」（FT）と呼びます。

Nick Groeneveld · Answer

ヘッダー用と本文用の2つのフォントを持つことは、一般的に受け入れられています。 3つ以上のフォントを使用しないでください。三人は群衆です。

あなたにとって重要なことは、視覚的階層を作成することです。これは、ヘッダーと本文のフォントサイズ、太さ、色を対比させることで実現できます。両方に1つのフォントを使用しても十分なコントラストが得られないことがわかった場合は、ヘッダーに別のフォントを使用してさらにコントラストを作成できます。

この場合、ヘッダーと本文にRobotoを使用することで問題ないと思います。

Andreas Johansson · Answer

これは、書体の組み合わせを使用する両方のデザイン（通常2つ、ヘッダー用と本文用の1つ）で共通であり、1つの書体のみの場合もあります。どちらが優れているかを特定の研究で見つけたとは言えませんが、それはあなたが伝えようとしているスタイルに依存すると思います（会社のブランドイメージもそこで重要な役割を果たす可能性があります。従う必要がある既存のブランドガイドライン/スタイルガイド）。

ただし、役立つリンクがいくつかあります。

モバイル用フォントを組み合わせる7つのゴールデンルール

読みやすくする
ビジュアル階層を確立する
対象者を検討する
コントラストを作成
同じファミリーまたはデザイナーのフォントを使用する
フォント数を制限する
テストすることを忘れないでください

書体を組み合わせるためのベストプラクティス（スマッシングマガジン）：

Sans-SerifタイトルタイプをSerifボディタイプと照合してみてください
同様の分類を避けます（2つのスラブ書体または2つの圧縮書体は使用しないでください）
各書体/フォントに異なる役割を割り当てる
コントラストフォントの太さ
さまざまな活版印刷の色を作成する
気分を混ぜないで
ニュートラルとは対照的に（別の独特のフォントではなく）
極端に異なる組み合わせは避けてください（例：狭くて拡大）
物事をシンプルに保つ（2つの書体だけを試してください）
ポイントサイズを変化させる

Donny Truong（特に書体を組み合わせる部分にリンクしていますが、本全体をお勧めします））の（Web用のコード例を使用した）より実用的な側面もあります。

Chris H · Answer

私には（業界ではデザイナーではありませんが、私はいくつかやったことがあります）、全Robotoバージョンと比較すると、MaaxRoundedは何も追加しません（ただし、MaaxRoundedではボディが非常に緩く見えます）。サイズと重量が対照的であるため、ヘッダーと本文のフォントの違いを見つけるのは-独自の例を引用すると-nitpixelingです。中間の例のタイトルと本文の「InVision」を比較してください。あなたが示すサイズ（多くのユーザーが見るよりも大きい）でさえ、それは微妙です。

そのため、ユーザーはUXのメリットなしにMaaxRoundedをダウンロードしています。これは、既存の違いに差別化を加えないためです。

Adriano Repetti · Answer

あなたはすでにそれが完全に有効な設計決定であり、それがアプリケーションに適しているかもしれない（そうでないかもしれない）と述べる回答がありました。

別の視点からそれを選択して、モバイルアプリケーションについても考慮すべき他の何かを強調します：ダウンロード時間。

<h1>-<h6>のフォントが必要な場合は、通常、Normal + Italic、Boldが必要になる可能性が高いです。 =、Bold + Italicバリアント。個人的にはライトバリアントもよく使用しますが、そうでない場合もあります。ラテン語の文字だけが必要な場合（ラテン語の拡張でさえ必要ない）でも、これは1 Mbのダウンロードです（多かれ少なかれ）。モバイルアプリケーション（インターネットの速度が必ずしも良いとは限らない場合や、地域や国によって速度が異なる場合）では、問題になる可能性があります。このようにして、開発者/設計者にFOUTの処理を強制します（これは、低速接続での1 Mbの場合、flashよりも大きい場合があります）。

つまり、メリットが十分であればそれを実行し、欠点を考慮してください。それが問題であるかどうかは言えません：安定したユーザーベースのLOBアプリケーションですか？ほとんどの訪問者がGoogleからアクセスするWebサイトですか？これは主に旅行者が使用するアプリケーションですか（その後、ローミングデータ接続を使用しますか？）本当にモバイル（そしてuser）フレンドリーにするには、表現の自由の一部を犠牲にする必要があるかもしれません。