apeescape2.com
  • メイン
  • バックエンド
  • 収益と成長
  • 技術
  • トレンド
Uiデザイン

読みやすさのための設計– Webタイポグラフィのガイド(インフォグラフィック付き)

書体の選択は、事実上誰でも行うことができます。ドロップダウンリストで名前をクリックするだけです。それでも、 権利 書体は、設計プロセスで最も慎重に決定されたものの1つです。

タイポグラフィデザイナー レターフォームの作成にキャリアを捧げます。それらの小さな形では、専門家は感情と中立性、個性と実用性、読みやすさと柔軟性などのバランスを取ります。特定のデザインの書体を選択するには、考慮事項の長いリストが付属しています。

伝統的に、グラフィックデザイナーは常に印刷デザインの観点からタイポグラフィの基礎を研究してきました。しかし、デザイナーの役割は今やあらゆる種類のデジタルメディアにまたがっているため、タイポグラフィは飼いならすのに大きな獣です。基本をブラッシュアップする精神で、書体を選択して最高の読書体験のためにフォーマットするときは、以下のWebタイポグラフィのヒントを使用してください。



デジタルタイポグラフィの課題

印刷デザインに関しては、ユーザーがそれをどのように操作するかについては、いくつかの変数があります。印刷されたページは、誰が持っているかによって形が変わることはありません。色を厳密に制御でき、書体は静止したままになります。なんて贅沢。デジタルタイポグラフィははるかに流動的です。タイポグラフィが画面に表示されるとき、それがどのように表示されるかに寄与する多くの要因があり、そのいくつかは次のとおりです。

  • 画面サイズ:ただし、予測することは不可能です レスポンシブデザイン 寸法のわずかな変化に対応することを目的としています。しかし、それはタイプセットが無駄に行われることがあることを意味します。
  • 画面の解像度:ピクセル密度は、テキストの読みやすさに大きな役割を果たします。技術の進歩により、高解像度の画面が大衆にとってよりアクセスしやすくなりましたが、 デザイナー 古い技術の外れ値を覚えておく必要があります。
  • 画面の調整:明るさのレベルによって、画面に色がどのように表示されるかが決まります。 Webデザインの色の選択は、すべてのタイプの画面設定に対応する必要があります。

画面上で読むのに最適なフォントの選択

デジタルデザインはとらえどころのない技術です。それほど昔のことではありませんが、低解像度のモニターと互換性のあるフォントはごくわずかでした。

私たちは飛躍的に進歩しました 書体オプション 。それらは画面用に作成されており、読みやすさを向上させる特定のニュアンスで設計されています。印刷されたフォントが目をだまして読みやすさを向上させるのと同じように、 インクトラップ 、優れたWebフォントでも同じことができます。

印刷デザインフォントとWebデザインフォント

印刷用のフォントは、インクで作られるように設計されています。 Webフォントは、正方形のピクセルで作成されるように設計されています。

デザインは、普遍的に標準的な書体に限定される必要はありません(Times New Romanは現在引退できます)。デザイナーがウェブセーフでアクセス可能な書体を調達するために利用できるオプションは無数にあります。 Google Fonts 、 フォントライブラリ 、および Adobe Typekit 簡単な統合と幅広い選択肢を提供するいくつかです。

楽しい読書体験のためのフォーマット

書体の選択はほんの始まりに過ぎません。線の長さと高さに関する決定は、デジタルデザインを作成または中断する可能性があります。簡単なヒントがあります。すべて大文字を使用せず、フォントの数を最小限に抑えることはできませんが、フォーマットの決定の多くは試行錯誤に依存しています。

GridLoverを使用して画面上で読むのに最適なフォントのフォーマットを調整します

グリッドラバー ユーザーが読みやすくするためにタイプのフォーマットをカスタマイズできます。 CSSは、実装を容易にするために、サイドで生成されます。

エックスハイトやカウンターの開放性などの要素が読みやすさに影響するため、理想的なテキストサイズは選択した書体に依存します。テキストサイズによって、行の高さと長さが決まります。これらの決定間の関係をテストする簡単な方法は、次のようなツールを使用することです。 グリッドラバー 、スライダーを使用して各測定の外観を変更します。

テキストのブロックの背後にある背景色を選択することは、フォントの色自体と同じくらい重要です。 2つのコントラストによって、コピーの読み取り可能性が決まります。 WebAIMの コントラストチェッカー パレットがアクセシビリティ基準を満たすように、色の組み合わせのコントラスト比を簡単に決定するのに役立ちます。

テストを軽視することはありません

ガイドは画面上のエクスペリエンスを設計するときに役立ちますが、その場で見ずに設計が成功したかどうかを知るには要素が多すぎます。ほぼ時代遅れのスマートフォン、最大の高解像度モニター、画面が目がくらむほど明るくなっているなど、平均のはるか端にある画面とディスプレイ設定でタイポグラフィをテストします。極端な条件を通過する設計は、完全なユーザーアクセスの準備ができています。

Webタイポグラフィのガイド

