👇🏽 👨‍👧‍👦 📋 モバイルタイポグラフィ 👩🏽‍✈️ 🔬 👩🏽‍🏭

設計を開発するときは、大画面だけでなくモバイルデバイスでもその表示の正確さを考慮する必要があります。そして何よりもまず、コンテンツの読みやすさに関するものです。したがって、Webデザインの基礎であるタイポグラフィに特別な注意を払う必要があります。 6年前、このテーマに関する有用な記事があります-Web Designは95％のタイポグラフィです（著者Oliver Reichenstein）。

はじめに、モバイルタイポグラフィの主なポイントとモバイルデバイスの例を検討してください。

大きさ

モバイルデバイスでサイトを読み取る際の最も一般的な問題の1つは、フォントサイズが小さすぎることです。小さなテキストを読むためにサイトを絶えず拡大する必要があり、これはユーザーにとって非常に迷惑です。サイトにモバイルバージョンまたはレスポンシブデザインが含まれていても、小さな活字による読みやすさの問題は珍しくありません。

一般に、ページのフォントサイズは、サイトの外観と魅力を完全に変える可能性があります。 Modular Scale Calculator -Tim Brownの電卓。サイトのフォントサイズを選択するのに役立ちます。これには、 "黄金比"（1：1.618）も含まれます。

フォントサイズ比が16/24/72のサンプルサイト：

コントラスト

デスクトップとモバイルデバイスの両方で、サイト上のテキストは背景と対照的です。この一見シンプルで明白なルールはしばしば無視されるため、紫色の背景に赤いテキストが、青い背景に黄色のテキストが表示されることがあります。

ところで、サイト-checkmycolours.comで色のコントラストをチェックするサービスもあります。以下は、優れたコンテンツコントラストを持つサイトです。

くぼみ

デバイスごとに画面サイズが異なり、ディスプレイのアスペクト比も異なります。サイトを作成するときにこれを覚えておく必要があります。テキストは、端から十分なインデントと正しい行間隔で読むのに便利です。これは、モバイルデバイスでテキストを読む場合に特に当てはまります。例：

フォント選択

どのデバイスやOSでも正しく表示されるフォントを選択するのは簡単なことではありません。フォントがさまざまなデバイスでどのようにレンダリングされるかを考慮することは非常に重要です。例えば：

この問題の解決には、 Web Font Specimen 、 Typecastアプリ、 Typekitのフォントブラウザーなどの特別なWebサービスが役立ちます。画面サイズごとに異なるフォントを使用することをお勧めします。これは、たとえば、サイトA List Apartで実行されます。

また、不適切な場所でカスタムフォントを使用しないでください。ここで、たとえば、リーグスクリプトは、読むことが不可能なように見えます。

レスポンシブデザイン

アダプティブデザインを開発するときは、フォントサイズ、インデント、および行の長さの変更に特に注意して、上記のすべてを考慮する必要があります。そしてもちろん、結果のレイアウトをテストします。

フォントサイズを変更する

ほとんどのサイトでは、pxまたはemを使用してフォントサイズを設定しています。 Emは、ユーザーがブラウザでフォントサイズを変更できるため、推奨されます。しかし、欠点があります-emのサイズは親要素のfont-sizeに依存します。したがって、remを使用することをお勧めします。フォントサイズはルート要素に依存します-html：

html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */

メディアクエリの例：

 @media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }

インデントと行の長さ

Baymard Instituteの調査によると、読みやすい最適な行の長さは50〜75文字です。どのデバイスでもこのルールに自動的に準拠するのは簡単ではありません。たとえば、デバイスのデフォルトのフォントサイズは16ピクセルであり、20ピクセルを使用します。フォントのサイズは1.25レムでなければなりません。テキストブロックの幅を675ピクセルにし、行に60文字を配置します。

 @media (min-width: 950px) { .container {width:675px;} }

したがって、任意のサイズの画面のコンテナを規定することが可能です。大画面で読みやすくするために、2つの列にコンテンツを配置できます。

 @media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }