Uiデザイン
読みやすさのための設計– Webタイポグラフィのガイド（インフォグラフィック付き）
書体の選択は、事実上誰でも行うことができます。ドロップダウンリストで名前をクリックするだけです。それでも、 権利 書体は、設計プロセスで最も慎重に決定されたものの1つです。
タイポグラフィデザイナー レターフォームの作成にキャリアを捧げます。それらの小さな形では、専門家は感情と中立性、個性と実用性、読みやすさと柔軟性などのバランスを取ります。特定のデザインの書体を選択するには、考慮事項の長いリストが付属しています。
伝統的に、グラフィックデザイナーは常に印刷デザインの観点からタイポグラフィの基礎を研究してきました。しかし、デザイナーの役割は今やあらゆる種類のデジタルメディアにまたがっているため、タイポグラフィは飼いならすのに大きな獣です。基本をブラッシュアップする精神で、書体を選択して最高の読書体験のためにフォーマットするときは、以下のWebタイポグラフィのヒントを使用してください。
デジタルタイポグラフィの課題
印刷デザインに関しては、ユーザーがそれをどのように操作するかについては、いくつかの変数があります。印刷されたページは、誰が持っているかによって形が変わることはありません。色を厳密に制御でき、書体は静止したままになります。なんて贅沢。デジタルタイポグラフィははるかに流動的です。タイポグラフィが画面に表示されるとき、それがどのように表示されるかに寄与する多くの要因があり、そのいくつかは次のとおりです。
- 画面サイズ：ただし、予測することは不可能です レスポンシブデザイン 寸法のわずかな変化に対応することを目的としています。しかし、それはタイプセットが無駄に行われることがあることを意味します。
- 画面の解像度：ピクセル密度は、テキストの読みやすさに大きな役割を果たします。技術の進歩により、高解像度の画面が大衆にとってよりアクセスしやすくなりましたが、 デザイナー 古い技術の外れ値を覚えておく必要があります。
- 画面の調整：明るさのレベルによって、画面に色がどのように表示されるかが決まります。 Webデザインの色の選択は、すべてのタイプの画面設定に対応する必要があります。
画面上で読むのに最適なフォントの選択
デジタルデザインはとらえどころのない技術です。それほど昔のことではありませんが、低解像度のモニターと互換性のあるフォントはごくわずかでした。
私たちは飛躍的に進歩しました 書体オプション 。それらは画面用に作成されており、読みやすさを向上させる特定のニュアンスで設計されています。印刷されたフォントが目をだまして読みやすさを向上させるのと同じように、 インクトラップ 、優れたWebフォントでも同じことができます。
デザインは、普遍的に標準的な書体に限定される必要はありません（Times New Romanは現在引退できます）。デザイナーがウェブセーフでアクセス可能な書体を調達するために利用できるオプションは無数にあります。 Google Fonts 、 フォントライブラリ 、および Adobe Typekit 簡単な統合と幅広い選択肢を提供するいくつかです。
楽しい読書体験のためのフォーマット
書体の選択はほんの始まりに過ぎません。線の長さと高さに関する決定は、デジタルデザインを作成または中断する可能性があります。簡単なヒントがあります。すべて大文字を使用せず、フォントの数を最小限に抑えることはできませんが、フォーマットの決定の多くは試行錯誤に依存しています。
エックスハイトやカウンターの開放性などの要素が読みやすさに影響するため、理想的なテキストサイズは選択した書体に依存します。テキストサイズによって、行の高さと長さが決まります。これらの決定間の関係をテストする簡単な方法は、次のようなツールを使用することです。 グリッドラバー 、スライダーを使用して各測定の外観を変更します。
テキストのブロックの背後にある背景色を選択することは、フォントの色自体と同じくらい重要です。 2つのコントラストによって、コピーの読み取り可能性が決まります。 WebAIMの コントラストチェッカー パレットがアクセシビリティ基準を満たすように、色の組み合わせのコントラスト比を簡単に決定するのに役立ちます。
テストを軽視することはありません
ガイドは画面上のエクスペリエンスを設計するときに役立ちますが、その場で見ずに設計が成功したかどうかを知るには要素が多すぎます。ほぼ時代遅れのスマートフォン、最大の高解像度モニター、画面が目がくらむほど明るくなっているなど、平均のはるか端にある画面とディスプレイ設定でタイポグラフィをテストします。極端な条件を通過する設計は、完全なユーザーアクセスの準備ができています。
Webタイポグラフィのガイド
スクリーンをデザインする際には考慮すべきことがたくさんあり、技術や製品が進歩するにつれて、デザインの条件は絶えず変化します。しかし、タイポグラフィに関しては、常に当てはまると思われることがいくつかあります。
これは、適切な書体を選択し、読みやすくするためにフォーマットするための包括的なガイドです。
ApeeScapeデザインブログの詳細：
基本を理解する
ウェブデザインのタイポグラフィとは何ですか？
Webデザインのタイポグラフィは印刷デザインに似ていますが、すべての画面タイプで読みやすくするために特定の考慮事項が必要です。書体、タイプサイズ、色、線の高さ、文字の形は、快適な読書体験を提供するために注意深くバランスをとる必要があるタイポグラフィ内のいくつかの要素です。
画面で読むのに最適なフォントはどれですか？
画面上で読むのに最適なフォントは、独特でオープンな文字形式のフォントです。 Proxima Nova、Georgia、およびFiraには、さまざまな画面表示で読みやすい特性があります。タイプサイズ、行の高さ、フォントと背景色のコントラストなど、その他の要因がフォントの読みやすさに影響します。
Webサイトにはどのフォントサイズを使用する必要がありますか？
Webサイトのフォントサイズは、それを表示する画面サイズに対応している必要があります。一般に、フォントはモバイル画面では12〜16 pt、タブレットでは15〜19 pt、デスクトップコンピューター画面では16〜20ptである必要があります。タイプサイズ、行の高さ、行の長さなどの要素も考慮する必要があります。
良いタイポグラフィとは何ですか？
優れたデザインのように、優れたタイポグラフィは目に見えません。タイポグラフィの主な目的は、書かれたメッセージを伝えることです。タイプは読みやすく、快適な読書体験を提供するように設計する必要があります。タイプサイズ、行の高さ、行の長さなどの要素は、常に考慮する必要のあるタイポグラフィの要素です。
Webサイトはいくつのフォントを使用する必要がありますか？
Webサイトでは、フォントの数を最小限に抑える必要があります。合計で3つ以下にする必要があります。サイトのフォントが多すぎると、ユーザーはビジュアルデザインのシフトが多すぎて混乱する可能性があります。選択した書体には、UIデザインで戦略的に使用できるさまざまな重みとスタイルが必要です。