スクリーンをデザインする際には考慮すべきことがたくさんあり、技術や製品が進歩するにつれて、デザインの条件は絶えず変化します。しかし、タイポグラフィに関しては、常に当てはまると思われることがいくつかあります。

これは、適切な書体を選択し、読みやすくするためにフォーマットするための包括的なガイドです。

Webタイポグラフィのガイド。

このインフォグラフィックのPDFバージョンをダウンロードしてください。 Infographicインフォグラフィック サルゲッチュ ');' onmouseover = '' style = 'cursor:pointer;' data-url = 'https://www.toptal.com/designers/typography/web-typography-infographic' data-img = 'img / ui-design / 61 / designing-readability-guide-web-typography-2。 png '>このインフォグラフィックをウェブサイトに埋め込みます。 •••

ApeeScapeデザインブログの詳細:

  • タイポグラフィの解剖学の複雑さを分析する
  • 書体分類のニュアンスを理解する
  • 言葉の問題-UXコピーの真の価値
  • より良いUXのためのUIスタイルガイドの作成
  • ウェブサイトの再設計の基礎-ケーススタディ

基本を理解する

ウェブデザインのタイポグラフィとは何ですか?

Webデザインのタイポグラフィは印刷デザインに似ていますが、すべての画面タイプで読みやすくするために特定の考慮事項が必要です。書体、タイプサイズ、色、線の高さ、文字の形は、快適な読書体験を提供するために注意深くバランスをとる必要があるタイポグラフィ内のいくつかの要素です。

画面で読むのに最適なフォントはどれですか?

画面上で読むのに最適なフォントは、独特でオープンな文字形式のフォントです。 Proxima Nova、Georgia、およびFiraには、さまざまな画面表示で読みやすい特性があります。タイプサイズ、行の高さ、フォントと背景色のコントラストなど、その他の要因がフォントの読みやすさに影響します。

Webサイトにはどのフォントサイズを使用する必要がありますか?

Webサイトのフォントサイズは、それを表示する画面サイズに対応している必要があります。一般に、フォントはモバイル画面では12〜16 pt、タブレットでは15〜19 pt、デスクトップコンピューター画面では16〜20ptである必要があります。タイプサイズ、行の高さ、行の長さなどの要素も考慮する必要があります。

良いタイポグラフィとは何ですか?

優れたデザインのように、優れたタイポグラフィは目に見えません。タイポグラフィの主な目的は、書かれたメッセージを伝えることです。タイプは読みやすく、快適な読書体験を提供するように設計する必要があります。タイプサイズ、行の高さ、行の長さなどの要素は、常に考慮する必要のあるタイポグラフィの要素です。

Webサイトはいくつのフォントを使用する必要がありますか?

Webサイトでは、フォントの数を最小限に抑える必要があります。合計で3つ以下にする必要があります。サイトのフォントが多すぎると、ユーザーはビジュアルデザインのシフトが多すぎて混乱する可能性があります。選択した書体には、UIデザインで戦略的に使用できるさまざまな重みとスタイルが必要です。

恩返し:レバレッジドバイアウトを理解する

投資家と資金調達

恩返し:レバレッジドバイアウトを理解する
財務モデリングのケーススタディ:OOVA

財務モデリングのケーススタディ:OOVA

投資家と資金調達

人気の投稿
別の次元、新しい習得–アイソメトリックイラストレーションチュートリアル
別の次元、新しい習得–アイソメトリックイラストレーションチュートリアル
TensorFlow入門:機械学習チュートリアル
TensorFlow入門:機械学習チュートリアル
ゲシュタルトの設計原則を探る
ゲシュタルトの設計原則を探る
Webおよび印刷デザインの書体スタイ​​ル
Webおよび印刷デザインの書体スタイ​​ル
退屈なアイコンをオリジナルの傑作にすばやく変換する方法
退屈なアイコンをオリジナルの傑作にすばやく変換する方法
 
42億ドルは合理的ですか?インスタカートの評価を評価する方法
42億ドルは合理的ですか?インスタカートの評価を評価する方法
コウノトリ、パート4:ステートメントの実装とまとめ
コウノトリ、パート4:ステートメントの実装とまとめ
第一印象–UXのオンボーディングガイド
第一印象–UXのオンボーディングガイド
Android DDMS:究極のAndroidコンソールのガイド
Android DDMS:究極のAndroidコンソールのガイド
H-1Bビザ:ホンジュラスからシリコンバレーへのiOS開発者の旅
H-1Bビザ:ホンジュラスからシリコンバレーへのiOS開発者の旅
人気の投稿
  • AWS認定を取得する方法
  • ブルームバーグターミナルの1か月あたりの費用はいくらですか
  • それは私が知る必要があるすべてかもしれません
  • pmoオフィスとは
  • SQL Server2012でのパフォーマンスチューニング
  • Javaでプログラミング言語を作成する方法
カテゴリー
ヒントとツール モバイル バックエンド プロジェクト管理 人とチーム エンジニアリング管理 プロセスとツール その他 設計プロセス 革新

© 2021 | 全著作権所有

apeescape2.com