web-dev-qa-db-ja.com

モバイルビューの最小フォントサイズ

モバイルアプリまたはモバイルレスポンシブサイトを設計する際、ユーザーの視力に影響を与えない最小のフォントサイズはどのくらいでしょうか。

23
jyo

モバイルレイアウトの場合、フォントサイズは通常ピクセルではなくEMで設定されるため、フォントサイズは相対的であり、さまざまな画面パラメーターに対応できます。 16pxは、このfont-size未満の理想的なfont-sizeであり、ユーザーが読むのは困難です。

14
NB4

W3Recommendation font-sizeに(私の強調)という注記があります:

読みやすさを維持するために、これらのガイドラインを適用するUAは、それにもかかわらず、フォントサイズの作成を避けて、コンピューターディスプレイ上でEM単位あたり9ピクセル未満にする必要があります。


12ピクセル、携帯電話の「think with Google」から この記事 によると.

  • 適切なフォントを選択してください。最小フォントサイズは12ピクセルです。より小さなものとユーザーは目を細めるでしょう。きれいで読みやすい書体を選択してください。可能であれば、画像ベースのテキストの使用は避けてください。

12sp-- 素材デザインのタイポグラフィセクション に従って、キャプションに使用されます。これは、彼らが提案する最小フォントサイズです(デスクトップまたはモバイルの両方)。 (spユニットの詳細については この質問 を参照してください)。

タイプサイズは、sp(スケーラブルピクセル)で指定され、 アクセシビリティ の大きなタイプモードを有効にします。

enter image description here

これは、英語および英語のようなスクリプト(ラテン語、ギリシャ語、キリル文字)に推奨されることに注意してください。アラビア語、ヒンディー語、タイ語を含む東南アジアおよび中東の言語の場合:

フォントサイズ:タイトルからキャプションまでのスタイルの場合、フォントサイズは英語で指定されたサイズよりも1ピクセル大きくなります。タイトルより大きいスタイルの場合、英語のタイプサイズが適しています。

出典: https://material.io/guidelines/style/typography.html

8
Alvaro

それはユーザーに依存する明確な最小値はありません。 (特にアクセシビリティに関心がある場合)

一部のユーザーは、フォントサイズを大きくする必要があります(そして、ユーザーが拡大するサイズは、眼鏡を着用しているかどうかなどの外部環境要因に依存します)。

したがって、サイズを設定し、ユーザーが必要に応じてサイズを上下に変更できるようにする必要があります。ユーザーがサイズを設定し、次の使用のためにそれを覚えておくことがさらに適切です。ユーザーは引き続きサイズを変更できますが、開発者が選択するどのサイズよりも正しい可能性が高くなります。

これが、複数のフォントサイズの場合は相対的なフォントサイズの変更を使用する必要があるため、次のようにサイズとしてEMを使用する必要があります NB4の回答

4
user151019

フォントによって異なります。デフォルトのブラウザフォントである16px/1em/100%は、ほとんどの場合に適しています Googleデベロッパーのフォントに関するインサイトのページ (鉱山の強調):

デフォルトでは、ブラウザは各フォントを16px(CSSピクセル)で表示します。 これはほとんどの場合に適切なデフォルトですが、特定のフォントに合わせて調整する必要がある場合があります-つまり、デフォルトサイズは、それに合わせて低くまたは高く設定できますフォントのさまざまなプロパティ。次に、デフォルトのサイズが設定されたら、ピクセルを使用して、デフォルトのサイズに対して相対的に大きいフォントと小さいフォントを定義する必要があります。これらは、ページ上のプライマリ、セカンダリ、およびその他のタイプのコンテンツのテキストのサイズを調整するために使用できます。

Typecastのブログ投稿 Webタイポグラフィのよりモダンなスケール も、ベースとして16px(1emまたは100%)を使用することを提案しています:

body {
  font-size: 100%;
}

投稿には、ヘッダーなどの推奨縮尺もあります。

3
topher

これは、使用するフォントとアプリが表示されるデバイスの2つのパラメーターに大きく依存します。

  1. フォント:読みやすさに関しては、フォントごとに特性が異なります。これを制御する基本的なルールの1つは フォントのx-height ですが、他の要因もあります。
  2. デバイス:主な要因は次のとおりです。ユーザーがデバイスを表示している距離と、ピクセル密度。経験則:デバイスに近いほど、ピクセル密度が高いほど、フォントは小さくなります。

    理論的に300 dpiに近い本のようなデバイスは、実際にはフォントを要求する可能性があります 10pxまたは11px程度

    スペクトラムの反対側では、廊下の向こう側にある90dpiのテレビ画面には、18px以上に近いものが必要です。

結局のところ、答えは次のとおりです。アプリを入手して自分で使用し、実際の状況で実際のユーザーとテストして、フィードバックを評価します。 CSSで結果を実装する場合、 この手法 が役立つ場合があります。

2
Boldewyn