モバイルでのフォントサイズは小さくなりますか、そうですか？
新しいプロジェクトに取り組んでいるときはいつも同じ質問があり、レスポンシブデザインについて考え始める必要があります。
モバイル版でウェブサイトのコンテンツのフォントサイズを16px（デスクトップ）から12pxに減らすことについてどう思いますか？
優れたUXを得るために、これはあまり良い行動ではないと思います。モバイルでコンテンツがどのように表示されるかについて問題が発生している同僚（UXデザイナーでもある）の同僚のところに来ると、いつもフォントサイズを小さくするように言われました。タイトルのフォントサイズを少し減らして、同じサイズを維持することに熱心です。
どう思いますか？
同僚がマテリアルデザインガイドラインを使用しているようです。モバイルでは12sp（スケーラブルピクセル）より小さくしないことをお勧めします。これが良い習慣であるかどうかは、使用するフォントとWebサイトが表示されるデバイスの2つの要因に依存します。読みやすさに関しては、フォントごとに特性が異なりますが、デバイスごとにピクセル密度は異なります。
理想的には、フォントサイズはレスポンシブでスケーラブルでなければなりませんが、本文テキストには16ピクセル未満のサイズを使用しないことをお勧めします。フォントによっては、多くのユーザーが12〜14ピクセルのサイズマークで読むために、より多くの努力をしなければならないようになります。確かに彼らはまだそれを読むことができますが、それは正確に良いアクセシビリティではありません。
デフォルトでは、ブラウザは各フォントを16px（CSSピクセル）で表示します。これはほとんどの場合に適したデフォルトですが、特定のフォントに合わせて調整する必要がある場合があります。つまり、フォントのさまざまなプロパティに対応するために、デフォルトサイズを低くまたは高く設定できます。次に、デフォルトのサイズが設定されたら、ピクセルを使用して、デフォルトのサイズに対して相対的に大きいフォントと小さいフォントを定義する必要があります。これらは、ページ上のプライマリ、セカンダリ、およびその他のタイプのコンテンツのテキストのサイズを調整するために使用できます。
はい、モバイルのフォントサイズをデスクトップのフォントサイズよりも小さくすることをお勧めします。
一般的に、モバイルで見るよりも大きなデスクトップ/ラップトップを見るときは、画面から離れたところに座っています。 18ptキャラクターは、遠い場合よりもあなたに近い場合の方が、ビジョン内でより多くのスペースを占有します。
IA.netのレスポンシブタイポグラフィに関するこの素晴らしい記事から
テキストを離すほど、視覚的に小さくなります。長い読み取り距離を補うために、テキストが読み取られる距離が長いほどテキストサイズを大きくする必要があります。繰り返しますが、それ自体が科学の大きさです。経験が浅い場合、便利なトリックは、印刷する本を快適な読書距離に置いて比較するWebサイトを見ることです。
1つのピクセルの物理的なサイズはどれくらいですか？
15インチの1366 x 768ピクセルのラップトップ画面では、1ピクセルの幅は0,2341 mmです。
5インチの1280×720 pxの電話画面では、1つのピクセルの幅は約0.088 mmにする必要があります。しかし、ここに 複数の画面をサポートする 記事Android開発者のWebサイトで、デバイスに依存しないピクセルサイズAndroidは、次の計算：
px = dp * (dpi / 160)
上記のモバイル画面では、デバイスに依存しないピクセルは、物理的なピクセルの約1,8358倍です0,1586 mm。これは、ラップトップ（デスクトップ）のピクセルサイズの約68％です。モバイルでは、ピクセルは既にです小さい。
質問への回答：ブラウザ（またはOS）がすでに対応しているため、モバイルのベースフォントサイズをデスクトップのフォントサイズと異なるものにしないでください。ただし、全体的なデザインとコンテンツによっては、画面が狭いため、モバイルでヘッダーを少し小さくすると便利な場合があります。
本文の場合、ウェブからモバイルの場合は16から12に変更しないでください。ただし、モバイルの場合（本文の場合）は、少なくとも14ピクセルを使用することをお勧めします。
メインテキストまたは本文テキストを16〜14ピクセルに保つことができます
セカンダリ（14px-12px（タブメニューのような）
および12px-11pxの3次テキスト（ツールチップのように）
あなたはもっと読むことができます ここ。
特に見出しの場合は、携帯電話のフォントサイズを小さくしてください。 5から8ワードの42pxの太字フォントの見出しがあるとしましょう。デスクトップでは、幅を1280pxと見なして、これを1行に収めることができます。モバイルの見出しに同じ42pxフォントサイズを使用すると、画面全体を占有します。 （時には、ユーザーは見出しを表示するためにモバイルで少しスクロールする必要があります）、他の多くの人のような本文コンテンツでは、16px以上のフォントサイズを使用すると述べています。